Implemented 3rd party branding guidelines

diff --git a/com.woltlab.wcf/templates/login.tpl b/com.woltlab.wcf/templates/login.tpl
index abfe6a23d9a8d156a447a7cf2dfd82a8b69ff12a..e3b93539fdce6fb98dacfe7e32dcd3ce949976e0 100644 (file)
--- a/com.woltlab.wcf/templates/login.tpl
+++ b/com.woltlab.wcf/templates/login.tpl
@@ -117,25 +117,25 @@
                                                        {content}
                                                                {if GITHUB_PUBLIC_KEY !== '' && GITHUB_PRIVATE_KEY !== ''}
                                                                        <li id="githubAuth" class="3rdPartyAuth">
-                                                                               <a href="{link controller='GithubAuth'}{/link}" class="button small"><span class="icon icon16 icon-github"></span> <span>{lang}wcf.user.3rdparty.github.login{/lang}</span></a>
+                                                                               <a href="{link controller='GithubAuth'}{/link}" class="thirdPartyLoginButton githubLoginButton"><span class="icon icon16 icon-github"></span> <span>{lang}wcf.user.3rdparty.github.login{/lang}</span></a>
                                                                        </li>
                                                                {/if}
                                                                
                                                                {if TWITTER_PUBLIC_KEY !== '' && TWITTER_PRIVATE_KEY !== ''}
                                                                        <li id="twitterAuth" class="3rdPartyAuth">
-                                                                               <a href="{link controller='TwitterAuth'}{/link}" class="button small"><span class="icon icon16 icon-twitter"></span> <span>{lang}wcf.user.3rdparty.twitter.login{/lang}</span></a>
+                                                                               <a href="{link controller='TwitterAuth'}{/link}" class="thirdPartyLoginButton twitterLoginButton"><span class="icon icon16 icon-twitter"></span> <span>{lang}wcf.user.3rdparty.twitter.login{/lang}</span></a>
                                                                        </li>
                                                                {/if}
                                                                
                                                                {if FACEBOOK_PUBLIC_KEY !== '' && FACEBOOK_PRIVATE_KEY !== ''}
                                                                        <li id="facebookAuth" class="3rdPartyAuth">
-                                                                               <a href="{link controller='FacebookAuth'}{/link}" class="button small"><span class="icon icon16 icon-facebook"></span> <span>{lang}wcf.user.3rdparty.facebook.login{/lang}</span></a>
+                                                                               <a href="{link controller='FacebookAuth'}{/link}" class="thirdPartyLoginButton facebookLoginButton"><span class="icon icon16 icon-facebook"></span> <span>{lang}wcf.user.3rdparty.facebook.login{/lang}</span></a>
                                                                        </li>
                                                                {/if}
                                                                
                                                                {if GOOGLE_PUBLIC_KEY !== '' && GOOGLE_PRIVATE_KEY !== ''}
                                                                        <li id="googleAuth" class="3rdPartyAuth">
-                                                                               <a href="{link controller='GoogleAuth'}{/link}" class="button small"><span class="icon icon16 icon-google-plus"></span> <span>{lang}wcf.user.3rdparty.google.login{/lang}</span></a>
+                                                                               <a href="{link controller='GoogleAuth'}{/link}" class="thirdPartyLoginButton googleLoginButton"><span class="icon icon16 icon-google-plus"></span> <span>{lang}wcf.user.3rdparty.google.login{/lang}</span></a>
                                                                        </li>
                                                                {/if}
                                                                

diff --git a/com.woltlab.wcf/templates/userPanel.tpl b/com.woltlab.wcf/templates/userPanel.tpl
index 3909e4c33b82c8555585513beaa84dbab50018a6..de7a9d4dc5b129d74937d4f487c69edce72a3365 100644 (file)
--- a/com.woltlab.wcf/templates/userPanel.tpl
+++ b/com.woltlab.wcf/templates/userPanel.tpl
@@ -59,25 +59,25 @@
                                {capture assign='__3rdPartyButtons'}
                                        {if GITHUB_PUBLIC_KEY !== '' && GITHUB_PRIVATE_KEY !== ''}
                                                <li id="githubAuth" class="3rdPartyAuth">
