diff options
| author | Cesar G <prototech91@gmail.com> | 2014-06-23 20:45:20 -0700 |
|---|---|---|
| committer | Cesar G <prototech91@gmail.com> | 2014-06-23 20:45:20 -0700 |
| commit | 8c44b2721ceba7c98f6a0851ebaec6ed882df87a (patch) | |
| tree | a47e7f2e94a9088529d98ce90357baac4414058b /phpBB | |
| parent | 05bcce31690fad727f418af7501aa2ae07c06c93 (diff) | |
| parent | 7517cc0e05558bf71e87950f75625c9cc0bf4a65 (diff) | |
| download | forums-8c44b2721ceba7c98f6a0851ebaec6ed882df87a.tar forums-8c44b2721ceba7c98f6a0851ebaec6ed882df87a.tar.gz forums-8c44b2721ceba7c98f6a0851ebaec6ed882df87a.tar.bz2 forums-8c44b2721ceba7c98f6a0851ebaec6ed882df87a.tar.xz forums-8c44b2721ceba7c98f6a0851ebaec6ed882df87a.zip | |
Merge remote-tracking branch 'PayBas/ticket/12648' into develop-ascraeus
* PayBas/ticket/12648:
[ticket/12648] RTL fix & ACP border fix
[ticket/12648] Slightly clear ACP active tab border
[ticket/12648] Fix poll tab and revert unrelated color change
[ticket/12648] Fix poll tab display error
[ticket/12648] Added ARIA functionality
[ticket/12648] Fix and modernize ACP header tabs
[ticket/12648] More style fixes and also cleaned up CP left navigation
[ticket/12648] IE8 & IE9 color fix
[ticket/12648] Improve UCP/MCP/Posting tabs
Diffstat (limited to 'phpBB')
20 files changed, 235 insertions, 296 deletions
diff --git a/phpBB/adm/images/bg_tabs1.gif b/phpBB/adm/images/bg_tabs1.gif Binary files differdeleted file mode 100644 index d129365661..0000000000 --- a/phpBB/adm/images/bg_tabs1.gif +++ /dev/null diff --git a/phpBB/adm/images/bg_tabs2.gif b/phpBB/adm/images/bg_tabs2.gif Binary files differdeleted file mode 100644 index 0aace9b6db..0000000000 --- a/phpBB/adm/images/bg_tabs2.gif +++ /dev/null diff --git a/phpBB/adm/style/admin.css b/phpBB/adm/style/admin.css index 0f22bc100d..b8f55e66c5 100644 --- a/phpBB/adm/style/admin.css +++ b/phpBB/adm/style/admin.css @@ -320,176 +320,156 @@ 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; + border-bottom: 2px solid #DCDEE2; + box-shadow: 0 1px 1px #FFF inset; color: #23649F; + margin: 0 1px 0 0; + padding: 7px 10px 4px; } -#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> </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"> </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> 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> </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"> </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..69239887e3 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> @@ -22,7 +22,7 @@ <div style="width: 100%;"> <div id="cp-menu"> - <div id="navigation"> + <div id="navigation" role="navigation"> <ul> <!-- BEGIN l_block1 --> <!-- IF l_block1.S_SELECTED --> diff --git a/phpBB/styles/prosilver/template/mcp_topic.html b/phpBB/styles/prosilver/template/mcp_topic.html index a83b42dba0..6bf6af1b78 100644 --- a/phpBB/styles/prosilver/template/mcp_topic.html +++ b/phpBB/styles/prosilver/template/mcp_topic.html @@ -11,16 +11,16 @@ <!-- DEFINE $SHOW_PANEL = 'display-panel' --> <!-- ENDIF --> -<div id="minitabs" class="sub-panels" data-show-panel="{$SHOW_PANEL}"> +<div id="minitabs" class="sub-panels" data-show-panel="{$SHOW_PANEL}" role="tablist"> <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" role="tab" aria-controls="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" role="tab" aria-controls="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" role="tab" aria-controls="merge-panel">{L_MERGE_POSTS}</a> </li> </ul> </div> @@ -31,7 +31,7 @@ <div class="panel"> <div class="inner"> - <fieldset id="display-panel" class="fields2"> + <fieldset id="display-panel" class="fields2" role="tabpanel"> <dl> <dt><label for="posts_per_page">{L_POSTS_PER_PAGE}{L_COLON}</label><br /><span>{L_POSTS_PER_PAGE_EXPLAIN}</span></dt> <dd><input class="inputbox autowidth" type="number" min="1" name="posts_per_page" id="posts_per_page" size="6" value="{POSTS_PER_PAGE}" /></dd> @@ -43,7 +43,7 @@ </fieldset> <!-- IF S_CAN_SPLIT --> - <fieldset id="split-panel" class="fields2"> + <fieldset id="split-panel" class="fields2" role="tabpanel"> <p>{L_SPLIT_TOPIC_EXPLAIN}</p> <!-- IF S_SHOW_TOPIC_ICONS --> @@ -66,7 +66,7 @@ <!-- ENDIF --> <!-- IF S_CAN_MERGE --> - <fieldset id="merge-panel" class="fields2"> + <fieldset id="merge-panel" class="fields2" role="tabpanel"> <p>{L_MERGE_TOPIC_EXPLAIN}</p> <dl> <dt><label for="to_topic_id">{L_MERGE_TOPIC_ID}{L_COLON}</label></dt> diff --git a/phpBB/styles/prosilver/template/posting_editor.html b/phpBB/styles/prosilver/template/posting_editor.html index 081c267a94..25e3be3bcb 100644 --- a/phpBB/styles/prosilver/template/posting_editor.html +++ b/phpBB/styles/prosilver/template/posting_editor.html @@ -99,19 +99,21 @@ <!-- ENDIF --> <!-- 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 -->"> + <div id="tabs" class="sub-panels" data-show-panel="<!-- IF SHOW_PANEL -->{SHOW_PANEL}<!-- ELSE -->options-panel<!-- ENDIF -->" role="tablist"> <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" role="tab" aria-controls="options-panel"><span>{L_OPTIONS}</span></a></li> <!-- IF S_SHOW_ATTACH_BOX --> - <li id="attach-panel-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> + <li id="attach-panel-tab" class="tab"> + <a href="#tabs" data-subpanel="attach-panel" role="tab" aria-controls="attach-panel"> + {L_ATTACHMENTS} <strong id="file-total-progress"><strong id="file-total-progress-bar"></strong></strong> </a> </li> <!-- ENDIF --> - <!-- IF S_SHOW_POLL_BOX || S_POLL_DELETE --><li id="poll-panel-tab"><a href="#tabs" data-subpanel="poll-panel"><span>{L_ADD_POLL}</span></a></li><!-- ENDIF --> + <!-- IF S_SHOW_POLL_BOX || S_POLL_DELETE --> + <li id="poll-panel-tab" class="tab"> + <a href="#tabs" data-subpanel="poll-panel" role="tab" aria-controls="poll-panel">{L_ADD_POLL}</a> + </li> + <!-- ENDIF --> </ul> </div> <!-- ENDIF --> diff --git a/phpBB/styles/prosilver/template/ucp_header.html b/phpBB/styles/prosilver/template/ucp_header.html index 102ea5a3a0..a17f145cbc 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> @@ -20,7 +20,7 @@ <div style="width: 100%;"> <div id="cp-menu"> - <div id="navigation"> + <div id="navigation" role="navigation"> <!-- IF S_PRIVMSGS --> <!-- BEGIN t_block2 --> diff --git a/phpBB/styles/prosilver/theme/bidi.css b/phpBB/styles/prosilver/theme/bidi.css index d8d568c7a5..2e9253928e 100644 --- a/phpBB/styles/prosilver/theme/bidi.css +++ b/phpBB/styles/prosilver/theme/bidi.css @@ -684,34 +684,63 @@ ul.linklist li.small-icon > a, ul.linklist li.breadcrumbs span:first-child > a { /* CP tabbed menu ----------------------------------------*/ .rtl #tabs { - margin: 20px 7px -1px 0; + margin-left: 0; + margin-right: 7px; } -.rtl #tabs a { +.rtl #tabs .tab { float: right; } -/*.rtl #tabs a span { - float: right; -}*/ +.rtl #tabs .tab > a { + margin-left: 1px; + margin-right: 0; +} /* Mini tabbed menu used in MCP ----------------------------------------*/ .rtl #minitabs { + float: left; margin-right: 0; margin-left: 7px; } -.rtl .tabs-container #minitabs { +.rtl #minitabs .tab { float: left; } -.rtl #minitabs li { - float: left; +.rtl #minitabs .tab > a { margin-right: 2px; margin-left: 0; } +/* Responsive tabs +----------------------------------------*/ +.rtl #tabs .dropdown { + margin-left: -2px; +} + +.rtl #tabs .dropdown li { + text-align: left; +} + +.rtl #minitabs .dropdown { + margin-left: -4px; +} + +.rtl #minitabs .dropdown li { + text-align: right; +} + +/* Responsive *CP navigation +----------------------------------------*/ +@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) +{ + .rtl #cp-menu, .rtl #navigation, .rtl #cp-main { + float: none; + } +} + /* UCP navigation menu ----------------------------------------*/ diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index 9565eb9967..4b7532ab8a 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -807,52 +807,54 @@ 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: #CADCEB; + 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%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E2F2FF', endColorstr='#CADCEB', GradientType=0 ); + 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; } @@ -862,35 +864,47 @@ ul.cplist { /* Link styles for the sub-section links */ #navigation a { color: #333; - background-color: #B2C2CF; - background-image: url("./images/bg_menu.gif"); + background: #B4C4D1; + background: -moz-linear-gradient(left, #B4C4D1 50%, #CADCEB 100%); + background: -webkit-gradient(left top, right top, color-stop(50%, #B4C4D1), color-stop(100%, #CADCEB)); + background: -webkit-linear-gradient(left, #B4C4D1 50%, #CADCEB 100%); + background: -o-linear-gradient(left, #B4C4D1 50%, #CADCEB 100%); + background: -ms-linear-gradient(left, #B4C4D1 50%, #CADCEB 100%); + background: linear-gradient(to right, #B4C4D1 50%, #CADCEB 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B4C4D1', endColorstr='#CADCEB', GradientType=1 ); } .rtl #navigation a { - background-image: url("./images/bg_menu_rtl.gif"); - background-position: 0 100%; + background: #B4C4D1; + background: -moz-linear-gradient(left, #CADCEB 0%, #B4C4D1 50%); + background: -webkit-gradient(left top, right top, color-stop(0%, #CADCEB), color-stop(50%, #B4C4D1)); + background: -webkit-linear-gradient(left, #CADCEB 0%, #B4C4D1 50%); + background: -o-linear-gradient(left, #CADCEB 0%, #B4C4D1 50%); + background: -ms-linear-gradient(left, #CADCEB 0%, #B4C4D1 50%); + background: linear-gradient(to right, #CADCEB 0%, #B4C4D1 50%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CADCEB', endColorstr='#B4C4D1', GradientType=1 ); } #navigation a:hover { - background-image: none; - background-color: #aabac6; + background: #AABAC6; color: #BC2A4D; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } #navigation #active-subsection a { + background: #F9F9F9; color: #D31141; - background-color: #F9F9F9; - background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } #navigation #active-subsection a:hover { color: #D31141; } -@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) { #navigation a, .rtl #navigation a { - background-image: none; + background: #B2C2CF; } } @@ -1144,7 +1158,7 @@ input.disabled { border-color: #FFF transparent; } -.dropdown-extended .pointer-inner, #minitabs .pointer-inner { +.dropdown-extended .pointer-inner { border-color: #F1F8FF transparent; } @@ -1170,10 +1184,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..e144c74f20 100644 --- a/phpBB/styles/prosilver/theme/cp.css +++ b/phpBB/styles/prosilver/theme/cp.css @@ -97,117 +97,82 @@ ul.cplist { } .tabs-container:after { - display: block; clear: both; content: ''; + display: block; } -/* CP tabbed menu +/* CP tabs shared ----------------------------------------*/ -#tabs { +#tabs, #minitabs { line-height: normal; - margin: 20px 0 -1px 7px; - *overflow: hidden; } -#tabs ul { - margin:0; - padding: 0; +#tabs > ul, #minitabs > ul { list-style: none; + margin: 0; + padding: 0; + position: relative; } -#tabs ul:after { +#tabs > ul:after, #minitabs > ul:after { + clear: both; content: ''; display: block; - clear: both; } -#tabs li { - display: inline; - margin: 0; - padding: 0; +#tabs .tab, #minitabs .tab { + display: inline-block; + float: left; font-size: 1em; font-weight: bold; + line-height: 14px; } -#tabs a { - float: left; - background: none no-repeat 0% -35px; - margin: 0 1px 0 0; - padding: 0 0 0 5px; - text-decoration: none; +#tabs .tab > a, #minitabs .tab > a { + display: block; + 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; +/* CP tabbed menu +----------------------------------------*/ +#tabs { + margin: 20px 0 0 7px; } -#tabs .activetab a { - background-position: 0 0; - border-bottom: 1px solid transparent; +#tabs .tab > a { + border: 1px solid transparent; + border-radius: 4px 4px 0 0; + margin: 1px 1px 0 0; } -#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 { - line-height: normal; - margin: -20px 7px 0 0; -} - -.tabs-container #minitabs { float: right; - margin-top: 19px; + margin: 15px 7px 0 0; max-width: 50%; } -#minitabs ul { - margin:0; - padding: 0; - list-style: none; -} - -#minitabs li { - display: block; +#minitabs .tab { float: right; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - padding: 5px 10px 4px 10px; - font-size: 1em; - font-weight: bold; - margin-left: 2px; } -#minitabs a { +#minitabs .tab > a { + border-radius: 5px 5px 0 0; + margin-left: 2px; } -#minitabs a:hover { +#minitabs .tab > a:hover { text-decoration: none; } @@ -217,8 +182,8 @@ ul.cplist { 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; @@ -226,80 +191,41 @@ 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 { - bottom: 18px; -} - -#tabs .dropdown-right .dropdown, #minitabs .dropdown-right .dropdown { - 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 */ @@ -309,15 +235,15 @@ ul.cplist { } #navigation ul { - list-style:none; + list-style: none; } /* Default list state */ #navigation li { + display: inline; + font-weight: bold; margin: 1px 0; padding: 0; - font-weight: bold; - display: inline; } /* Link styles for the sub-section links */ @@ -326,18 +252,10 @@ ul.cplist { padding: 5px; margin: 1px 0; text-decoration: none; - font-weight: bold; - background: transparent none repeat-y 100% 0; } #navigation a:hover { text-decoration: none; - background-image: none; -} - -#navigation #active-subsection a { - display: block; - background-image: none; } /* Preferences pane layout diff --git a/phpBB/styles/prosilver/theme/images/bg_menu.gif b/phpBB/styles/prosilver/theme/images/bg_menu.gif Binary files differdeleted file mode 100644 index 4a9f5a9174..0000000000 --- a/phpBB/styles/prosilver/theme/images/bg_menu.gif +++ /dev/null diff --git a/phpBB/styles/prosilver/theme/images/bg_menu_rtl.gif b/phpBB/styles/prosilver/theme/images/bg_menu_rtl.gif Binary files differdeleted file mode 100644 index 10add09a17..0000000000 --- a/phpBB/styles/prosilver/theme/images/bg_menu_rtl.gif +++ /dev/null diff --git a/phpBB/styles/prosilver/theme/images/bg_tabs1.gif b/phpBB/styles/prosilver/theme/images/bg_tabs1.gif Binary files differdeleted file mode 100644 index 335a72c711..0000000000 --- a/phpBB/styles/prosilver/theme/images/bg_tabs1.gif +++ /dev/null diff --git a/phpBB/styles/prosilver/theme/images/bg_tabs2.gif b/phpBB/styles/prosilver/theme/images/bg_tabs2.gif Binary files differdeleted file mode 100644 index a2142d5432..0000000000 --- a/phpBB/styles/prosilver/theme/images/bg_tabs2.gif +++ /dev/null diff --git a/phpBB/styles/prosilver/theme/images/corners_left2.gif b/phpBB/styles/prosilver/theme/images/corners_left2.gif Binary files differdeleted file mode 100644 index fa27ce3ba2..0000000000 --- a/phpBB/styles/prosilver/theme/images/corners_left2.gif +++ /dev/null diff --git a/phpBB/styles/prosilver/theme/images/corners_right2.gif b/phpBB/styles/prosilver/theme/images/corners_right2.gif Binary files differdeleted file mode 100644 index 2d689446ee..0000000000 --- a/phpBB/styles/prosilver/theme/images/corners_right2.gif +++ /dev/null |
