From 3c135fe9b112c6e2c9d7f17a8b11f8e3c572082c Mon Sep 17 00:00:00 2001
From: Luzifr <szekely@woltlab.com>
Date: Fri, 5 Aug 2011 12:17:14 +0200
Subject: [PATCH] improvements to tabs and headings

---
 wcfsetup/install/files/acp/style/testing.css  | 46 ++++++++-----------
 .../install/files/acp/templates/option.tpl    |  6 +--
 2 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css
index 727b0f05f3..37d6b7876c 100644
--- a/wcfsetup/install/files/acp/style/testing.css
+++ b/wcfsetup/install/files/acp/style/testing.css
@@ -391,7 +391,7 @@ footer nav.footerNavigation ul li {
 /* Main Heading */
 
 .mainHeading {
-	margin-bottom: 15px;
+	margin: 15px 0;
 	position: relative;
 }
 
@@ -413,7 +413,7 @@ footer nav.footerNavigation ul li {
 	border-bottom: 1px solid #ccc;
 	color: #999;
 	text-shadow: 0 1px 0 #fff;
-	font-size: 140%;
+	font-size: 175%;
 	font-weight: bold;
 	padding-bottom: 10px;
 }
@@ -431,10 +431,10 @@ footer nav.footerNavigation ul li {
 
 /* Sub Heading */
 
-.subHeading {
+.subHeading h1 {
 	color: #999;
 	border-bottom: 1px solid #ccc;
-	font-size: 120%;
+	font-size: 150%;
 	text-shadow: 0 1px 0 #fff;
 	margin: 10px 0;
 	padding: 10px 0;
@@ -546,7 +546,7 @@ textarea {
 	border-style: solid;
 	border-color: #999 #ccc #eee;
 	border-radius: 3px;
-	background-color: #fafafa;
+	background-color: #fff;
 	
 	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
 	-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
@@ -1251,13 +1251,13 @@ div.ui-widget-overlay {
 /* Tab Menu */
 
 .tabMenu {
-	color: #999;
 	text-shadow: 0 1px 0 #fff;
 	background-color: none;
 	white-space: nowrap;
 	position: relative;
 	display: block;
 	text-align: center;
+	padding: 0 5px;
 }
 
 .tabMenu:after {
@@ -1274,20 +1274,22 @@ div.ui-widget-overlay {
 }
 
 .tabMenu li a {
-	padding: 7px 15px;
+	color: #999;
+	font-size: 110%;
+	padding: 10px 15px 7px;
 	text-decoration: none;
 	border: 1px solid #ccc;
 	border-top-left-radius: 3px;
 	border-top-right-radius: 3px;
 	display: inline-block;
-	
-	
+	/*
 	background-color: #fefefe;
 	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#eee));
 	background-image: -moz-linear-gradient(0% 0% 270deg, #fefefe, #eee);
 	background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#eee));
 	background-image: -o-linear-gradient(#fefefe, #eee);
 	background-image: linear-gradient(#fefefe, #eee);
+	*/
 }
 
 .tabMenu li a:hover {
@@ -1302,17 +1304,18 @@ div.ui-widget-overlay {
 .tabMenu li.ui-state-active a {
 	color: #333 !important;
 	font-weight: bold;
+	background-color: rgba(230, 230, 230, .15);
 }
 
 .tabMenu li.ui-tabs-selected a {
 	background-color: #fefefe;	
-	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#fefefe));
-	background-image: -moz-linear-gradient(0% 0% 270deg, #fff, #fefefe);
-	background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#fefefe));
-	background-image: -o-linear-gradient(#fff, #fefefe);
-	background-image: linear-gradient(#fff, #fefefe);
+	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 1)), to(rgba(230, 230, 230, .15)));
+	background-image: -moz-linear-gradient(0% 0% 270deg, rgba(255, 255, 255, 1), rgba(230, 230, 230, .15));
+	background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 1)), to(rgba(230, 230, 230, .15)));
+	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(230, 230, 230, .15));
+	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(230, 230, 230, .15));
 	
-	border-bottom: 1px solid #fefefe;
+	border-bottom: 1px solid rgba(230, 230, 230, .15);
 }
 
 .tabMenu li.ui-tabs-selected a,
@@ -1329,7 +1332,7 @@ div.ui-widget-overlay {
 /* Tab Menu Content */
 
 .tabMenuContent {
-	background-color: #fefefe);
+	background-color: rgba(230, 230, 230, .15);
 	border: 1px solid #ccc !important;
 	z-index: 89; /* Prevents border overlay during transition */
 	display: block;
@@ -1357,17 +1360,6 @@ div.ui-widget-overlay {
 	clip: rect(1px,1px,1px,1px);
 }
 
-.ui-helper-reset {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	outline: 0;
-	line-height: 1.3;
-	text-decoration: none;
-	font-size: 100%;
-	list-style: none;
-}
-
 .ui-helper-clearfix:after {
 	content: "";
 	display: block;
diff --git a/wcfsetup/install/files/acp/templates/option.tpl b/wcfsetup/install/files/acp/templates/option.tpl
index 658ca314ed..3eb21a3f83 100644
--- a/wcfsetup/install/files/acp/templates/option.tpl
+++ b/wcfsetup/install/files/acp/templates/option.tpl
@@ -38,9 +38,9 @@
 		{foreach from=$optionTree item=categoryLevel1}
 			<div class="border tabMenuContent hidden" id="{@$categoryLevel1[object]->categoryName}">
 				<div class="container-1">
-					<hgroup>
-						<h1 class="subHeading">{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}</h1>
-						<h2 class="description">{lang}wcf.acp.option.category.{$categoryLevel1[object]->categoryName}.description{/lang}</h2>
+					<hgroup class="subHeading">
+						<h1>{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}</h1>
+						<h2>{lang}wcf.acp.option.category.{$categoryLevel1[object]->categoryName}.description{/lang}</h2>
 					</hgroup>
 					
 					{if $categoryLevel1[options]|count}
-- 
2.20.1