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

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 label {
   5   @include font-size(18px);
   6
   7   display: block;
   8   margin-bottom: 5px;
   9 }
  10
  11 input[type=text],
  12 input[type=email] {
  13   @include peertube-input-text(100%);
  14 }
  15
  16 .wrapper {
  17   display: flex;
  18   justify-content: space-between;
  19   flex-wrap: wrap;
  20   margin: auto;
  21
  22   > div {
  23     flex: 1 1;
  24   }
  25 }
  26
  27 .wrapper,
  28 .alert {
  29   max-width: 1200px;
  30 }
  31
  32 .alert {
  33   @include margin(0, auto, 2rem);
  34 }
  35
  36 .login-form-and-externals {
  37   @include margin-left(10px);
  38   @include margin-right(10px);
  39   @include margin-bottom(2.5rem);
  40
  41   display: flex;
  42   flex-wrap: wrap;
  43   justify-content: center;
  44   max-width: 450px;
  45 }
  46
  47 .external-login-blocks {
  48   min-width: 200px;
  49   text-align: center;
  50
  51   .external-login-block {
  52     @include disable-default-a-behaviour;
  53
  54     cursor: pointer;
  55     border: 1px solid #d1d7e0;
  56     border-radius: 5px;
  57     color: pvar(--mainForegroundColor);
  58     margin: 10px 10px 0 0;
  59     display: flex;
  60     justify-content: center;
  61     align-items: center;
  62     min-height: 35px;
  63     min-width: 100px;
  64
  65     &:hover {
  66       background-color: rgba(209, 215, 224, 0.5);
  67     }
  68   }
  69 }
  70
  71 .instance-information {
  72   @include margin-left(10px);
  73   @include margin-right(10px);
  74   @include margin-bottom(2.5rem);
  75   @include rfs (22rem, min-width);
  76
  77   max-width: 600px;
  78 }
  79
  80 .terms-anchor {
  81   display: inline;
  82 }
  83
  84 .terms-link {
  85   display: none;
  86 }
  87
  88 @include on-small-main-col {
  89   .wrapper {
  90     flex-direction: column-reverse;
  91
  92     .login-form-and-externals,
  93     .instance-information {
  94       @include margin-left(0);
  95       @include margin-right(0);
  96
  97       width: 100%;
  98       max-width: 450px;
  99       min-width: unset;
 100       align-self: center;
 101     }
 102
 103     .instance-information {
 104       ::ng-deep .accordion {
 105         display: none;
 106       }
 107     }
 108
 109     .terms-anchor {
 110       display: none;
 111     }
 112
 113     .terms-link {
 114       display: inline;
 115     }
 116   }
 117 }