From eda3c36b1c38ec19515f0a6da2ae6413334edc0d Mon Sep 17 00:00:00 2001
From: PayBas <contact@paybas.com>
Date: Mon, 2 Jun 2014 19:23:56 +0200
Subject: [PATCH] [ticket/12648] Improve UCP/MCP/Posting tabs

PHPBB3-12648
---
 phpBB/styles/prosilver/template/forum_fn.js   |   4 +-
 .../styles/prosilver/template/mcp_header.html |   2 +-
 .../styles/prosilver/template/mcp_topic.html  |  12 +-
 .../prosilver/template/posting_editor.html    |   8 +-
 .../styles/prosilver/template/ucp_header.html |   2 +-
 phpBB/styles/prosilver/theme/colours.css      |  47 +++---
 phpBB/styles/prosilver/theme/cp.css           | 147 ++++++------------
 7 files changed, 82 insertions(+), 140 deletions(-)

diff --git a/phpBB/styles/prosilver/template/forum_fn.js b/phpBB/styles/prosilver/template/forum_fn.js
index 7e4875d7bc..ea2b815e77 100644
--- a/phpBB/styles/prosilver/template/forum_fn.js
+++ b/phpBB/styles/prosilver/template/forum_fn.js
@@ -805,7 +805,7 @@ function parse_document(container)
 			ul = $this.children(),
 			tabs = ul.children().not('[data-skip-responsive]'),
 			links = tabs.children('a'),
-			item = ul.append('<li class="responsive-tab" style="display:none;"><a href="javascript:void(0);" class="responsive-tab-link"><span>&nbsp;</span></a><div class="dropdown tab-dropdown" style="display: none;"><div class="pointer"><div class="pointer-inner" /></div><ul class="dropdown-contents" /></div></li>').find('li.responsive-tab'),
+			item = ul.append('<li class="tab responsive-tab" style="display:none;"><a href="javascript:void(0);" class="responsive-tab-link">&nbsp;</a><div class="dropdown tab-dropdown" style="display: none;"><div class="pointer"><div class="pointer-inner" /></div><ul class="dropdown-contents" /></div></li>').find('li.responsive-tab'),
 			menu = item.find('.dropdown-contents'),
 			maxHeight = 0,
 			lastWidth = false,
