From 2465beff844002745726fd37866ac1f65ecc5e65 Mon Sep 17 00:00:00 2001
From: Luzifr <szekely@woltlab.com>
Date: Thu, 26 Jan 2012 19:49:32 +0100
Subject: [PATCH] =?utf8?q?Multiple=20changes=20=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Extended the button-effect with an additional shadow; Fixed bad
:focus-state on some buttons; Put user-avatar classes here, so that it
can be used everywhere (maybe only temporarily); Fixed bad rendering of
the page-navigation in Opera (by rebuilding the numbers-display).
---
 wcfsetup/install/files/acp/style/wcf.css      | 117 +++++++++++-------
 .../install/files/acp/templates/header.tpl    |   2 +-
 wcfsetup/install/files/js/WCF.js              |   4 +-
 .../PagesFunctionTemplatePlugin.class.php     |   2 +-
 4 files changed, 76 insertions(+), 49 deletions(-)

diff --git a/wcfsetup/install/files/acp/style/wcf.css b/wcfsetup/install/files/acp/style/wcf.css
index 3a3013dd36..1c89bbcd86 100644
--- a/wcfsetup/install/files/acp/style/wcf.css
+++ b/wcfsetup/install/files/acp/style/wcf.css
@@ -130,6 +130,18 @@ hr {
 	float: left;
 }
 
+/* User Avatar */
+
+.userAvatar {
+	/* none */
+}
+
+.userAvatar img {
+	border: 1px solid rgba(204, 204, 204, 1);
+	background-color: rgba(255, 255, 255, 1);
+	padding: 1px;
+}
+
 
 
 /* ############## Body ############## */
