wcfsetup/install/files/style/ui/userLogin.scss

   1 .loginForm > form {
   2         .userLoginButtons {
   3                 margin-top: 20px;
   4                 text-align: center;
   5         }
   6
   7         .thirdPartyLogin {
   8                 flex: 0 0 100%;
   9
  10                 & + .thirdPartyLogin {
  11                         margin-top: 10px;
  12                 }
  13
  14                 .thirdPartyLoginButton {
  15                         align-items: center;
  16                         display: flex;
  17                         border-width: 0;
  18                         color: rgba(255, 255, 255, 1);
  19
  20                         > .icon {
  21                                 flex: 0 0 24px;
  22                         }
  23
  24                         > span:not(.icon) {
  25                                 flex: 1 1 auto;
  26                                 margin-left: 5px;
  27                         }
  28
  29                         /* branding */
  30                         &.googleLoginButton {
  31                                 background-color: rgb(221, 75, 57);
  32
  33                                 &:hover {
  34                                         background-color: rgb(202, 53, 35);
  35                                 }
  36                         }
  37
  38                         &.facebookLoginButton {
  39                                 background-color: rgb(59, 89, 152);
  40
  41                                 &:hover {
  42                                         background-color: rgb(48, 72, 123);
  43                                 }
  44                         }
  45
  46                         &.twitterLoginButton {
  47                                 background-color: rgb(85, 172, 238);
  48
  49                                 &:hover {
  50                                         background-color: rgb(48, 154, 234);
  51                                 }
  52                         }
  53
  54                         &.githubLoginButton {
  55                                 background-color: rgb(68, 68, 68);
  56
  57                                 &:hover {
  58                                         background-color: rgb(48, 48, 48);
  59                                 }
  60                         }
  61                 }
  62         }
  63 }
  64
  65 @include screen-md-up {
  66         .loginForm:not(.loginFormLoginOnly) > form {
  67                 -webkit-column-count: 2;
  68                 -moz-column-count: 2;
  69                 column-count: 2;
  70
  71                 -webkit-column-gap: 40px;
  72                 -moz-column-gap: 40px;
  73                 column-gap: 40px;
  74
  75                 > .section {
  76                         /* Sections should never be split, but Firefox, IE and Edge don't seem
  77                            to care about this despite advertising the support for it. We can work
  78                            around this by using `overflow: hidden` which magically does the job,
  79                            but doesn't affect Chrome which properly breaks anyway. */
  80
  81                         margin-top: 0;
  82                         overflow: hidden; /* Fix for Firefox, IE and Edge */
  83
  84                         -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  85                         page-break-inside: avoid; /* Firefox */
  86                         break-inside: avoid; /* IE 10+ */
  87
  88                         &.loginFormLogin {
  89                                 page-break-after: always;
  90                                 break-after: always;
  91                                 -webkit-column-break-after: always;
  92                         }
  93
  94                         &.loginFormRegister {
  95                                 margin-top: 0;
  96
  97                                 & + .loginFormThirdPartyLogin {
  98                                         margin-top: 30px;
  99                                 }
 100                         }
 101                 }
 102         }
 103 }
 104
 105 @include screen-md-up {
 106         /* full page login: missing margin due to different DOM */
 107         .contentHeader ~ .loginForm {
 108                 margin-top: 30px;
 109         }
 110
 111         /* force columns to be 300px wide in login overlay */
 112         .dialogContent .loginForm:not(.loginFormLoginOnly) .section {
 113                 width: 300px;
 114         }
 115 }
 116
 117 .loginFormLogin > .section {
 118         margin-top: 30px !important;
 119 }