makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-28 06:08:52 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'PayBas/ticket/12648' into develop-ascraeus

Browse source 
* 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
This commit is contained in:
Cesar G 2014-06-23 20:45:20 -07:00
commit 8c44b2721c
20 changed files with 244 additions and 305 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
phpBB/adm/images/bg_tabs1.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.3 KiB

BIN
phpBB/adm/images/bg_tabs2.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 541 B

168
phpBB/adm/style/admin.css
View file

@ -320,176 +320,156 @@ li {
/* Tabbed menu /* Tabbed menu
Based on: http://www.alistapart.com/articles/slidingdoors2/
----------------------------------------*/ ----------------------------------------*/
#tabs { #tabs {
font-family: Arial, Helvetica, sans-serif;
line-height: normal; line-height: normal;
margin: 0 7px; margin: 0 7px;
min-width: 600px;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
#tabs ul { #tabs > ul {
list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none;
} }
#tabs ul:after { #tabs > ul:after {
content: ''; content: '';
display: block; display: block;
clear: both; clear: both;
} }
#tabs li { #tabs .tab {
display: block; display: inline-block;
float: left; float: left;
margin: 0;
padding: 0;
font-size: 0.85em; font-size: 0.85em;
font-weight: bold; font-weight: bold;
line-height: 14px;
} }
#tabs li:after { .rtl #tabs .tab {
content: '';
display: block;
clear: both;
}
#tabs a {
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;
}
.rtl #tabs li {
float: right; float: right;
} }
#tabs a span { #tabs .tab > a {
float: left; background: #D4D6DA;
display: block; background: -moz-linear-gradient(top, #CACBCF 0%, #D4D6DA 100%);
background: url("../images/bg_tabs2.gif") no-repeat 100% -34px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #CACBCF), color-stop(100%, #D4D6DA));
padding: 7px 10px 4px 4px; background: -webkit-linear-gradient(top, #CACBCF 0%, #D4D6DA 100%);
min-height: 14px; 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; color: #767676;
white-space: nowrap; display: block;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold; 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 { #tabs .tab > a:hover {
float: right; background: #F1F1EE;
} border-color: #C0BFBB;
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span, .rtl #tabs a span { float:none;}
/* End hack */
#tabs a:hover span {
color: #BC2A4D; color: #BC2A4D;
} }
#tabs a:hover { #tabs .activetab > a,
background-position: 0 -69px; #tabs .activetab > a:hover {
} background: #DCDEE2;
background: -moz-linear-gradient(top, #F2F2F2 0%, #DCDEE2 100%);
#tabs a:hover span { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F2F2F2), color-stop(100%, #DCDEE2));
background-position: 100% -69px; 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%);
#tabs .activetab a { background: linear-gradient(to bottom, #F2F2F2 0%, #DCDEE2 100%);
background-position: 0 0; border-color: #999;
border-bottom: 1px solid #DCDEE2; border-bottom: 2px solid #DCDEE2;
} box-shadow: 0 1px 1px #FFF inset;
#tabs .activetab a span {
background-position: 100% 0;
padding-bottom: 5px;
color: #23649F; color: #23649F;
margin: 0 1px 0 0;
padding: 7px 10px 4px;
} }
#tabs .activetab a:hover span { #tabs .activetab > a:hover {
color: #115098; color: #115098;
} }
/* Responsive tabs
----------------------------------------*/
.responsive-tab { .responsive-tab {
position: relative; position: relative;
} }
.responsive-tab .responsive-tab-link span { .responsive-tab > a.responsive-tab-link {
display: inline-block; display: block;
font-size: 16px; font-size: 16px;
position: relative; position: relative;
width: 16px; width: 16px;
line-height: 14px; line-height: 14px;
text-decoration: none; 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: ''; content: '';
position: absolute; position: absolute;
left: 5px; left: 10px;
top: 8px; top: 7px;
height: .125em; height: .125em;
width: 14px; width: 14px;
border-bottom: 0.125em solid #767676; border-bottom: 0.125em solid #767676;
border-top: 0.375em double #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; border-color: #BC2A4D;
} }
.responsive-tab.activetab .responsive-tab-link span:before { .responsive-tab.activetab .responsive-tab-link:before {
border-color: #23649F; border-color: #23649F;
} }
.responsive-tab.activetab .responsive-tab-link:hover span:before { .responsive-tab.activetab .responsive-tab-link:hover:before {
border-color: #115098; border-color: #115098;
} }
#tabs .dropdown { #tabs .dropdown, #minitabs .dropdown {
top: 18px; top: 20px;
margin-right: -1px; margin-right: -2px;
font-weight: normal;
} }
#tabs .dropdown-right .dropdown { #tabs .dropdown-right .dropdown {
margin-left: -2px; margin-left: -2px;
} }
#tabs .dropdown li { #tabs .dropdown-contents {
display: block !important; list-style: none;
float: none;
background: transparent none;
padding: 0;
}
#tabs .dropdown a, #tabs .dropdown a span {
background: transparent;
display: block;
border-width: 0;
float: none;
margin: 0; margin: 0;
padding: 0;
text-align: right;
} }
#tabs .dropdown a span { #tabs .dropdown li {
border-bottom: 1px dotted #DCDCDC;
}
#tabs .dropdown li:last-child {
border-bottom: none;
}
#tabs .dropdown a {
display: block;
padding: 4px 8px; padding: 4px 8px;
color: inherit !important; text-align: right;
}
@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
{
#tabs {
min-width: 0;
}
} }
/* Main Panel /* Main Panel

4
phpBB/adm/style/admin.js
View file

@ -169,7 +169,7 @@ function parse_document(container)
ul = $this.children(), ul = $this.children(),
tabs = ul.children().not('[data-skip-responsive]'), tabs = ul.children().not('[data-skip-responsive]'),
links = tabs.children('a'), 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'), menu = item.find('.dropdown-contents'),
maxHeight = 0, maxHeight = 0,
lastWidth = false, lastWidth = false,
@ -211,7 +211,7 @@ function parse_document(container)
for (i = total - 1; i >= 0; i --) { for (i = total - 1; i >= 0; i --) {
tab = availableTabs.eq(i); tab = availableTabs.eq(i);
menu.prepend(tab.clone(true)); menu.prepend(tab.clone(true).removeClass('tab'));
tab.hide(); tab.hide();
if ($this.height() <= maxHeight) { if ($this.height() <= maxHeight) {
menu.find('a').click(function() { check(true); }); menu.find('a').click(function() { check(true); });

2
phpBB/adm/style/install_header.html
View file

@ -29,7 +29,7 @@
<div id="tabs"> <div id="tabs">
<ul> <ul>
<!-- BEGIN t_block1 --> <!-- 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 --> <!-- END t_block1 -->
</ul> </ul>
</div> </div>

2
phpBB/adm/style/overall_header.html
View file

@ -106,7 +106,7 @@ function popup(url, width, height, name)
<div id="tabs"> <div id="tabs">
<ul> <ul>
<!-- BEGIN t_block1 --> <!-- 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 --> <!-- END t_block1 -->
</ul> </ul>
</div> </div>

4
phpBB/styles/prosilver/template/forum_fn.js
View file

@ -805,7 +805,7 @@ function parse_document(container)
ul = $this.children(), ul = $this.children(),
tabs = ul.children().not('[data-skip-responsive]'), tabs = ul.children().not('[data-skip-responsive]'),
links = tabs.children('a'), 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'), menu = item.find('.dropdown-contents'),
maxHeight = 0, maxHeight = 0,
lastWidth = false, lastWidth = false,
@ -847,7 +847,7 @@ function parse_document(container)
for (i = total - 1; i >= 0; i --) { for (i = total - 1; i >= 0; i --) {
tab = availableTabs.eq(i); tab = availableTabs.eq(i);
menu.prepend(tab.clone(true)); menu.prepend(tab.clone(true).removeClass('tab'));
tab.hide(); tab.hide();
if ($this.height() <= maxHeight) { if ($this.height() <= maxHeight) {
menu.find('a').click(function() { check(true); }); menu.find('a').click(function() { check(true); });

4
phpBB/styles/prosilver/template/mcp_header.html
View file

@ -11,7 +11,7 @@
<div id="tabs"> <div id="tabs">
<ul> <ul>
<!-- BEGIN l_block1 --> <!-- 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 --> <!-- END l_block1 -->
</ul> </ul>
</div> </div>
@ -22,7 +22,7 @@
<div style="width: 100%;"> <div style="width: 100%;">
<div id="cp-menu"> <div id="cp-menu">
<div id="navigation"> <div id="navigation" role="navigation">
<ul> <ul>
<!-- BEGIN l_block1 --> <!-- BEGIN l_block1 -->
<!-- IF l_block1.S_SELECTED --> <!-- IF l_block1.S_SELECTED -->

20
phpBB/styles/prosilver/template/mcp_topic.html
View file

@ -11,16 +11,16 @@
<!-- DEFINE $SHOW_PANEL = 'display-panel' --> <!-- DEFINE $SHOW_PANEL = 'display-panel' -->
<!-- ENDIF --> <!-- 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> <ul>
<li id="display-panel-tab"<!-- IF not S_MERGE_VIEW --> class="activetab"<!-- ENDIF -->> <li id="display-panel-tab" class="tab<!-- IF not S_MERGE_VIEW --> activetab<!-- ENDIF -->">
<a href="#minitabs" data-subpanel="display-panel"><span>{L_DISPLAY_OPTIONS}</span></a> <a href="#minitabs" data-subpanel="display-panel" role="tab" aria-controls="display-panel">{L_DISPLAY_OPTIONS}</a>
</li> </li>
<li id="split-panel-tab"> <li id="split-panel-tab" class="tab">
<a href="#minitabs" data-subpanel="split-panel"><span>{L_SPLIT_TOPIC}</span></a> <a href="#minitabs" data-subpanel="split-panel" role="tab" aria-controls="split-panel">{L_SPLIT_TOPIC}</a>
</li> </li>
<li id="merge-panel-tab"<!-- IF S_MERGE_VIEW --> class="activetab"<!-- ENDIF -->> <li id="merge-panel-tab" class="tab<!-- IF S_MERGE_VIEW --> activetab<!-- ENDIF -->">
<a href="#minitabs" data-subpanel="merge-panel"><span>{L_MERGE_POSTS}</span></a> <a href="#minitabs" data-subpanel="merge-panel" role="tab" aria-controls="merge-panel">{L_MERGE_POSTS}</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -31,7 +31,7 @@
<div class="panel"> <div class="panel">
<div class="inner"> <div class="inner">
<fieldset id="display-panel" class="fields2"> <fieldset id="display-panel" class="fields2" role="tabpanel">
<dl> <dl>
<dt><label for="posts_per_page">{L_POSTS_PER_PAGE}{L_COLON}</label><br /><span>{L_POSTS_PER_PAGE_EXPLAIN}</span></dt> <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> <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> </fieldset>
<!-- IF S_CAN_SPLIT --> <!-- IF S_CAN_SPLIT -->
<fieldset id="split-panel" class="fields2"> <fieldset id="split-panel" class="fields2" role="tabpanel">
<p>{L_SPLIT_TOPIC_EXPLAIN}</p> <p>{L_SPLIT_TOPIC_EXPLAIN}</p>
<!-- IF S_SHOW_TOPIC_ICONS --> <!-- IF S_SHOW_TOPIC_ICONS -->
@ -66,7 +66,7 @@
<!-- ENDIF --> <!-- ENDIF -->
<!-- IF S_CAN_MERGE --> <!-- IF S_CAN_MERGE -->
<fieldset id="merge-panel" class="fields2"> <fieldset id="merge-panel" class="fields2" role="tabpanel">
<p>{L_MERGE_TOPIC_EXPLAIN}</p> <p>{L_MERGE_TOPIC_EXPLAIN}</p>
<dl> <dl>
<dt><label for="to_topic_id">{L_MERGE_TOPIC_ID}{L_COLON}</label></dt> <dt><label for="to_topic_id">{L_MERGE_TOPIC_ID}{L_COLON}</label></dt>

16
phpBB/styles/prosilver/template/posting_editor.html
View file

@ -99,19 +99,21 @@
<!-- ENDIF --> <!-- ENDIF -->
<!-- IF not S_PRIVMSGS and not S_SHOW_DRAFTS and not $SIG_EDIT eq 1 --> <!-- 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> <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 --> <!-- IF S_SHOW_ATTACH_BOX -->
<li id="attach-panel-tab"> <li id="attach-panel-tab" class="tab">
<a href="#tabs" data-subpanel="attach-panel"> <a href="#tabs" data-subpanel="attach-panel" role="tab" aria-controls="attach-panel">
<span>
{L_ATTACHMENTS} <strong id="file-total-progress"><strong id="file-total-progress-bar"></strong></strong> {L_ATTACHMENTS} <strong id="file-total-progress"><strong id="file-total-progress-bar"></strong></strong>
</span>
</a> </a>
</li> </li>
<!-- ENDIF --> <!-- 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> </ul>
</div> </div>
<!-- ENDIF --> <!-- ENDIF -->

4
phpBB/styles/prosilver/template/ucp_header.html
View file

@ -5,7 +5,7 @@
<div id="tabs"> <div id="tabs">
<ul> <ul>
<!-- BEGIN t_block1 --> <!-- 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 --> <!-- END t_block1 -->
</ul> </ul>
</div> </div>
@ -20,7 +20,7 @@
<div style="width: 100%;"> <div style="width: 100%;">
<div id="cp-menu"> <div id="cp-menu">
<div id="navigation"> <div id="navigation" role="navigation">
<!-- IF S_PRIVMSGS --> <!-- IF S_PRIVMSGS -->
<!-- BEGIN t_block2 --> <!-- BEGIN t_block2 -->

45
phpBB/styles/prosilver/theme/bidi.css
View file

@ -684,34 +684,63 @@ ul.linklist li.small-icon > a, ul.linklist li.breadcrumbs span:first-child > a {
/* CP tabbed menu /* CP tabbed menu
----------------------------------------*/ ----------------------------------------*/
.rtl #tabs { .rtl #tabs {
margin: 20px 7px -1px 0; margin-left: 0;
margin-right: 7px;
} }
.rtl #tabs a { .rtl #tabs .tab {
float: right; float: right;
} }
/*.rtl #tabs a span { .rtl #tabs .tab > a {
float: right; margin-left: 1px;
}*/ margin-right: 0;
}
/* Mini tabbed menu used in MCP /* Mini tabbed menu used in MCP
----------------------------------------*/ ----------------------------------------*/
.rtl #minitabs { .rtl #minitabs {
float: left;
margin-right: 0; margin-right: 0;
margin-left: 7px; margin-left: 7px;
} }
.rtl .tabs-container #minitabs { .rtl #minitabs .tab {
float: left; float: left;
} }
.rtl #minitabs li { .rtl #minitabs .tab > a {
float: left;
margin-right: 2px; margin-right: 2px;
margin-left: 0; 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 /* UCP navigation menu
----------------------------------------*/ ----------------------------------------*/

