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