From b83b72b271b7d0cfe5b6dc6a06acc299e36b2969 Mon Sep 17 00:00:00 2001 From: PayBas Date: Tue, 3 Jun 2014 11:14:53 +0200 Subject: [PATCH] [ticket/12648] Fix and modernize ACP header tabs PHPBB3-12648 --- phpBB/adm/images/bg_tabs1.gif | Bin 2325 -> 0 bytes phpBB/adm/images/bg_tabs2.gif | Bin 541 -> 0 bytes phpBB/adm/style/admin.css | 173 ++++++++++++---------------- phpBB/adm/style/admin.js | 4 +- phpBB/adm/style/install_header.html | 2 +- phpBB/adm/style/overall_header.html | 2 +- 6 files changed, 80 insertions(+), 101 deletions(-) delete mode 100644 phpBB/adm/images/bg_tabs1.gif delete mode 100644 phpBB/adm/images/bg_tabs2.gif diff --git a/phpBB/adm/images/bg_tabs1.gif b/phpBB/adm/images/bg_tabs1.gif deleted file mode 100644 index d12936566185e68dddade2e070b689c2577e6a93..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2325 zcmV+w3F`JoNk%w1VO{}g0M!5hoSd7~(agiay~f4C_V)I^zP-i9$=lb_&Ck=_-{Z>6 z(7?aDySuy0&eGJ@+RM$+&d}7)(bUY&(dFmq;^gPv;N#%p<>u$<=jiI+;pOAx=i=k$ z;o|1Y&CuWBu(*<>=|@>+taL?CtK#%g^%i^4i|w+uh>Z-r~&4#@yW8;Nacv z?(6gO^TWcx$i~9&@bJIC!0hblu&=JXy0@jIqtDUR(bLz`)Y#C{*3;G5+}`4unVJ9p z|MBteEC2ui0A2xU000L6z{3GX1N4r_q;kn@I-k&}bV{vSuh^`1%k6rzhZ=1~@R`r( zw0g~MyWjA*d`_?1@A$la&+p?^JuW^3CWVHFh>41ejE#B$ zJ|m)|q@|{(sHv)}tgWuEu(7hUw6(UkxVg3f1TiGPz`?@9#Kp$P$jQpf%+1cv(9zP< z)YaD0Jw77a+}+;a;Njxq( zBTJr4S#mZCm@{kM%(=7Y&!9t#9!C>oFt6t5zwd>cdvu&77ySDAyxO3~?&AYen z-@tNG7S|l1w(~O#*PnDd(JY)@kRRc;>0+o_zM{=bwNED(Iku7Ha6Bg}#aCqKr1`=%bKED(R$@ z(wPkpm}aW!rkr-_>8GHED(a}DmTKy$sHUpws;su^>Z`40bHc2&)@tjmxaO+suDte2 zE3CiDr@dR# zKP>UY6jyBVs1aYR@x~l?d~U`bhb;2QB$Enq$tb6+^2R5x?DESn6WnslG}ml1uruGR z^UgejD#Xt~2QBo_L>F!J(MTt)^wLZ>?ex=7M=kZ#R99`a5CIHO00Ufi?e*7Shb{Kl zWS4FB*=VP&_S$T>?e^Pn$1V5VZXck63?f2h+2QK*Fgcol3;fN=$_~MK= z?)c-7N8We<43wb2<(Ox#`R1H=?)m4Shc5c)q?c~`>8Pi!`s%E=?)vI481VY+wAXI` z`|Y^ruKVu1b6$V~9Rx4@@WdBy{PD;qul(}NH}CxO&_^%*^wd{x{q@*e&%guRckli8 z;D;~%_~e&w{`u&qum1Y%x9|S@@W(Iz{PHs(!TtE>umAr1_wWDz01Ti22S~sI8t{M! zOrQc6$iN0Vuz?I{fCMKTiOrsjt$i_7?AOdiVqa5c*$2!{o@s4=R zqaOFj$3FV;kAMuMAO}gvLK^arhGf7E7Rks)I`WZ_jHDzdNy$oD@{*X$q$W4X$xeFm zlb{TxC_|~pQJV6Us7$3QSINp&y7HBfEF~;wNy}Q=@|L*FB`6u7gI@abm%t3BFo#LZ zVjA<9$V{d(m&wd#I`f&(jHWcFNzG~UvYOb;rZ%_9&2D=0o8SzmFs~`ja+>p;=uD?N z*C|bMvh$trjHf*3NzY<300;QYr#|<|&wl#zp8yT0KnF_Df*SOo2u-L$7s}9vI`p9q zy(dH`O3{j1^r9Hes75!+(SAy_qaY2bNJmQ2lA5%kA3do`SIW|sy7Z<00A)Z9W=hkV z+VrM4&8bdz%F~|u^rt`#s!)eY)S?>os7Ot!Qj;pvr8@PgP>rfor%KhTTJ@?pZ7No` z%GIuV^{ZeFD^j&8*0P%QtY}TET6fBT9k}(aaE+^6=StVQ+V!q@&8uGb%GbX7^{;>p ztY8OA*uoOFt%gmkVi(KU#ya+~kd3Tl=Ze_LTK2M-&8%iO%h|zJwzHrOt!PI}+S1zf zv!+e0YFEqJ*7_B-u8pm1XG>eoGQa`2&8=>C%iG@i_P4+du5gD-+~OMdxX4Yea+k~8 z<~sMe&b^v+r%T=HTKBrx&8~L08vqyxU;*F_uXx8x-twCFyy#8;uX@+Z-uAlpz3`2% zeCJEw`r7xt^0k`^STKVh`1ij64zPd+OyB|=_`nEGu!0xN;08PR!4QtHgeOel3PU&m z3+S(fH_YJuAQ9gUHkgTz5cbZfgJ2%8#~9vKDM%H90UM6E)rMG diff --git a/phpBB/adm/images/bg_tabs2.gif b/phpBB/adm/images/bg_tabs2.gif deleted file mode 100644 index 0aace9b6db496a2683854db6f1a06731fb00eb88..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 541 zcmV+&0^FMj`=jr0(=Huk&-r(cl;^pDu=HKDu z=jiI?=IHG0?(p#O)6mTF^76^b&cnjL&dkTFs;R%fz{0@1yt=otva-j;!JnU=;NacL z%+LAx`R(oM@9^-<%gD>f!^_CT&(YP}*U{0_*V5G3(9+hsySu=@yVKR#+}`4unVJ9p z|MBteA^8LV00000EC2ui00#hR000L6z+P`vlGSQHA0UuI)j}bFvN!u!KfXZ8!}Y*i zD~ed`>v7KKa%8v+ws;jW7uClSUxU;RguSdQ|IXMC&IBV8*w`%s4Bg&23E|>74dv!J1?lSO>ghQM@bNhc^z}J3`1$ww`1|}h zI06a;C@>(wf(HlMSjaF3!-fwRI*gd(hQ*5&FIvo~kt4<(AVcN|DUu|}ktR`+R4H%8aj2p&@mvWP8KSR?mVINhmNLCl}0r>HE30xSDixL fDwQi$uU5fg6|1$Y*{^5ArX9PsEZVnLg8%?K9)vi~ 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; -} - -.rtl #tabs li { - 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; - color: #767676; - white-space: nowrap; - font-family: Arial, Helvetica, sans-serif; - text-transform: uppercase; + font-size: 0.85em; font-weight: bold; + line-height: 14px; } -.rtl #tabs a span { +.rtl #tabs .tab { float: right; } -/* Commented Backslash Hack hides rule from IE5-Mac \*/ -#tabs a span, .rtl #tabs a span { float:none;} -/* End hack */ +#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; + 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; +} -#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 a, #tabs .dropdown a span { - background: transparent; - display: block; - border-width: 0; - float: none; +#tabs .dropdown-contents { + list-style: none; 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; - color: inherit !important; -} - -@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) -{ - #tabs { - min-width: 0; - } + 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('').find('li.responsive-tab'), + item = ul.append('').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 @@
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)