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 | } | |
| 700ed535 AE |
62 | } |
| 63 | ||
| 64 | @include screen-md-up { | |
| 65 | .loginForm:not(.loginFormLoginOnly) > form { | |
| 5ea92119 AE |
66 | -webkit-column-count: 2; |
| 67 | -moz-column-count: 2; | |
| 68 | column-count: 2; | |
| 69 | ||
| 70 | -webkit-column-gap: 40px; | |
| 71 | -moz-column-gap: 40px; | |
| 72 | column-gap: 40px; | |
| 73 | ||
| 74 | > .section { | |
| 595cf59c AE |
75 | /* Sections should never be split, but Firefox, IE and Edge don't seem |
| 76 | to care about this despite advertising the support for it. We can work | |
| 77 | around this by using `overflow: hidden` which magically does the job, | |
| 78 | but doesn't affect Chrome which properly breaks anyway. */ | |
| 79 | ||
| 5ea92119 | 80 | margin-top: 0; |
| 595cf59c | 81 | overflow: hidden; /* Fix for Firefox, IE and Edge */ |
| 5ea92119 AE |
82 | |
| 83 | -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ | |
| 84 | page-break-inside: avoid; /* Firefox */ | |
| 85 | break-inside: avoid; /* IE 10+ */ | |
| 86 | ||
| 87 | &.loginFormLogin { | |
| 5ea92119 AE |
88 | page-break-after: always; |
| 89 | break-after: always; | |
| 6c04272e | 90 | -webkit-column-break-after: always; |
| 5ea92119 AE |
91 | } |
| 92 | ||
| 93 | &.loginFormRegister { | |
| 94 | margin-top: 0; | |
| 95 | ||
| 96 | & + .loginFormThirdPartyLogin { | |
| 97 | margin-top: 30px; | |
| 98 | } | |
| 99 | } | |
| 100 | } | |
| 101 | } | |
| 102 | } | |
| 103 | ||
| f216765b | 104 | @include screen-md-up { |
| e1e51f46 | 105 | /* full page login: missing margin due to different DOM */ |
| 5ea92119 AE |
106 | .contentHeader ~ .loginForm { |
| 107 | margin-top: 30px; | |
| 108 | } | |
| e1e51f46 AE |
109 | |
| 110 | /* force columns to be 300px wide in login overlay */ | |
| 700ed535 | 111 | .dialogContent .loginForm:not(.loginFormLoginOnly) .section { |
| e1e51f46 AE |
112 | width: 300px; |
| 113 | } | |
| 5ea92119 | 114 | } |