80
phpBB/styles/prosilver/theme/colours.css
View file

@ -807,52 +807,54 @@ ul.cplist {
/* CP tabbed menu /* CP tabbed menu
----------------------------------------*/ ----------------------------------------*/
#tabs a { #tabs .tab > a {
background-image: url("./images/bg_tabs1.gif"); background: #BACCD9;
}
#tabs a span {
background-image: url("./images/bg_tabs2.gif");
color: #536482; color: #536482;
} }
#tabs a:hover span { #tabs .tab > a:hover {
background: #DDEDFB;
color: #BC2A4D; color: #BC2A4D;
} }
#tabs .activetab a { #tabs .activetab > a,
border-bottom-color: #CADCEB; #tabs .activetab > a:hover {
} background: #CADCEB;
background: -moz-linear-gradient(top, #E2F2FF 0%, #CADCEB 100%);
#tabs .activetab a span { 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; color: #333333;
} }
#tabs .activetab a:hover span { #tabs .activetab > a:hover {
color: #000000; color: #000000;
} }
/* Mini tabbed menu used in MCP /* Mini tabbed menu used in MCP
----------------------------------------*/ ----------------------------------------*/
#minitabs li { #minitabs .tab > a {
background-color: #E1EBF2; background-color: #E1EBF2;
} }
#minitabs li.activetab { #minitabs .activetab > a,
#minitabs .activetab > a:hover {
background-color: #F9F9F9; background-color: #F9F9F9;
}
#minitabs li.activetab a span, #minitabs li.activetab a:hover span {
color: #333333; color: #333333;
} }
/* Responsive tabs /* Responsive tabs
----------------------------------------*/ ----------------------------------------*/
.responsive-tab .responsive-tab-link span:before { .responsive-tab .responsive-tab-link:before {
border-color: #536482; border-color: #536482;
} }
.responsive-tab .responsive-tab-link:hover span:before { .responsive-tab .responsive-tab-link:hover:before {
border-color: #BC2A4D; border-color: #BC2A4D;
} }
@ -862,35 +864,47 @@ ul.cplist {
/* Link styles for the sub-section links */ /* Link styles for the sub-section links */
#navigation a { #navigation a {
color: #333; color: #333;
background-color: #B2C2CF; background: #B4C4D1;
background-image: url("./images/bg_menu.gif"); 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 { .rtl #navigation a {
background-image: url("./images/bg_menu_rtl.gif"); background: #B4C4D1;
background-position: 0 100%; 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 { #navigation a:hover {
background-image: none; background: #AABAC6;
background-color: #aabac6;
color: #BC2A4D; color: #BC2A4D;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
} }
#navigation #active-subsection a { #navigation #active-subsection a {
background: #F9F9F9;
color: #D31141; color: #D31141;
background-color: #F9F9F9; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-image: none;
} }
#navigation #active-subsection a:hover { #navigation #active-subsection a:hover {
color: #D31141; 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 { #navigation a, .rtl #navigation a {
background-image: none; background: #B2C2CF;
} }
} }
@ -1144,7 +1158,7 @@ input.disabled {
border-color: #FFF transparent; border-color: #FFF transparent;
} }
.dropdown-extended .pointer-inner, #minitabs .pointer-inner { .dropdown-extended .pointer-inner {
border-color: #F1F8FF transparent; border-color: #F1F8FF transparent;
} }
@ -1170,10 +1184,6 @@ ul.linklist li.responsive-menu a.responsive-menu-link:hover:before, ul.linklist
border-color: #DCDCDC; border-color: #DCDCDC;
} }
#minitabs .dropdown-contents {
background-color: #F1F8FF;
}
/* Notifications /* Notifications
---------------------------------------- */ ---------------------------------------- */

