aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorPayBas <contact@paybas.com>2014-06-03 11:14:53 +0200
committerPayBas <contact@paybas.com>2014-06-24 00:02:24 +0200
commitb83b72b271b7d0cfe5b6dc6a06acc299e36b2969 (patch)
tree17acca6e139bff2746754cca4db55283005d84cc
parent6f9674228c77efab817585cde702bf2258167e47 (diff)
downloadforums-b83b72b271b7d0cfe5b6dc6a06acc299e36b2969.tar
forums-b83b72b271b7d0cfe5b6dc6a06acc299e36b2969.tar.gz
forums-b83b72b271b7d0cfe5b6dc6a06acc299e36b2969.tar.bz2
forums-b83b72b271b7d0cfe5b6dc6a06acc299e36b2969.tar.xz
forums-b83b72b271b7d0cfe5b6dc6a06acc299e36b2969.zip
[ticket/12648] Fix and modernize ACP header tabs
PHPBB3-12648
Diffstat
-rw-r--r--phpBB/adm/images/bg_tabs1.gifbin2325 -> 0 bytes
-rw-r--r--phpBB/adm/images/bg_tabs2.gifbin541 -> 0 bytes
-rw-r--r--phpBB/adm/style/admin.css165
-rw-r--r--phpBB/adm/style/admin.js4
-rw-r--r--phpBB/adm/style/install_header.html2
-rw-r--r--phpBB/adm/style/overall_header.html2
6 files changed, 76 insertions, 97 deletions
diff --git a/phpBB/adm/images/bg_tabs1.gif b/phpBB/adm/images/bg_tabs1.gif
deleted file mode 100644
index d129365661..0000000000
--- a/phpBB/adm/images/bg_tabs1.gif
+++ /dev/null
Binary files differ
diff --git a/phpBB/adm/images/bg_tabs2.gif b/phpBB/adm/images/bg_tabs2.gif
deleted file mode 100644
index 0aace9b6db..0000000000
--- a/phpBB/adm/images/bg_tabs2.gif
+++ /dev/null
Binary files differ
diff --git a/phpBB/adm/style/admin.css b/phpBB/adm/style/admin.css
index 0f22bc100d..7204e4e53c 100644
--- a/phpBB/adm/style/admin.css
+++ b/phpBB/adm/style/admin.css
@@ -320,176 +320,155 @@ li {
/* Tabbed menu
- Based on: http://www.alistapart.com/articles/slidingdoors2/
----------------------------------------*/
#tabs {
+ font-family: Arial, Helvetica, sans-serif;
line-height: normal;
margin: 0 7px;
- min-width: 600px;
position: relative;
z-index: 2;
}
-#tabs ul {
- margin:0;
- padding: 0;
+#tabs > ul {
list-style: none;
-}
-
-#tabs ul:after {
- content: '';
- display: block;
- clear: both;
-}
-
-#tabs li {
- display: block;
- float: left;
margin: 0;
padding: 0;
- font-size: 0.85em;
- font-weight: bold;
}
-#tabs li:after {
+#tabs > ul:after {
content: '';
display: block;
clear: both;
}
-#tabs a {
+#tabs .tab {
+ display: inline-block;
float: left;
- background:url("../images/bg_tabs1.gif") no-repeat 0% -34px;
- margin: 0 1px 0 0;
- padding: 0 0 0 7px;
- text-decoration: none;
- position: relative;
+ font-size: 0.85em;
+ font-weight: bold;
+ line-height: 14px;
}
-.rtl #tabs li {
+.rtl #tabs .tab {
float: right;
}
-#tabs a span {
- float: left;
- display: block;
- background: url("../images/bg_tabs2.gif") no-repeat 100% -34px;
- padding: 7px 10px 4px 4px;
- min-height: 14px;
+#tabs .tab > a {
+ background: #D4D6DA;
+ background: -moz-linear-gradient(top, #CACBCF 0%, #D4D6DA 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #CACBCF), color-stop(100%, #D4D6DA));
+ background: -webkit-linear-gradient(top, #CACBCF 0%, #D4D6DA 100%);
+ background: -o-linear-gradient(top, #CACBCF 0%, #D4D6DA 100%);
+ background: -ms-linear-gradient(top, #CACBCF 0%, #D4D6DA 100%);
+ background: linear-gradient(to bottom, #CACBCF 0%, #D4D6DA 100%);
+ border: 1px solid #BBB;
+ border-bottom-width: 0;
+ border-radius: 5px 5px 0 0;
color: #767676;
- white-space: nowrap;
- font-family: Arial, Helvetica, sans-serif;
- text-transform: uppercase;
+ display: block;
font-weight: bold;
+ margin: 1px 1px 2px 0;
+ padding: 6px 9px 4px;
+ position: relative;
+ text-decoration: none;
+ text-transform: uppercase;
+ white-space: nowrap;
+ cursor: pointer;
}
-.rtl #tabs a span {
- float: right;
-}
-
-/* Commented Backslash Hack hides rule from IE5-Mac \*/
-#tabs a span, .rtl #tabs a span { float:none;}
-/* End hack */
-
-#tabs a:hover span {
+#tabs .tab > a:hover {
+ background: #F1F1EE;
+ border-color: #C0BFBB;
color: #BC2A4D;
}
-#tabs a:hover {
- background-position: 0 -69px;
-}
-
-#tabs a:hover span {
- background-position: 100% -69px;
-}
-
-#tabs .activetab a {
- background-position: 0 0;
- border-bottom: 1px solid #DCDEE2;
-}
-
-#tabs .activetab a span {
- background-position: 100% 0;
- padding-bottom: 5px;
+#tabs .activetab > a,
+#tabs .activetab > a:hover {
+ background: #DCDEE2;
+ background: -moz-linear-gradient(top, #F2F2F2 0%, #DCDEE2 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F2F2F2), color-stop(100%, #DCDEE2));
+ background: -webkit-linear-gradient(top, #F2F2F2 0%, #DCDEE2 100%);
+ background: -o-linear-gradient(top, #F2F2F2 0%, #DCDEE2 100%);
+ background: -ms-linear-gradient(top, #F2F2F2 0%, #DCDEE2 100%);
+ background: linear-gradient(to bottom, #F2F2F2 0%, #DCDEE2 100%);
+ border-color: #999;
+ box-shadow: 0 1px 1px #FFF inset;
color: #23649F;
+ margin: 0 1px 0 0;
+ padding: 7px 10px 6px;
}
-#tabs .activetab a:hover span {
+#tabs .activetab > a:hover {
color: #115098;
}
+/* Responsive tabs
+----------------------------------------*/
.responsive-tab {
position: relative;
}
-.responsive-tab .responsive-tab-link span {
- display: inline-block;
+.responsive-tab > a.responsive-tab-link {
+ display: block;
font-size: 16px;
position: relative;
width: 16px;
line-height: 14px;
text-decoration: none;
+ padding-left: 9px !important;
+ padding-right: 9px !important;
}
-.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 #767676;
border-top: 0.375em double #767676;
}
-.responsive-tab .responsive-tab-link:hover span:before {
+.responsive-tab .responsive-tab-link:hover:before {
border-color: #BC2A4D;
}
-.responsive-tab.activetab .responsive-tab-link span:before {
+.responsive-tab.activetab .responsive-tab-link:before {
border-color: #23649F;
}
-.responsive-tab.activetab .responsive-tab-link:hover span:before {
+.responsive-tab.activetab .responsive-tab-link:hover:before {
border-color: #115098;
}
-#tabs .dropdown {
- top: 18px;
- margin-right: -1px;
+#tabs .dropdown, #minitabs .dropdown {
+ top: 20px;
+ margin-right: -2px;
+ font-weight: normal;
}
#tabs .dropdown-right .dropdown {
margin-left: -2px;
}
-#tabs .dropdown li {
- display: block !important;
- float: none;
- background: transparent none;
- padding: 0;
+#tabs .dropdown-contents {
+ list-style: none;
+ margin: 0;
}
-#tabs .dropdown a, #tabs .dropdown a span {
- background: transparent;
- display: block;
- border-width: 0;
- float: none;
- margin: 0;
- padding: 0;
- text-align: right;
+#tabs .dropdown li {
+ border-bottom: 1px dotted #DCDCDC;
}
-#tabs .dropdown a span {
- padding: 4px 8px;
- color: inherit !important;
+#tabs .dropdown li:last-child {
+ border-bottom: none;
}
-@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
-{
- #tabs {
- min-width: 0;
- }
+#tabs .dropdown a {
+ display: block;
+ padding: 4px 8px;
+ text-align: right;
}
/* Main Panel
diff --git a/phpBB/adm/style/admin.js b/phpBB/adm/style/admin.js
index a839e7e0e2..253fd46a62 100644
--- a/phpBB/adm/style/admin.js
+++ b/phpBB/adm/style/admin.js
@@ -169,7 +169,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,
@@ -211,7 +211,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/adm/style/install_header.html b/phpBB/adm/style/install_header.html
index a8f7009e4b..c818a4fc6d 100644
--- a/phpBB/adm/style/install_header.html
+++ b/phpBB/adm/style/install_header.html
@@ -29,7 +29,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/adm/style/overall_header.html b/phpBB/adm/style/overall_header.html
index 25a82a5faa..afd2b94924 100644
--- a/phpBB/adm/style/overall_header.html
+++ b/phpBB/adm/style/overall_header.html
@@ -106,7 +106,7 @@ function popup(url, width, height, name)
<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>
generated by cgit v1.2.1 (git 2.21.0) at 2024-09-20 10:59:09 +0000