Some improvements to the Tab animation

diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css
index 3311cbb120d70e04cf448408404a3dbce0fb62c8..248d95f816c088392a27b6b3ad94706b645f377a 100644 (file)
--- a/wcfsetup/install/files/acp/style/testing.css
+++ b/wcfsetup/install/files/acp/style/testing.css
@@ -1,8 +1,8 @@
 /**\r
- * Footer Styles\r
+ * ACP Testing Styles  \r
  *\r
- * @author             Alexander Ebert, Harald Szekely\r
- * @copyright  2011 WoltLab GmbH\r
+ * @author             Harald Szekely, Alexander Ebert, Marcel Werk \r
+ * @copyright  2011 WoltLab GmbH \r
  */\r
 \r
 \r
@@ -132,11 +132,12 @@ header.pageHeader div#logo a {
 /* Main Menu  */\r
 \r
 menu.mainMenu {\r
-       margin: 0 30px -7px;\r
+       margin: 0 30px;\r
        background-color: rgba(0, 0, 0, .4);\r
        border-radius: 5px 5px 0 0;\r
-       display: inline-block;\r
+       display: table;\r
        position: relative;\r
+       bottom: -5px;\r
 }\r
 \r
 menu.mainMenu:after {\r
@@ -145,31 +146,31 @@ menu.mainMenu:after {
        clear: both;\r
 }\r
 \r
+menu.mainMenu ul {\r
+       display: table-row;\r
+}\r
+\r
 menu.mainMenu li {\r
-       font-size: 105%;\r
+       font-size: 123%;\r
        font-weight: normal;\r
        color: #69c;\r
        text-shadow: 0 -1px 0 #000;\r
-       border-radius: 5px 5px 0 0;\r
        cursor: pointer;\r
-       display: inline-block;\r
+       display: table-cell;\r
        margin: 5px -5px 0;\r
-       padding: 3px 20px 11px;\r
-       float: left;\r
+       padding: 13px 20px;\r
        position: relative;\r
+       top: -3px;\r
        z-index: 1;\r
        \r
-       -webkit-transition: all .1s linear;\r
-       -moz-transition: all .1s linear;\r
-       -ms-transition: all .1s linear;\r
-       -o-transition: all .1s linear;\r
-       transition: all .1s linear;\r
-}\r
-\r
-menu.mainMenu li:after {\r
-       content: "";\r
-       display: block;\r
-       clear: both;\r
+       border-top-left-radius: 5px;\r
+       border-top-right-radius: 5px;\r
+       \r
+       -webkit-transition: all .2s linear;\r
+       -moz-transition: all .2s linear;\r
+       -ms-transition: all .2s linear;\r
+       -o-transition: all .2s linear;\r
+       transition: all .2s linear;\r
 }\r
 \r
 menu.mainMenu li:hover {\r
@@ -177,10 +178,11 @@ menu.mainMenu li:hover {
 }\r
 \r
 menu.mainMenu li.activeMenuItem {\r
-       font-size: 110%;\r
        font-weight: bold;\r
        color: #369;\r
        text-shadow: 0 1px 0 #fff;\r
+       z-index: 10;\r
+       \r
        background-color: #e7f2fd;\r
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e7f2fd));\r
        background-image: -moz-linear-gradient(0% 0% 270deg, #fff, #e7f2fd);\r
@@ -188,12 +190,6 @@ menu.mainMenu li.activeMenuItem {
        background-image: -o-linear-gradient(#fff, #e7f2fd);\r
        background-image: linear-gradient(#fff, #e7f2fd);\r
        \r
-       border-radius: 5px 5px 0 0;\r
-       margin: 0;\r
-       padding: 10px 20px 13px;\r
-       position: relative;\r
-       top: -3px;\r
-       z-index: 10;\r
 }\r
 \r
 /* Header Navigation  */\r
@@ -202,7 +198,10 @@ nav.headerNavigation {
        display: block;\r
        background-color: #e7f2fd;\r
        border-bottom: 1px solid #bcd;\r
-       border-radius: 3px 3px 0 0;\r
+       \r
+       border-top-left-radius: 3px;\r
+       border-top-right-radius: 3px;\r
+       \r
        margin: 0 23px;\r
        padding: 3px 7px;\r
        position: relative;\r
@@ -339,7 +338,10 @@ footer:after {
 footer > div {\r
        background-color: #e7f2fd;\r
        border-top: 1px solid #bcd;\r
-       border-radius: 0 0 3px 3px;\r
+       \r
+       border-bottom-left-radius: 3px;\r
+       border-bottom-right-radius: 3px;\r
+       \r
        clear: both;\r
        padding: 3px 7px;\r
 }\r