@@ -847,7 +847,7 @@ function parse_document(container)
 
 			for (i = total - 1; i >= 0; i --) {
 				tab = availableTabs.eq(i);
-				menu.prepend(tab.clone(true));
+				menu.prepend(tab.clone(true).removeClass('tab'));
 				tab.hide();
 				if ($this.height() <= maxHeight) {
 					menu.find('a').click(function() { check(true); });
diff --git a/phpBB/styles/prosilver/template/mcp_header.html b/phpBB/styles/prosilver/template/mcp_header.html
index bdfa254741..df03de725a 100644
--- a/phpBB/styles/prosilver/template/mcp_header.html
+++ b/phpBB/styles/prosilver/template/mcp_header.html
@@ -11,7 +11,7 @@
 <div id="tabs">
 	<ul>
 		<!-- BEGIN l_block1 -->
-		<li<!-- IF l_block1.S_SELECTED --> class="activetab"<!-- ENDIF -->><a href="{l_block1.U_TITLE}"><span>{l_block1.L_TITLE}</span></a></li>
+		<li class="tab<!-- IF l_block1.S_SELECTED --> activetab<!-- ENDIF -->"><a href="{l_block1.U_TITLE}">{l_block1.L_TITLE}</a></li>
 		<!-- END l_block1 -->
 	</ul>
 </div>
diff --git a/phpBB/styles/prosilver/template/mcp_topic.html b/phpBB/styles/prosilver/template/mcp_topic.html
index a83b42dba0..cf93c90b06 100644
--- a/phpBB/styles/prosilver/template/mcp_topic.html
+++ b/phpBB/styles/prosilver/template/mcp_topic.html
@@ -13,14 +13,14 @@
 
 <div id="minitabs" class="sub-panels" data-show-panel="{$SHOW_PANEL}">
 	<ul>
-		<li id="display-panel-tab"<!-- IF not S_MERGE_VIEW --> class="activetab"<!-- ENDIF -->>
-			<a href="#minitabs" data-subpanel="display-panel"><span>{L_DISPLAY_OPTIONS}</span></a>
+		<li id="display-panel-tab" class="tab<!-- IF not S_MERGE_VIEW --> activetab<!-- ENDIF -->">
+			<a href="#minitabs" data-subpanel="display-panel">{L_DISPLAY_OPTIONS}</a>
 		</li>
-		<li id="split-panel-tab">
-			<a href="#minitabs" data-subpanel="split-panel"><span>{L_SPLIT_TOPIC}</span></a>
+		<li id="split-panel-tab" class="tab">
+			<a href="#minitabs" data-subpanel="split-panel">{L_SPLIT_TOPIC}</a>
 		</li>
-		<li id="merge-panel-tab"<!-- IF S_MERGE_VIEW --> class="activetab"<!-- ENDIF -->>
-			<a href="#minitabs" data-subpanel="merge-panel"><span>{L_MERGE_POSTS}</span></a>
+		<li id="merge-panel-tab" class="tab<!-- IF S_MERGE_VIEW --> activetab<!-- ENDIF -->">
+			<a href="#minitabs" data-subpanel="merge-panel">{L_MERGE_POSTS}</a>
 		</li>
 	</ul>
 </div>
diff --git a/phpBB/styles/prosilver/template/posting_editor.html b/phpBB/styles/prosilver/template/posting_editor.html
index 081c267a94..5d533c6bb1 100644
--- a/phpBB/styles/prosilver/template/posting_editor.html
+++ b/phpBB/styles/prosilver/template/posting_editor.html
@@ -101,13 +101,11 @@
 	<!-- IF not S_PRIVMSGS and not S_SHOW_DRAFTS and not $SIG_EDIT eq 1 -->
 		<div id="tabs" class="sub-panels" data-show-panel="<!-- IF SHOW_PANEL -->{SHOW_PANEL}<!-- ELSE -->options-panel<!-- ENDIF -->">
 			<ul>
-				<li id="options-panel-tab" class="activetab"><a href="#tabs" data-subpanel="options-panel"><span>{L_OPTIONS}</span></a></li>
+				<li id="options-panel-tab" class="tab activetab"><a href="#tabs" data-subpanel="options-panel"><span>{L_OPTIONS}</span></a></li>
 				<!-- IF S_SHOW_ATTACH_BOX -->
-					<li id="attach-panel-tab">
+					<li id="attach-panel-tab" class="tab">
 						<a href="#tabs" data-subpanel="attach-panel">
-							<span>
-								{L_ATTACHMENTS} <strong id="file-total-progress"><strong id="file-total-progress-bar"></strong></strong>
-							</span>
+							{L_ATTACHMENTS} <strong id="file-total-progress"><strong id="file-total-progress-bar"></strong></strong>
 						</a>
 					</li>				
 				<!-- ENDIF -->
diff --git a/phpBB/styles/prosilver/template/ucp_header.html b/phpBB/styles/prosilver/template/ucp_header.html
index 102ea5a3a0..6fb82774de 100644
--- a/phpBB/styles/prosilver/template/ucp_header.html
+++ b/phpBB/styles/prosilver/template/ucp_header.html
@@ -5,7 +5,7 @@
 <div id="tabs">
 	<ul>
 		<!-- BEGIN t_block1 -->
-		<li <!-- IF t_block1.S_SELECTED -->class="activetab"<!-- ENDIF -->><a href="{t_block1.U_TITLE}"><span>{t_block1.L_TITLE}</span></a></li>
+		<li class="tab<!-- IF t_block1.S_SELECTED --> activetab<!-- ENDIF -->"><a href="{t_block1.U_TITLE}">{t_block1.L_TITLE}</a></li>
 		<!-- END t_block1 -->
 	</ul>
 </div>
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css
index 9565eb9967..c11db65711 100644
--- a/phpBB/styles/prosilver/theme/colours.css
+++ b/phpBB/styles/prosilver/theme/colours.css
@@ -807,52 +807,53 @@ ul.cplist {
 
 /* CP tabbed menu
 ----------------------------------------*/
-#tabs a {
-	background-image: url("./images/bg_tabs1.gif");
-}
-
-#tabs a span {
-	background-image: url("./images/bg_tabs2.gif");
+#tabs .tab > a {
+	background: #BACCD9;
 	color: #536482;
 }
 
-#tabs a:hover span {
+#tabs .tab > a:hover {
+	background: #DDEDFB;
 	color: #BC2A4D;
 }
 
