Multiple changes …

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).

diff --git a/wcfsetup/install/files/acp/style/wcf.css b/wcfsetup/install/files/acp/style/wcf.css
index 3a3013dd366d4a2ca32d27c9943c70353deef195..1c89bbcd86cad9951cc7e0af1ca0fb889e04446b 100644 (file)
--- 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 7b5c4691773858ffc591f21d24aae65ecbf460e5..91d2425c560ba991dbec9b7bf76ade15d236359a 100644 (file)
--- 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 7e158adf1b2021ac57201a9296acb3499f7dd385..b7d76bd60f7c78a53fa7caf22049ea04b56f27f3 100644 (file)
--- 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 22698ab4e3f77c5d9203825e6706bf8f60e29742..7b47d9dc43122eb7f0c024f4d15f5c07becd1aa0 100644 (file)
--- 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