From: Marcel Werk <burntime@woltlab.com>
Date: Sun, 4 May 2014 23:38:49 +0000 (+0200)
Subject: Implemented 3rd party branding guidelines
X-Git-Tag: 2.0.7~43
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=8eef36edd2e4d93896cd1ad6adf91958eb6ef783;p=GitHub%2FWoltLab%2FWCF.git

Implemented 3rd party branding guidelines
---

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);
+		}
+	}
+}