-#tabs .activetab a {
-	border-bottom-color: #CADCEB;
-}
-
-#tabs .activetab a span {
+#tabs .activetab > a,
+#tabs .activetab > a:hover {
+	background: #E2F2FF;
+	background: -moz-linear-gradient(top, #E2F2FF 0%, #CADCEB 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #E2F2FF), color-stop(100%, #CADCEB));
+	background: -webkit-linear-gradient(top, #E2F2FF 0%, #CADCEB 100%);
+	background: -o-linear-gradient(top, #E2F2FF 0%, #CADCEB 100%);
+	background: -ms-linear-gradient(top, #E2F2FF 0%, #CADCEB 100%);
+	background: linear-gradient(to bottom, #E2F2FF 0%, #CADCEB 100%);
+	border-color: #CADCEB;
+	box-shadow: 0 1px 1px #F2F9FF inset;
 	color: #333333;
 }
 
-#tabs .activetab a:hover span {
+#tabs .activetab > a:hover {
 	color: #000000;
 }
 
 /* Mini tabbed menu used in MCP
 ----------------------------------------*/
-#minitabs li {
+#minitabs .tab > a {
 	background-color: #E1EBF2;
 }
 
-#minitabs li.activetab {
+#minitabs .activetab > a,
+#minitabs .activetab > a:hover {
 	background-color: #F9F9F9;
-}
-
-#minitabs li.activetab a span, #minitabs li.activetab a:hover span {
 	color: #333333;
 }
 
 /* Responsive tabs
 ----------------------------------------*/
-.responsive-tab .responsive-tab-link span:before {
+.responsive-tab .responsive-tab-link:before {
 	border-color: #536482;
 }
 
-.responsive-tab .responsive-tab-link:hover span:before {
+.responsive-tab .responsive-tab-link:hover:before {
 	border-color: #BC2A4D;
 }
 
@@ -1144,7 +1145,7 @@ input.disabled {
 	border-color: #FFF transparent;
 }
 
-.dropdown-extended .pointer-inner, #minitabs .pointer-inner {
+.dropdown-extended .pointer-inner {
 	border-color: #F1F8FF transparent;
 }
 
@@ -1170,10 +1171,6 @@ ul.linklist li.responsive-menu a.responsive-menu-link:hover:before, ul.linklist
 	border-color: #DCDCDC;
 }
 
-#minitabs .dropdown-contents {
-	background-color: #F1F8FF;
-}
-
 /* Notifications
 ---------------------------------------- */
 
diff --git a/phpBB/styles/prosilver/theme/cp.css b/phpBB/styles/prosilver/theme/cp.css
index 452c2c625e..b482c3db80 100644
--- a/phpBB/styles/prosilver/theme/cp.css
+++ b/phpBB/styles/prosilver/theme/cp.css
@@ -106,74 +106,49 @@ ul.cplist {
 ----------------------------------------*/
 #tabs {
 	line-height: normal;
-	margin: 20px 0 -1px 7px;
-	*overflow: hidden;
+	margin: 20px 0 0 7px;
+	/**overflow: hidden;*/
 }
 
-#tabs ul {
+#tabs > ul {
+	list-style: none;
 	margin:0;
 	padding: 0;
-	list-style: none;
+	position: relative;
 }
 
-#tabs ul:after {
+#tabs > ul:after {
 	content: '';
 	display: block;
 	clear: both;
 }
 
-#tabs li {
+#tabs .tab {
 	display: inline;
-	margin: 0;
-	padding: 0;
+	float: left;
 	font-size: 1em;
 	font-weight: bold;
+	line-height: 14px;
 }
 
-#tabs a {
-	float: left;
+#tabs .tab > a {
 	background: none no-repeat 0% -35px;
-	margin: 0 1px 0 0;
-	padding: 0 0 0 5px;
-	text-decoration: none;
+	border: 1px solid transparent;
+	border-radius: 4px 4px 0 0;
+	display: block;
+	margin: 1px 1px 0 0;
+	padding: 5px 9px;
 	position: relative;
+	text-decoration: none;
+	white-space: nowrap;
 	cursor: pointer;
 }
 
-#tabs a span {
-	float: left;
-	display: block;
-	background: none no-repeat 100% -35px;
-	padding: 6px 10px 6px 5px;
-	white-space: nowrap;
-}
-
-#tabs .activetab a {
-	background-position: 0 0;
-	border-bottom: 1px solid transparent;
-}
-
-#tabs .activetab a span {
-	background-position: 100% 0;
+#tabs .activetab > a {
+	margin-top: 0;
 	padding-bottom: 7px;
 }
 
