From 6e7827d3e826df96d9f1e65afcf0ccdbfb4eddbc Mon Sep 17 00:00:00 2001
From: Luzifr <szekely@woltlab.com>
Date: Fri, 20 Jan 2012 15:55:44 +0100
Subject: [PATCH] Tasbs are now rounded on the bottom side too!

---
 wcfsetup/install/files/acp/style/wcf.css | 128 ++++++++++++++---------
 1 file changed, 77 insertions(+), 51 deletions(-)

diff --git a/wcfsetup/install/files/acp/style/wcf.css b/wcfsetup/install/files/acp/style/wcf.css
index e3f070164e..4961520a95 100644
--- 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 {
-- 
2.20.1