Fix styling of the 3rdParty buttons in account management form

Fix #2956

diff --git a/com.woltlab.wcf/templates/accountManagement.tpl b/com.woltlab.wcf/templates/accountManagement.tpl
index 90a94e1b237cc7e9d19995c64e5f7277d57bf0b9..cc35e9d75f238ceb60f91792500c6f9c742ba13a 100644 (file)
--- a/com.woltlab.wcf/templates/accountManagement.tpl
+++ b/com.woltlab.wcf/templates/accountManagement.tpl
@@ -194,7 +194,7 @@
                                                                {if $__wcf->getSession()->getVar('__githubToken')}
                                                                        <label><input type="checkbox" name="githubConnect" value="1"{if $githubConnect} checked{/if}> {lang}wcf.user.3rdparty.github.connect{/lang}</label>
                                                                {else}
-                                                                       <a href="{link controller='GithubAuth'}{/link}" class="thirdPartyLoginButton githubLoginButton"><span class="icon icon16 fa-github"></span> <span>{lang}wcf.user.3rdparty.github.connect{/lang}</span></a>
+                                                                       <a href="{link controller='GithubAuth'}{/link}" class="thirdPartyLoginButton githubLoginButton button"><span class="icon icon24 fa-github"></span> <span>{lang}wcf.user.3rdparty.github.connect{/lang}</span></a>
                                                                {/if}
                                                        </dd>
                                                </dl>
@@ -207,7 +207,7 @@
                                                                {if $__wcf->getSession()->getVar('__twitterData')}
                                                                        <label><input type="checkbox" name="twitterConnect" value="1"{if $twitterConnect} checked{/if}> {lang}wcf.user.3rdparty.twitter.connect{/lang}</label>
                                                                {else}
-                                                                       <a href="{link controller='TwitterAuth'}{/link}" class="thirdPartyLoginButton twitterLoginButton"><span class="icon icon16 fa-twitter"></span> <span>{lang}wcf.user.3rdparty.twitter.connect{/lang}</span></a>
+                                                                       <a href="{link controller='TwitterAuth'}{/link}" class="thirdPartyLoginButton twitterLoginButton button"><span class="icon icon24 fa-twitter"></span> <span>{lang}wcf.user.3rdparty.twitter.connect{/lang}</span></a>
                                                                {/if}
                                                        </dd>
                                                </dl>
@@ -220,7 +220,7 @@
                                                                {if $__wcf->getSession()->getVar('__facebookData')}
                                                                        <label><input type="checkbox" name="facebookConnect" value="1"{if $facebookConnect} checked{/if}> {lang}wcf.user.3rdparty.facebook.connect{/lang}</label>
                                                                {else}
-                                                                       <a href="{link controller='FacebookAuth'}{/link}" class="thirdPartyLoginButton facebookLoginButton"><span class="icon icon16 fa-facebook"></span> <span>{lang}wcf.user.3rdparty.facebook.connect{/lang}</span></a>
+                                                                       <a href="{link controller='FacebookAuth'}{/link}" class="thirdPartyLoginButton facebookLoginButton button"><span class="icon icon24 fa-facebook"></span> <span>{lang}wcf.user.3rdparty.facebook.connect{/lang}</span></a>
                                                                {/if}
                                                        </dd>
                                                </dl>
@@ -233,7 +233,7 @@
                                                                {if $__wcf->getSession()->getVar('__googleData')}
                                                                        <label><input type="checkbox" name="googleConnect" value="1"{if $googleConnect} checked{/if}> {lang}wcf.user.3rdparty.google.connect{/lang}</label>
                                                                {else}
-                                                                       <a href="{link controller='GoogleAuth'}{/link}" class="thirdPartyLoginButton googleLoginButton"><span class="icon icon16 fa-google"></span> <span>{lang}wcf.user.3rdparty.google.connect{/lang}</span></a>
+                                                                       <a href="{link controller='GoogleAuth'}{/link}" class="thirdPartyLoginButton googleLoginButton button"><span class="icon icon24 fa-google"></span> <span>{lang}wcf.user.3rdparty.google.connect{/lang}</span></a>
                                                                {/if}
                                                        </dd>
                                                </dl>

diff --git a/wcfsetup/install/files/style/ui/userLogin.scss b/wcfsetup/install/files/style/ui/userLogin.scss
index 9b5fb87ed5057407628c35e49871190e240f8fcb..7fb0043d53a1cb88beb71918f885d741c1c06630 100644 (file)
--- a/wcfsetup/install/files/style/ui/userLogin.scss
+++ b/wcfsetup/install/files/style/ui/userLogin.scss
@@ -1,3 +1,50 @@
+@mixin thirdPartyLoginButtons {
+       border-width: 0;
+       color: rgba(255, 255, 255, 1);
+       
+       > .icon {
+               flex: 0 0 24px;
+       }
+       
+       > span:not(.icon) {
+               flex: 1 1 auto;
+               margin-left: 5px;
+       }
+       
+       /* branding */
+       &.googleLoginButton {
+               background-color: rgb(221, 75, 57);
+               
+               &:hover {
+                       background-color: rgb(202, 53, 35);
+               }
+       }
+       
+       &.facebookLoginButton {
+               background-color: rgb(59, 89, 152);
+               
+               &:hover {
+                       background-color: rgb(48, 72, 123);
+               }
+       }
+       
+       &.twitterLoginButton {
+               background-color: rgb(85, 172, 238);
+               
+               &:hover {
+                       background-color: rgb(48, 154, 234);
+               }
+       }
+       
+       &.githubLoginButton {
+               background-color: rgb(68, 68, 68);
+               
+               &:hover {
+                       background-color: rgb(48, 48, 48);
+               }
+       }
+}
+
 .loginForm > form {
        .userLoginButtons {
                margin-top: 20px;
@@ -14,50 +61,8 @@
                .thirdPartyLoginButton {
                        align-items: center;
                        display: flex;
-                       border-width: 0;
-                       color: rgba(255, 255, 255, 1);
                        
-                       > .icon {
-                               flex: 0 0 24px;
-                       }
-                       
-                       > span:not(.icon) {
-                               flex: 1 1 auto;
-                               margin-left: 5px;
-                       }
-                       
-                       /* branding */
-                       &.googleLoginButton {
-                               background-color: rgb(221, 75, 57);
-                               
-                               &:hover {
-                                       background-color: rgb(202, 53, 35);
-                               }
-                       }
-                       
-                       &.facebookLoginButton {
-                               background-color: rgb(59, 89, 152);
-                               
-                               &:hover {
-                                       background-color: rgb(48, 72, 123);
-                               }
-                       }
-                       
-                       &.twitterLoginButton {
-                               background-color: rgb(85, 172, 238);
-                               
-                               &:hover {
-                                       background-color: rgb(48, 154, 234);
-                               }
-                       }
-                       
-                       &.githubLoginButton {
-                               background-color: rgb(68, 68, 68);
-                               
-                               &:hover {
-                                       background-color: rgb(48, 48, 48);
-                               }
-                       }
+                       @include thirdPartyLoginButtons;
                }
        }
 }
@@ -117,3 +122,10 @@
 .loginFormLogin > .section {
        margin-top: 30px !important;
 }
+
+/* CSS does not allow selectors starting with a number. 
+   Therefore we are using the unicode character to identify
+   the correct selector. In a nutshell: the selector is #3rdParty.section */
+#\33 rdParty.section .thirdPartyLoginButton {
+       @include thirdPartyLoginButtons;
+}