@@ -3054,24 +3066,27 @@ tr .columnURL {
 /* ToDo */
 
 :not(.statusDisplay) > .pageNavigation {
-	margin: 7px 0;
+	margin: 7px -3px;
 	float: left;
+	width: 50%;
 }
 
 .pageNavigation ul li {
+	font-weight: bold;
 	text-align: center;
+	border-radius: 3px;
+	margin: 1px;
+	float: left;
 	min-width: 19px;
 }
 
-.pageNavigation ul li:not(.active):not(.disabled) {
-	cursor: pointer;
+.contentHeader .pageNavigation ul li,
+.contentFooter .pageNavigation ul li {
+	margin: 2px;
 }
 
-.pageNavigation ul li {
-	font-weight: bold;
-	border-radius: 3px;
-	display: inline-block;
-	position: relative;
+.pageNavigation ul li:not(.active):not(.disabled) {
+	cursor: pointer;
 }
 
 .pageNavigation ul li.disabled {
@@ -3087,7 +3102,6 @@ tr .columnURL {
 
 .pageNavigation ul li.skip {	
 	padding: 2px 0 1px;
-	top: -1px;
 }
 
 .pageNavigation ul li a {
@@ -3102,7 +3116,7 @@ tr .columnURL {
 }
 
 .pageNavigation ul li:not(.skip) a {
-	padding: 3px 5px;
+	padding: 3px 1px;
 }
 
 .pageNavigation ul li:active a,
@@ -3133,13 +3147,14 @@ tr .columnURL {
 }
 
 .pageNavigation ul li.children > a {
-	margin-right: -17px;
+	margin-right: -10px;
 	position: relative;
 	z-index: 10;
 }
 
 .pageNavigation ul li.children input {
-	width: 28px;
+	margin-left: 1px;
+	width: 30px;
 	height: 9px;
 }
 
@@ -3148,7 +3163,7 @@ tr .columnURL {
 	width: 7px;
 	height: 9px;
 	bottom: 1px;
-	left: 20px;
+	left: 25px;
 }
 
 /* ToDo: Dropdown */
@@ -3223,11 +3238,11 @@ tr .columnURL {
 }
 
 .statusDisplay .pageNavigation ul li {
-	min-width: 9px;
+	min-width: 13px;
 }
 
 .statusDisplay .pageNavigation ul li:not(.skip) a {
-	padding: 1px 3px;
+	padding: 1px;
 }
 
 
@@ -3621,6 +3636,8 @@ img[src*='enable'] {
 
 /* ############## Global Button Color & Effect Library ############## */
 
+/* -- -- -- Normal Buttons -- -- -- */
+
 /* Normal State */
 
 .button,
@@ -3642,6 +3659,12 @@ button {
 	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
 	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
 	
+	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+	-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+	-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+	box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+	
 	-webkit-transition-property: border, box-shadow, background-color, background-image, color;
 	-webkit-transition-duration: .1s;
 	-webkit-transition-timing-function: linear;
@@ -3720,48 +3743,50 @@ button:active {
 	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
 }
 
+/* -- -- -- Default Buttons -- -- -- */
+
 /* Default State Glow */
 
 @-webkit-keyframes glowButtons {
 	0% {
-		-webkit-box-shadow: 0 0 13px rgba(102, 153, 204, .5);
+		-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
 	}
 	100% {
-		-webkit-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+		-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
 	}
 }
 @-moz-keyframes glowButtons {
 	0% {
-		-moz-box-shadow: 0 0 13px rgba(102, 153, 204, .5);
+		-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
 	}
 	100% {
-		-moz-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+		-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
 	}
 }
 @-ms-keyframes glowButtons {
 	0% {
-		-ms-box-shadow: 0 0 13px rgba(102, 153, 204, .5);
+		-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
 	}
 	100% {
-		-ms-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+		-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
 	}
 }
 /* disabled to ease rendering work for Opera 
 @-o-keyframes glowButtons {
 	0% {
-		-o-box-shadow: 0 0 13px rgba(102, 153, 204, .5);
+		-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
 	}
 	100% {
-		-o-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+		-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
 	}
 }
 */
 @keyframes glowButtons {
 	0% {
-		box-shadow: 0 0 13px rgba(102, 153, 204, .5);
+		box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
 	}
 	100% {
-		box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+		box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
 	}
 }
 
@@ -3783,11 +3808,11 @@ button.default {
 	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
 	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
 	
-	-webkit-box-shadow: 0 0 10px #369;
-	-moz-box-shadow: 0 0 10px #369;
-	-ms-box-shadow: 0 0 10px #369;
-	-o-box-shadow: 0 0 10px #369;
-	box-shadow: 0 0 10px #369;
+	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
+	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
+	-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
+	-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
 	
 	-webkit-animation-name: glowButtons;
 	-webkit-animation-duration: 1s;
@@ -3824,44 +3849,44 @@ button.default {
 
 @-webkit-keyframes glowButtonsHover {
     0% {
-        -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
     }
     100% {
-        -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
     }
 }
 @-moz-keyframes glowButtonsHover {
     0% {
-        -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
     }
     100% {
-        -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
     }
 }
 @-ms-keyframes glowButtonsHover {
     0% {
-        -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+        -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
     }
     100% {
-        -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+        -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
     }
 }
 /* disabled to ease rendering work for Opera 
 @-o-keyframes glowButtonsHover {
     0% {
-        -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+        -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
     }
     100% {
-        -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+        -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
     }
 }
 */
 @keyframes glowButtonsHover {
     0% {
-        box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
     }
     100% {
-        box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
     }
 }
 
@@ -3871,11 +3896,11 @@ button.default {
 input[type='submit']:hover,
 input[type='button'].default:hover,
 button.default:hover {	
-	-webkit-box-shadow: 0 0 10px #fa2;
-	-moz-box-shadow: 0 0 10px #fa2;
-	-ms-box-shadow: 0 0 10px #fa2;
-	-o-box-shadow: 0 0 10px #fa2;
-	box-shadow: 0 0 10px #fa2;
+	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
+	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
+	-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
+	-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
 	
 	-webkit-animation-name: glowButtonsHover;
 	-webkit-animation-duration: 1s;
@@ -4001,6 +4026,8 @@ button.default:active {
 	animation-timing-function: ease-in-out;
 }
 
+/* -- -- -- Special Buttons -- -- -- */
+
 /* Disabled State */
 
 .disabled .button,
diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 7b5c469177..91d2425c56 100644
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -91,7 +91,7 @@
 					<div>
 						<ul>
 							<li id="userMenu" class="userMenu"><!-- ToDo: We need an ID and/or class for each list here, this ID may also change! -->
-								<span class="dropdownCaption">{lang}wcf.user.userNote{/lang}</span>
+								<span class="dropdownCaption userAvatar">{if $__wcf->getUserProfileHandler()->getAvatar()}{assign var=__dummy value=$__wcf->getUserProfileHandler()->getAvatar()->setMaxSize(16, 16)}{@$__wcf->getUserProfileHandler()->getAvatar()}{/if} {lang}wcf.user.userNote{/lang}</span>
 								<ul class="dropdown">
 									<li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" onclick="return confirm('{lang}wcf.user.logout.sure{/lang}')">{lang}wcf.user.logout{/lang}</a></li>
 								</ul>
diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 7e158adf1b..b7d76bd60f 100644
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -4581,11 +4581,11 @@ $.widget('ui.wcfPages', {
 			$pageList.append(this._renderLink(this.options.maxPage));
 			
 			// add next button
-			var $nextElement = $('<li></li>').addClass('button skip');
+			var $nextElement = $('<li></li>').addClass('skip');
 			$pageList.append($nextElement);
 			
 			if (this.options.activePage < this.options.maxPage) {
-				var $nextLink = $('<a' + ((this.options.nextPage != null) ? (' title="' + this.options.nextPage + '"') : ('')) + '></a>').addClass('ballonTooltip');
+				var $nextLink = $('<a' + ((this.options.nextPage != null) ? (' title="' + this.options.nextPage + '"') : ('')) + '></a>').addClass('button ballonTooltip');
 				$nextElement.append($nextLink);
 				this._bindSwitchPage($nextLink, this.options.activePage + 1);
 				
diff --git a/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php b/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
index 22698ab4e3..7b47d9dc43 100644
--- a/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
+++ b/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
@@ -104,7 +104,7 @@ class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin {
 				$html .= '<li class="button skip"><a href="'.$this->insertPageNumber($link, $tagArgs['page'] - 1).'" title="'.$previousTitle.'" class="balloonTooltip"><img src="'.self::getIconPath('previous1').'" alt="" /></a></li>'."\n";
 			}
 			else {
-				$html .= '<li class="button skip disabled"><img src="'.self::getIconPath('previous1D').'" alt="" /></li>'."\n";
+				$html .= '<li class="skip disabled"><img src="'.self::getIconPath('previous1D').'" alt="" /></li>'."\n";
 			}
 			
 			// first page
-- 
2.20.1