-                                                       <a href="{link controller='GithubAuth'}{/link}" class="button"><span class="icon icon16 icon-github"></span> <span>{lang}wcf.user.3rdparty.github.login{/lang}</span></a>
+                                                       <a href="{link controller='GithubAuth'}{/link}" class="thirdPartyLoginButton githubLoginButton"><span class="icon icon16 icon-github"></span> <span>{lang}wcf.user.3rdparty.github.login{/lang}</span></a>
                                                </li>
                                        {/if}
                                        
                                        {if TWITTER_PUBLIC_KEY !== '' && TWITTER_PRIVATE_KEY !== ''}
                                                <li id="twitterAuth" class="3rdPartyAuth">
-                                                       <a href="{link controller='TwitterAuth'}{/link}" class="button"><span class="icon icon16 icon-twitter"></span> <span>{lang}wcf.user.3rdparty.twitter.login{/lang}</span></a>
+                                                       <a href="{link controller='TwitterAuth'}{/link}" class="thirdPartyLoginButton twitterLoginButton"><span class="icon icon16 icon-twitter"></span> <span>{lang}wcf.user.3rdparty.twitter.login{/lang}</span></a>
                                                </li>
                                        {/if}
                                        
                                        {if FACEBOOK_PUBLIC_KEY !== '' && FACEBOOK_PRIVATE_KEY !== ''}
                                                <li id="facebookAuth" class="3rdPartyAuth">
-                                                       <a href="{link controller='FacebookAuth'}{/link}" class="button"><span class="icon icon16 icon-facebook"></span> <span>{lang}wcf.user.3rdparty.facebook.login{/lang}</span></a>
+                                                       <a href="{link controller='FacebookAuth'}{/link}" class="thirdPartyLoginButton facebookLoginButton"><span class="icon icon16 icon-facebook"></span> <span>{lang}wcf.user.3rdparty.facebook.login{/lang}</span></a>
                                                </li>
                                        {/if}
                                        
                                        {if GOOGLE_PUBLIC_KEY !== '' && GOOGLE_PRIVATE_KEY !== ''}
                                                <li id="googleAuth" class="3rdPartyAuth">
-                                                       <a href="{link controller='GoogleAuth'}{/link}" class="button"><span class="icon icon16 icon-google-plus"></span> <span>{lang}wcf.user.3rdparty.google.login{/lang}</span></a>
+                                                       <a href="{link controller='GoogleAuth'}{/link}" class="thirdPartyLoginButton googleLoginButton"><span class="icon icon16 icon-google-plus"></span> <span>{lang}wcf.user.3rdparty.google.login{/lang}</span></a>
                                                </li>
                                        {/if}
                                        
@@ -132,7 +132,7 @@
                                        {if $__3rdPartyButtons|trim}
                                                <fieldset>
                                                        <legend>{lang}wcf.user.login.3rdParty{/lang}</legend>
-                                                       <ul class="buttonGroup thirdPartyLogin">
+                                                       <ul class="buttonList smallButtons thirdPartyLogin">
                                                                {@$__3rdPartyButtons}   
                                                        </ul>
                                                </fieldset>

diff --git a/wcfsetup/install/files/style/user.less b/wcfsetup/install/files/style/user.less
index aa1f9c3823ec27de5b1ea88cb7cf6ae22307565a..55b890a2c9674039739a185b97ef82bf8670210d 100644 (file)
--- a/wcfsetup/install/files/style/user.less
+++ b/wcfsetup/install/files/style/user.less
@@ -213,6 +213,64 @@
 }
 
 /* 3rd party login */
-.buttonGroup.thirdPartyLogin {
+.buttonList.thirdPartyLogin {
        text-align: center;
-}
\ No newline at end of file
+}
+
+.thirdPartyLoginButton {
+       border-radius: 3px;
+       border: 1px solid rgba(255, 255, 255, 0.1);
+       color: #fff;
+       display: inline-block;
+       font-size: 0;
+       
+       &:hover {
+               color: #fff;
+               text-decoration: none;
+       }
+       
+       > .icon {
+               border-right: 1px solid rgba(0, 0, 0, 0.1);
+               color: #fff;
+               text-shadow: none;
+               padding: 4px 6px;
+       }
+       
+       > span:not(.icon) {
+               font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+               font-size: 1rem;
+               padding: 4px 12px;
+       }
+       
+       &.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);
+               }
+       }
+}