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

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