-#tabs a:hover {
-	background-position: 0 -70px;
-}
-
-#tabs a:hover span {
-	background-position:100% -70px;
-}
-
-#tabs .activetab a:hover {
-	background-position: 0 0;
-}
-
-#tabs .activetab a:hover span {
-	background-position: 100% 0;
-}
-
 /* Mini tabbed menu used in MCP
 ----------------------------------------*/
 #minitabs {
@@ -183,31 +158,34 @@ ul.cplist {
 
 .tabs-container #minitabs {
 	float: right;
-	margin-top: 19px;
+	margin-top: 15px;
 	max-width: 50%;
 }
 
-#minitabs ul {
+#minitabs > ul {
+	list-style: none;
 	margin:0;
 	padding: 0;
-	list-style: none;
+	position: relative;
 }
 
-#minitabs li {
-	display: block;
+#minitabs .tab {
+	display: inline;
 	float: right;
-	border-top-left-radius: 5px;
-	border-top-right-radius: 5px;
-	padding: 5px 10px 4px 10px;
 	font-size: 1em;
 	font-weight: bold;
+	line-height: 14px;
+}
+
+#minitabs .tab > a {
+	border-radius: 5px 5px 0 0;
+	display: block;
 	margin-left: 2px;
+	padding: 5px 9px;
+	position: relative;
 }
 
-#minitabs a {
-}
-
-#minitabs a:hover {
+#minitabs .tab > a:hover {
 	text-decoration: none;
 }
 
@@ -217,7 +195,7 @@ ul.cplist {
 	position: relative;
 }
 
-.responsive-tab .responsive-tab-link span {
+.responsive-tab > a.responsive-tab-link {
 	display: inline-block;
 	font-size: 16px;
 	position: relative;
@@ -226,45 +204,34 @@ ul.cplist {
 	text-decoration: none;
 }
 
-#minitabs .responsive-tab .responsive-tab-link span {
-	display: block;
-}
-
-.responsive-tab .responsive-tab-link span:before {
+.responsive-tab .responsive-tab-link:before {
 	content: '';
 	position: absolute;
-	left: 5px;
-	top: 8px;
+	left: 10px;
+	top: 7px;
 	height: .125em;
 	width: 14px;
 	border-bottom: 0.125em solid transparent;
 	border-top: 0.375em double transparent;
 }
 
-#minitabs .responsive-tab .responsive-tab-link span:before {
-	left: 0;
-	top: 2px;
-}
-
-#tabs ul, #minitabs ul {
-	position: relative;
-}
-
 #tabs .dropdown, #minitabs .dropdown {
-	top: 29px;
-	margin-right: -1px;
+	top: 20px;
+	margin-right: -2px;
+	font-size: 1.1em;
+	font-weight: normal;
 }
 
 #minitabs .dropdown {
-	top: 18px;
+	margin-right: -4px;
 }
 
 #tabs .dropdown-up .dropdown, #minitabs .dropdown-up .dropdown {
-	bottom: -5px;
+	bottom: 20px;
 	top: auto;
 }
 
-#minitabs .dropdown-up .dropdown {
+#minitabs .dropdown-up .dropdown { 
 	bottom: 18px;
 }
 
@@ -272,34 +239,14 @@ ul.cplist {
 	margin-left: -41px;
 }
 
-#tabs .dropdown li, #minitabs .dropdown li {
-	display: block !important;
-	background: transparent none;
-	padding: 0;
-}
-
-.tabs-container #minitabs .dropdown a span {
-	display: block;
-}
-
-#tabs .dropdown a, #tabs .dropdown a span, #minitabs .dropdown a, #minitabs .dropdown a span {
-	background: transparent;
-	float: none;
-	margin: 0;
-	padding: 0;
+#tabs .dropdown li {
 	text-align: right;
 }
 
-.tabs-container #minitabs .dropdown a span {
+#minitabs .dropdown li {
 	text-align: left;
 }
 
-#tabs .dropdown a span, #minitabs .dropdown a span {
-	padding: 5px 8px;
-	color: inherit !important;
-}
-
-
 /* UCP navigation menu
 ----------------------------------------*/
 /* Container for sub-navigation list */