212
phpBB/styles/prosilver/theme/cp.css
View file

@ -97,117 +97,82 @@ ul.cplist {
} }
.tabs-container:after { .tabs-container:after {
display: block;
clear: both; clear: both;
content: ''; content: '';
display: block;
}
/* CP tabs shared
----------------------------------------*/
#tabs, #minitabs {
line-height: normal;
}
#tabs > ul, #minitabs > ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
#tabs > ul:after, #minitabs > ul:after {
clear: both;
content: '';
display: block;
}
#tabs .tab, #minitabs .tab {
display: inline-block;
float: left;
font-size: 1em;
font-weight: bold;
line-height: 14px;
}
#tabs .tab > a, #minitabs .tab > a {
display: block;
padding: 5px 9px;
position: relative;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
} }
/* CP tabbed menu /* CP tabbed menu
----------------------------------------*/ ----------------------------------------*/
#tabs { #tabs {
line-height: normal; margin: 20px 0 0 7px;
margin: 20px 0 -1px 7px;
*overflow: hidden;
} }
#tabs ul { #tabs .tab > a {
margin:0; border: 1px solid transparent;
padding: 0; border-radius: 4px 4px 0 0;
list-style: none; margin: 1px 1px 0 0;
} }
#tabs ul:after { #tabs .activetab > a {
content: ''; margin-top: 0;
display: block;
clear: both;
}
#tabs li {
display: inline;
margin: 0;
padding: 0;
font-size: 1em;
font-weight: bold;
}
#tabs a {
float: left;
background: none no-repeat 0% -35px;
margin: 0 1px 0 0;
padding: 0 0 0 5px;
text-decoration: none;
position: relative;
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;
padding-bottom: 7px; 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 /* Mini tabbed menu used in MCP
----------------------------------------*/ ----------------------------------------*/
#minitabs { #minitabs {
line-height: normal;
margin: -20px 7px 0 0;
}
.tabs-container #minitabs {
float: right; float: right;
margin-top: 19px; margin: 15px 7px 0 0;
max-width: 50%; max-width: 50%;
} }
#minitabs ul { #minitabs .tab {
margin:0; float: right;
padding: 0;
list-style: none;
} }
#minitabs li { #minitabs .tab > a {
display: block; border-radius: 5px 5px 0 0;
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; margin-left: 2px;
} }
#minitabs a { #minitabs .tab > a:hover {
}
#minitabs a:hover {
text-decoration: none; text-decoration: none;
} }
@ -217,8 +182,8 @@ ul.cplist {
position: relative; position: relative;
} }
.responsive-tab .responsive-tab-link span { .responsive-tab > a.responsive-tab-link {
display: inline-block; display: block;
font-size: 16px; font-size: 16px;
position: relative; position: relative;
width: 16px; width: 16px;
@ -226,80 +191,41 @@ ul.cplist {
text-decoration: none; text-decoration: none;
} }
#minitabs .responsive-tab .responsive-tab-link span { .responsive-tab .responsive-tab-link:before {
display: block;
}
.responsive-tab .responsive-tab-link span:before {
content: ''; content: '';
position: absolute; position: absolute;
left: 5px; left: 10px;
top: 8px; top: 7px;
height: .125em; height: .125em;
width: 14px; width: 14px;
border-bottom: 0.125em solid transparent; border-bottom: 0.125em solid transparent;
border-top: 0.375em double 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 { #tabs .dropdown, #minitabs .dropdown {
top: 29px; top: 20px;
margin-right: -1px; margin-right: -2px;
font-size: 1.1em;
font-weight: normal;
} }
#minitabs .dropdown { #minitabs .dropdown {
top: 18px; margin-right: -4px;
} }
#tabs .dropdown-up .dropdown, #minitabs .dropdown-up .dropdown { #tabs .dropdown-up .dropdown, #minitabs .dropdown-up .dropdown {
bottom: -5px; bottom: 20px;
top: auto; top: auto;
} }
#minitabs .dropdown-up .dropdown { #tabs .dropdown li {
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;
text-align: right; text-align: right;
} }
.tabs-container #minitabs .dropdown a span { #minitabs .dropdown li {
text-align: left; text-align: left;
} }
#tabs .dropdown a span, #minitabs .dropdown a span {
padding: 5px 8px;
color: inherit !important;
}
/* UCP navigation menu /* UCP navigation menu
----------------------------------------*/ ----------------------------------------*/
/* Container for sub-navigation list */ /* Container for sub-navigation list */
@ -314,10 +240,10 @@ ul.cplist {
/* Default list state */ /* Default list state */
#navigation li { #navigation li {
display: inline;
font-weight: bold;
margin: 1px 0; margin: 1px 0;
padding: 0; padding: 0;
font-weight: bold;
display: inline;
} }
/* Link styles for the sub-section links */ /* Link styles for the sub-section links */
@ -326,18 +252,10 @@ ul.cplist {
padding: 5px; padding: 5px;
margin: 1px 0; margin: 1px 0;
text-decoration: none; text-decoration: none;
font-weight: bold;
background: transparent none repeat-y 100% 0;
} }
#navigation a:hover { #navigation a:hover {
text-decoration: none; text-decoration: none;
background-image: none;
}
#navigation #active-subsection a {
display: block;
background-image: none;
} }
/* Preferences pane layout /* Preferences pane layout

BIN
phpBB/styles/prosilver/theme/images/bg_menu.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 354 B

BIN
phpBB/styles/prosilver/theme/images/bg_menu_rtl.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 345 B

BIN
phpBB/styles/prosilver/theme/images/bg_tabs1.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
phpBB/styles/prosilver/theme/images/bg_tabs2.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 420 B

BIN
phpBB/styles/prosilver/theme/images/corners_left2.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 112 B

BIN
phpBB/styles/prosilver/theme/images/corners_right2.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 111 B