Tasbs are now rounded on the bottom side too!

diff --git a/wcfsetup/install/files/acp/style/wcf.css b/wcfsetup/install/files/acp/style/wcf.css
index e3f070164efefa2cac71589fcfb896a2c96b5fd5..4961520a953a8a51c12b2c63903e97ef8020616f 100644 (file)
--- a/wcfsetup/install/files/acp/style/wcf.css
+++ b/wcfsetup/install/files/acp/style/wcf.css
@@ -664,6 +664,32 @@ nav.topMenu {
        z-index: 10;
 }
 
+/* Rounded Bottom Corners */
+
+.mainMenu > ul > li.activeMenuItem > a:before {
+       position: absolute;
+    bottom: 0;
+    width: 7px;
+    height: 7px;
+    content: " ";
+    left: -7px;
+    border-bottom-right-radius: 6px;
+    border-width: 0 1px 1px 0;
+    box-shadow: 2px 2px 0 #e7f2fd;
+}
+
+.mainMenu > ul > li.activeMenuItem > a:after {
+       position: absolute;
+    bottom: 0;
+    width: 7px;
+    height: 7px;
+    content: " ";
+    right: -7px;
+    border-bottom-left-radius: 6px;
+    border-width: 0 0 1px 1px;
+    box-shadow: -2px 2px 0 #e7f2fd;
+}
+
 /* ToDo: Special */
 
 .mainMenu > ul > li.activeMenuItem .badge {
@@ -733,6 +759,8 @@ nav.topMenu {
        cursor: pointer;
        margin: 0 3px;
        float: right;
+       position: relative;
+       z-index: 190;
 }
 
 .headerNavigation ul li a,
@@ -2389,11 +2417,8 @@ input[type='button'],
 /* Globals */
 
 .tabMenu {
-       text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
        /* Toggle for tab menu orientation (options: left|center|right) */
        text-align: center;
-       white-space: nowrap;
-       background-color: none;
        margin-top: 15px;
        padding: 0 5px;
        display: block;
@@ -2402,6 +2427,20 @@ input[type='button'],
 
 /* Tabs */
 
+.tabMenu ul {
+       text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+       white-space: nowrap;
+       border-width: 1px 1px 0 1px;
+       border-style: solid;
+       border-color: #ddd;
+       border-top-left-radius: 3px;
+       border-top-right-radius: 3px;
+       background-color: rgba(0, 0, 0, .05);
+       padding: 0 5px 3px 5px;
+       display: inline-block;
+       position: relative;
+}
+
 .tabMenu li {
        white-space: nowrap;
        list-style: none;
@@ -2417,43 +2456,17 @@ input[type='button'],
        text-decoration: none;
        color: rgba(153, 153, 153, 1);
        cursor: pointer;
-       border-width: 1px 1px 0 1px;
-       border-style: solid;
-       border-color: #ddd;
-       border-top-left-radius: 3px;
-       border-top-right-radius: 3px;
-       background-color: rgba(0, 0, 0, .05);
        display: inline-block;
        position: relative;
-       bottom: -1px;
+       bottom: -3px;
        z-index: 10;
-       
-       -webkit-transition-property: border, background-color, background-image, color;
-       -webkit-transition-duration: .3s;
-       -webkit-transition-timing-function: ease;
-       
-       -moz-transition-property: border, background-color, background-image, color;
-       -moz-transition-duration: .3s;
-       -moz-transition-timing-function: ease;
-       
-       -ms-transition-property: border, background-color, background-image, color;
-       -ms-transition-duration: .3s;
-       -ms-transition-timing-function: ease;
-       
-       -o-transition-property: border, background-color, background-image, color;
-       -o-transition-duration: .3s;
-       -o-transition-timing-function: ease;
-       
-       transition-property: border, background-color, background-image, color;
-       transition-duration: .3s;
-       transition-timing-function: ease;
 }
 
 @media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        .tabMenu li a {
                font-size: 110%;
-               padding: 10px 15px 7px;
+               padding: 1px 10px 3px;
        }
        
 }
@@ -2470,23 +2483,6 @@ input[type='button'],
 
 .tabMenu li:not(.ui-state-active) a:hover {
        color: rgba(102, 102, 102, 1);
-       border-width: 1px;
-       border-style: solid;
-       border-color: rgb(255, 170, 34) rgb(255, 170, 34) rgb(204, 204, 204);
-       background-color: rgba(255, 249, 244, 1);
-}
-
-.tabMenu li:not(.ui-state-active) a:active,
-.tabMenu li:not(.ui-state-active) a:focus {
-       border-width: 1px;
-       border-style: solid;
-       border-color: #fa2 #fa2 #ccc;
-       
-       -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-       -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-       -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-       -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-       box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
 }
 
 .tabMenu li.ui-state-active a {
@@ -2494,13 +2490,43 @@ input[type='button'],
        color: #333 !important;
        border-width: 1px;
        border-style: solid;
-       border-color: #ccc;
-       border-bottom-color: rgba(255, 255, 255, 1);
+       border-top-right-radius: 6px;
+       border-top-left-radius: 6px;
+       border-color: #ccc #ccc #fff;
        background-color: rgba(255, 255, 255, 1);
-       bottom: 0;
+       padding: 10px 15px 5px;
+       margin-top: -10px;
        z-index: 30;
 }
 
+/* Rounded Bottom Corners */
+
+.tabMenu li.ui-state-active a:before {
+       position: absolute;
+    bottom: -1px;
+    width: 5px;
+    height: 5px;
+    content: " ";
+    border: 1px solid #ccc;
+    left: -6px;
+    border-bottom-right-radius: 6px;
+    border-width: 0 1px 1px 0;
+    box-shadow: 2px 2px 0 #fff;
+}
+
+.tabMenu li.ui-state-active a:after {
+       position: absolute;
+    bottom: -1px;
+    width: 5px;
+    height: 5px;
+    content: " ";
+    border: 1px solid #ccc;
+    right: -6px;
+    border-bottom-left-radius: 6px;
+    border-width: 0 0 1px 1px;
+    box-shadow: -2px 2px 0 #fff;
+}
+
 @media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        .tabMenu li.ui-state-active a {