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

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 label {
   5   display: block;
   6 }
   7
   8 input:not([type=submit]) {
   9   @include peertube-input-text(340px);
  10   display: inline-block;
  11   margin-right: 5px;
  12
  13 }
  14
  15 input[type=submit] {
  16   @include peertube-button;
  17   @include orange-button;
  18 }
  19
  20 .modal-body {
  21   text-align: left;
  22
  23   .forgot-password-instructions {
  24     margin-bottom: 20px;
  25   }
  26 }
  27
  28 .modal-footer.inputs {
  29   .action-button.action-button-cancel {
  30     width: auto !important;
  31     display: inline-block;
  32   }
  33 }
  34
  35 @media screen and (max-width: #{map-get($container-max-widths, sm)}) {
  36   .modal-body {
  37     #forgot-password-email {
  38       width: 100%;
  39     }
  40   }
  41
  42   .modal-footer.inputs {
  43     .action-button.action-button-cancel {
  44       display: none;
  45     }
  46   }
  47 }
  48
  49 .create-an-account, .forgot-password-button {
  50   color: pvar(--mainForegroundColor);
  51   cursor: pointer;
  52   transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1);
  53
  54   &:hover {
  55     text-decoration: none !important;
  56     opacity: .7 !important;
  57   }
  58 }
  59
  60 .login-form-and-externals {
  61   display: flex;
  62   flex-wrap: wrap;
  63   font-size: 15px;
  64
  65   form {
  66     margin: 0 50px 20px 0;
  67   }
  68
  69   .external-login-blocks {
  70     min-width: 200px;
  71
  72     .block-title {
  73       font-weight: $font-semibold;
  74     }
  75
  76     .external-login-block {
  77       @include disable-default-a-behaviour;
  78
  79       cursor: pointer;
  80       border: 1px solid #d1d7e0;
  81       border-radius: 5px;
  82       color: pvar(--mainForegroundColor);
  83       margin: 10px 10px 0 0;
  84       display: flex;
  85       justify-content: center;
  86       align-items: center;
  87       min-height: 35px;
  88       min-width: 100px;
  89
  90       &:hover {
  91         background-color: rgba(209, 215, 224, 0.5)
  92       }
  93     }
  94   }
  95 }