From 8eef36edd2e4d93896cd1ad6adf91958eb6ef783 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Mon, 5 May 2014 01:38:49 +0200
Subject: [PATCH] Implemented 3rd party branding guidelines

---
 com.woltlab.wcf/templates/login.tpl     |  8 ++--
 com.woltlab.wcf/templates/userPanel.tpl | 10 ++--
 wcfsetup/install/files/style/user.less  | 62 ++++++++++++++++++++++++-
 3 files changed, 69 insertions(+), 11 deletions(-)

diff --git a/com.woltlab.wcf/templates/login.tpl b/com.woltlab.wcf/templates/login.tpl
index abfe6a23d9..e3b93539fd 100644
--- 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 3909e4c33b..de7a9d4dc5 100644
--- 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 aa1f9c3823..55b890a2c9 100644
--- 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);
+		}
+	}
+}
-- 
2.20.1