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