diff options
Diffstat (limited to 'phpBB/adm/style/admin.css')
-rw-r--r-- | phpBB/adm/style/admin.css | 1328 |
1 files changed, 1077 insertions, 251 deletions
diff --git a/phpBB/adm/style/admin.css b/phpBB/adm/style/admin.css index a0e14d65a1..b03cb0ba24 100644 --- a/phpBB/adm/style/admin.css +++ b/phpBB/adm/style/admin.css @@ -1,7 +1,10 @@ -/* phpBB 3.0 Admin Style Sheet +/* phpBB 3.1 Admin Style Sheet ------------------------------------------------------------------------ Original author: subBlue ( http://www.subblue.com/ ) - Copyright 2007 phpBB Group ( http://www.phpbb.com/ ) + Copyright (c) phpBB Limited <https://www.phpbb.com> + + For full copyright and license information, please see + the docs/CREDITS.txt file. ------------------------------------------------------------------------ */ @@ -18,11 +21,11 @@ body, div, p, th, td, li, dd { font-size: x-small; voice-family: "\"}\""; voice-family: inherit; - font-size: small + font-size: small; } html>body, html>div, html>p, html>th, html>td, html>li, html>dd { - font-size: small + font-size: small; } html { @@ -31,6 +34,7 @@ html { /* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-ie browsers */ height: 100%; margin-bottom: 1px; + word-wrap: break-word; } body { @@ -42,6 +46,10 @@ body { margin: 10px 15px; } +code, samp { + font-size: 1.2em; +} + img { border: 0; } @@ -97,10 +105,43 @@ hr { height: 1px; } +.centered-text { + text-align: center; +} + +.search-box { + float: left; +} + +.rtl .search-box { + float: right; +} + .small { font-size: 0.85em; } +.hidden { + display: none; +} + +@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) +{ + body { + margin: 5px 5px 0; + } +} + +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + html, body { + height: auto; + margin: 0; + padding: 0; + } +} + + /* General links */ a:link, a:visited { color: #105289; @@ -121,6 +162,10 @@ a:active { font-weight: bold; } +a#maincontent, a#acl, a#assigned_to { + display: block; +} + /* List items */ ul, ol { list-style-position: inside; @@ -132,6 +177,7 @@ li { list-style-type: inherit; } + /* Main blocks ---------------------------------------- */ #wrap { @@ -140,7 +186,6 @@ li { } #page-header { - clear: both; text-align: right; background: url("../images/phpbb_logo.png") top left no-repeat; height: 54px; @@ -169,12 +214,10 @@ li { } #page-body { - clear: both; - min-width: 700px; + min-width: 650px; } -#page-footer { - clear: both; +.copyright { font-size: 0.75em; text-align: center; } @@ -191,19 +234,23 @@ li { } #main { - float: left; - width: 76%; - margin: 0 0 0 3%; - min-height: 350px; + float: right; + width: 100%; + margin: 0 0 0 -210px; } .rtl #main { - float: right; - margin: 0 3% 0 0; + float: left; + margin: 0 -210px 0 0; } -* html #main { - height: 350px; +.main { + margin-left: 210px; +} + +.rtl .main { + margin-left: 0; + margin-right: 210px; } #page-body.simple-page-body { @@ -212,186 +259,269 @@ li { min-width: 0; } +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + #wrap, #page-body, #page-body.simple-page-body { + padding: 0; + min-width: 300px; + } + + #page-header { + margin: 5px; + padding-left: 160px; + height: auto; + min-height: 54px; + overflow: hidden; + } + + .rtl #page-header { + padding-right: 160px; + padding-left: 0; + } + + #page-header h1 { + font-size: 1.2em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + #page-header fieldset { + margin-top: 5px; + } + + #main, .rtl #main, .main, .rtl .main { + float: none; + width: auto; + margin: 0; + } + + #content { + background: #F3F3F3 url("../images/innerbox_bg.gif") repeat-x top; + padding: 5px; + } + + #page-footer { + padding: 0 5px 5px; + } +} + +@media only screen and (max-width: 400px), only screen and (max-device-width: 400px) +{ + #page-header { + background-size: 76px 26.5px; + padding-left: 80px; + min-height: 30px; + } + + .rtl #page-header { + padding-right: 80px; + } + + #page-header h1 { + padding-top: 0; + font-size: 1.1em; + } +} + + /* Tabbed menu - Based on: http://www.alistapart.com/articles/slidingdoors2/ ----------------------------------------*/ #tabs { + font-family: Arial, Helvetica, sans-serif; line-height: normal; - margin: 0 0 -6px 7px; - min-width: 600px; -} - -.rtl #tabs { - margin: 0 7px -6px 0; + margin: 0 7px; + position: relative; + z-index: 2; } -#tabs ul { - margin:0; - padding: 0; +#tabs > ul { list-style: none; -} - -#tabs li { - display: inline; margin: 0; padding: 0; - font-size: 0.85em; - font-weight: bold; } -#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 a { +.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; +#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 #activetab a { - background-position: 0 0; - border-bottom: 1px solid #DCDEE2; +#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 span { - background-position: 100% 0; - padding-bottom: 5px; - color: #23649F; +#tabs .activetab > a:hover { + color: #115098; } -#tabs a:hover { - background-position: 0 -69px; +/* Responsive tabs +----------------------------------------*/ +.responsive-tab { + position: relative; } -#tabs a:hover span { - background-position: 100% -69px; +.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; } -#tabs #activetab a:hover span { - color: #115098; +.responsive-tab .responsive-tab-link:before { + content: ''; + position: absolute; + 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:before { + border-color: #BC2A4D; +} -/* Main Panel ----------------------------------------- */ -#acp { - margin: 4px 0; - padding: 3px 1px; - min-width: 550px; - background-color: #FFFFFF; - border: 1px #999999 solid; +.responsive-tab.activetab .responsive-tab-link:before { + border-color: #23649F; } -.panel { - background: #F3F3F3 url("../images/innerbox_bg.gif") repeat-x top; - padding: 0; +.responsive-tab.activetab .responsive-tab-link:hover:before { + border-color: #115098; } -span.corners-top, span.corners-bottom, -span.corners-top span, span.corners-bottom span { - font-size: 1px; - line-height: 1px; - display: block; - height: 5px; - background-repeat: no-repeat; +#tabs .dropdown, #minitabs .dropdown { + top: 20px; + margin-right: -2px; + font-weight: normal; } -span.corners-top { - background-image: url("../images/corners_left.gif"); - background-position: 0 0; - margin: -4px -2px 0; +#tabs .dropdown-right .dropdown { + margin-left: -2px; } -span.corners-top span { - background-image: url("../images/corners_right.gif"); - background-position: 100% 0; +#tabs .dropdown-contents { + list-style: none; + margin: 0; } -span.corners-bottom { - background-image: url("../images/corners_left.gif"); - background-position: 0 100%; - margin: 0 -2px -4px; - clear: both; +#tabs .dropdown li { + border-bottom: 1px dotted #DCDCDC; } -span.corners-bottom span { - background-image: url("../images/corners_right.gif"); - background-position: 100% 100%; +#tabs .dropdown li:last-child { + border-bottom: none; } -/* WinIE tweaks \*/ -* html span.corners-top, * html span.corners-bottom { background-image: url("../images/corners_left.gif"); } -* html span.corners-top span, * html span.corners-bottom span { background-image: url("../images/corners_right.gif"); } -/* End tweaks */ +#tabs .dropdown a { + display: block; + padding: 4px 8px; + text-align: right; +} -/* Sub-navigation Menu +/* Main Panel ---------------------------------------- */ - -/* Toggle */ -#toggle { - padding: 5px; - width: 5%; - height: 100px; - position: absolute; - left: 15%; - top: 28px; - margin-left: 2px; +#acp { + position: relative; + top: -2px; + margin: 0 0 2px; + padding: 3px 1px; + min-width: 550px; + background: #F3F3F3 url("../images/innerbox_bg.gif") repeat-x top; + border: 1px #999999 solid; + border-radius: 5px; + box-shadow: #FFF 0 0 0 1px inset; } -.rtl #toggle { - left: 75%; - margin-right: 0; - margin-left: 6px; +#acp:first-child { + top: 0; } -#toggle-handle { - display: block; - width: 18px; - height: 19px; - float: right; - background-image: url(../images/toggle.gif); +.panel { + background: #F3F3F3 url("../images/innerbox_bg.gif") repeat-x top; + padding: 5px 0; + border-radius: 5px; + overflow: hidden; } -.rtl #toggle-handle { - background-image: url(../images/toggle.gif); - background-position: 100% 50%; +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + #acp { + min-width: 0; + min-height: 0; + border-radius: 0; + border-width: 1px 0; + background: #fff; + padding: 1px 0; + box-shadow: none; + } } +/* Sub-navigation Menu +---------------------------------------- */ + /* Menu */ #menu { float: left; - width: 20%; + width: 200px; font-size: 1.00em; padding: 0; border-right: 1px solid #CCCFD3; + position: relative; + z-index: 1; } .rtl #menu { @@ -408,15 +538,16 @@ span.corners-bottom span { list-style: none; margin: 0; padding: 0; + word-wrap: normal; } /* Default list state */ -#menu li { +#menu li, #menu .header { padding: 0; margin: 0; font-size: 0.85em; font-weight: bold; - display: inline; + display: block; } /* Link styles for the sub-section links */ @@ -481,7 +612,7 @@ span.corners-bottom span { background: url("../images/arrow_down.gif") 99% 50% no-repeat; } -#menu li.header { +#menu .header { font-family: Tahoma, Helvetica, sans-serif; display: block; font-weight: bold; @@ -491,8 +622,71 @@ span.corners-bottom span { margin-top: 15px; text-transform: uppercase; font-size: 0.75em; + text-decoration: none; + cursor: inherit; + outline-style: none; +} + +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + #menu, .rtl #menu { + float: none; + width: auto; + border-width: 0; + max-width: 200px; + margin: 0 auto 10px; + } + + #menu p { + text-align: center; + } + + #menu .menu-block.active { + margin: 0 -5px; + padding: 0 5px 3px; + background: rgba(255, 255, 255, .5); + border-radius: 5px; + } + + #menu .menu-block.no-header.active { + padding-top: 3px; + } + + #menu .menu-block .header { + margin-top: 5px; + cursor: pointer; + border-bottom-width: 0; + position: relative; + text-decoration: underline; + } + + #menu .menu-block .header:focus, #menu .menu-block.active .header { + color: #D31141; + text-decoration: none; + } + + #menu .menu-block ul { + display: none; + } + + .nojs #menu .menu-block:hover ul, #menu .menu-block.active ul, #menu .menu-block.no-header ul { + display: block; + } + + #menu .menu-block li:last-child { + border-bottom: 1px solid #327AA5; + } + + #menu .menu-block:last-child li:last-child, #menu .menu-block.active li:last-child { + border-bottom-width: 0; + } + + #menu .menu-block li a span { + border-radius: 2px; + } } + /* Table styles ---------------------------------------- */ @@ -525,6 +719,21 @@ td { text-align: right; } +.table1 { + border-collapse: separate; + border-spacing: 1px; + clear: both; +} + +dt#color_palette_placeholder table { + margin-right: 5px; + width: 80px; +} + +#color_palette_placeholder td { + padding: 0; +} + table.type2 { border: none; background: none; @@ -619,19 +828,234 @@ td.name { text-align: right; } -.row1 { background-color: #F9F9F9; } -.row2 { background-color: #DCEBFE; } +.row1 { + background-color: #F9F9F9; +} + +table.zebra-table tbody tr:nth-child(odd) { + background-color: #F9F9F9; +} + +.row2 { + background-color: #DCEBFE; +} + +table.zebra-table tbody tr:nth-child(even) { + background-color: #DCEBFE; +} + .row3 { background-color: #DBDFE2; } .row4 { background-color: #E4E8EB; } .col1 { background-color: #DCEBFE; } .col2 { background-color: #F9F9F9; } +/* 4 row background colours for trees */ +.row1a { background-color: #F9F9F9; } +.row1b { background-color: #F6F6F6; } +.row2a { background-color: #E7EEF4; } +.row2b { background-color: #E3EBF2; } + .spacer { background-color: #DBDFE2; height: 1px; line-height: 1px; } +/* Deactivated row */ +.row-inactive { + color: #999; +} +.row-inactive a, .row-inactive strong { + color: #888; +} +.row-inactive a:hover { + color: #BC2A4D; +} + +/* Specific tables */ +table.forums td.folder { + width: 27px; + text-align: center; +} + +table td.actions { + vertical-align: middle; + width: 100px; + text-align: center; + white-space: nowrap; +} + +table tr:first-child td.actions .up, table tr:last-child td.actions .down { + display: none; +} + +table tr:first-child td.actions .up-disabled, table tr:last-child td.actions .down-disabled { + display: inline !important; +} + +table.styles td.users, table td.mark { + text-align: center; +} + +table.fixed-width-table { + table-layout: fixed; + word-break: break-word; +} + +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { + display: block; + } + + table.responsive thead, table.responsive th, table.responsive colgroup { + display: none; + } + + table.responsive.show-header thead, table.responsive.show-header th:first-child, table.responsive caption { + display: block; + width: auto !important; + text-align: left !important; + margin: 0; + } + + table.responsive { + background: transparent none; + border-width: 0; + padding: 0; + } + + table.responsive caption { + padding: 3px 4px; + color: #FFFFFF; + background: #70AED3 url("../images/gradient2b.gif") bottom left repeat-x; + border-top: 1px solid #6DACD2; + border-bottom: 1px solid #327AA5; + text-align: left; + font-size: 0.75em; + font-weight: bold; + text-transform: uppercase; + } + + table.responsive.show-header th:first-child span.rank-img, table.responsive.no-caption caption, table.responsive.no-header thead { + display: none; + } + + table.responsive tr { + margin: 2px 0; + border: 1px solid #CCCFD3; + background-color: #FFFFFF; + padding: 1px 1px 0; + overflow: hidden; + } + + table.responsive tr.row1 td { background-color: #F9F9F9; } + table.responsive tr.row2 td { background-color: #DCEBFE; } + table.responsive tr.row3 td { background-color: #DBDFE2; } + table.responsive tr.row4 td { background-color: #E4E8EB; } + table.responsive tr.col1 td { background-color: #DCEBFE; } + table.responsive tr.col2 td { background-color: #F9F9F9; } + table.responsive tr.row1a td { background-color: #F9F9F9; } + table.responsive tr.row1b td { background-color: #F6F6F6; } + table.responsive tr.row2a td { background-color: #E7EEF4; } + table.responsive tr.row2b td { background-color: #E3EBF2; } + + table.responsive td { + width: auto !important; + text-align: left !important; + padding: 4px; + margin-bottom: 1px; + } + + .rtl table.responsive td { + text-align: right !important; + } + + table.responsive td.empty { + display: none !important; + } + + table.responsive td > dfn { + display: inline-block !important; + } + + table.responsive td > dfn:after { + content: ':'; + padding-right: 5px; + } + + table.responsive.two-columns td { + width: 50% !important; + float: left; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + + .rtl table.responsive.two-columns td { + float: right; + } + + table.responsive.two-columns td:nth-child(2n+1) { + clear: left; + } + + table.responsive span.rank-img { + float: none; + padding-right: 5px; + } + + table.responsive#memberlist td:first-child input[type="checkbox"] { + float: right; + } + + /* Specific tables */ + table.responsive.forums td.folder { + float: left; + width: 27px; + background: transparent; + } + .rtl table.responsive.forums td.folder { + float: right; + } + + table.responsive.forums td.forum-desc { + margin-left: 35px; + min-height: 27px; + background: transparent; + } + + .rtl table.responsive.forums td.forum-desc { + margin-left: 0; + margin-right: 35px; + } + + table.responsive td.actions { + clear: both; + text-align: right !important; + } + + .rtl table.responsive td.actions { + text-align: left !important; + } + + table.responsive.styles tr.responsive-style-row td:first-child { + padding-left: 4px !important; + padding-right: 4px !important; + } + + table.responsive.styles td:first-child > dfn, table.responsive td.actions > dfn { + display: none !important; + } + + .horizontal-palette td:nth-child(2n), .vertical-palette tr:nth-child(2n) { + display: none; + } + + .colour-palette a { + display: inline-block !important; + } +} + /* General form styles ----------------------------------------*/ fieldset { @@ -643,6 +1067,11 @@ fieldset { border-left: 1px solid #D7D7D7; background-color: #FFFFFF; position: relative; + border-radius: 3px; +} + +fieldset h2 { + margin-top: 0; } .rtl fieldset { @@ -652,10 +1081,6 @@ fieldset { border-left: 1px solid #CCCCCC; } -* html fieldset { - padding: 0 10px 5px 10px; -} - fieldset p { font-size: 0.85em; } @@ -674,23 +1099,10 @@ legend { vertical-align: middle; } -* html legend { - margin: 0 0 -10px -7px; - line-height: 1em; - font-size: .85em; -} - -/* Holly hack, .rtl comes after html */ -* html .rtl legend { - margin: 0; - margin-right: -7px; -} - input, textarea { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 0.90em; font-weight: normal; - cursor: text; vertical-align: middle; padding: 2px; color: #111111; @@ -720,12 +1132,20 @@ input.langvalue, textarea.langvalue { width: 90%; } +input[type="number"] { + width: 60px; + -moz-padding-end: 0; +} + optgroup, select { + background-color: #FAFAFA; + border: 1px solid #666666; font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 0.85em; font-weight: normal; font-style: normal; cursor: pointer; + padding: 1px; vertical-align: middle; width: auto; color: #000; @@ -811,8 +1231,8 @@ fieldset.quick legend { fieldset.tabulated { background: none; margin: 0; + margin-top: 5px; padding: 0; - padding-top: 5px; border: 0; } @@ -833,7 +1253,7 @@ fieldset.display-options { border: none; background-color: transparent; text-align: center; - font-size: 0.75em; + font-size: 0.85em; } fieldset.display-options select, fieldset.display-options input, fieldset.display-options label { @@ -852,6 +1272,22 @@ select#full_folder_action { width: 95%; } +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + fieldset { + padding: 5px; + } + + fieldset.quick, p.quick { + float: none !important; + text-align: center; + } + + fieldset.display-options { + clear: both; + } +} + /* Definition list layout for forms Other general def. list properties defined in prosilver_main.css ---------------------------------------- */ @@ -938,6 +1374,10 @@ fieldset dt { border-left: 1px solid #CCCCCC; } +fieldset #color_palette_placeholder { + padding-top: 0; +} + fieldset dd { margin: 0 0 0 45%; padding: 0 0 0 5px; @@ -983,6 +1423,55 @@ input:focus, textarea:focus { outline-style: none; } +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + fieldset dl { + margin-bottom: 5px; + padding-bottom: 5px; + border-bottom: 1px solid #e8e8e8; + } + + fieldset > dl:last-child, fieldset > form:last-child > dl:last-child { + border-bottom-width: 0; + margin-bottom: 0; + } + + fieldset dt, .rtl fieldset dt, fieldset dd, .rtl fieldset dd { + border-width: 0; + margin-left: 0; + margin-right: 0; + float: none; + width: auto; + } + + fieldset .responsive-columns dt { + float: left; + } + + .ltr fieldset dd { + padding-left: 20px; + } + + .rtl fieldset dd { + padding-right: 20px; + } + + select, dd select, dd input { + max-width: 300px; + } + + input[type="number"], dd input[type="number"] { + max-width: 70px; + } +} + +@media only screen and (max-width: 400px), only screen and (max-device-width: 400px) +{ + select, dd select, dd input { + max-width: 240px; + } +} + /* Submit button fieldset or paragraph ---------------------------------------- */ fieldset.submit-buttons { @@ -1009,14 +1498,21 @@ fieldset.submit-buttons legend { display: none; } +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + p.submit-buttons { + margin-top: 0; + } +} + /* Input field styles ---------------------------------------- */ -input.radio, input.permissions-checkbox { +input.radio, input.checkbox, input.permissions-checkbox { width: auto !important; background-color: transparent; border: none; - cursor: default; + cursor: pointer; } input.full, @@ -1024,7 +1520,6 @@ textarea.full { width: 99%; } -* html input.full, * html textarea.full { width: 95%;} input.medium { width: 50%;} input.narrow { width: 25%;} input.tiny { width: 10%;} @@ -1033,7 +1528,7 @@ input.autowidth { width: auto !important;} /* Form button styles ---------------------------------------- */ -a.button1, input.button1, input.button3, +a.button1, input.button1, a.button2, input.button2 { width: auto !important; padding: 1px 3px 0 3px; @@ -1076,66 +1571,208 @@ input.disabled { } /* Focus states */ -input.button1:focus, input.button2:focus, input.button3:focus { +input.button1:focus, input.button2:focus { outline-style: none; } +/* jQuery popups +---------------------------------------- */ +.phpbb_alert { + background-color: #FFFFFF; + border: 1px solid #999999; + position: fixed; + display: none; + top: 150px; + left: 0; + right: 0; + width: 620px; + margin: 0 auto; + z-index: 50; + padding: 25px; + padding: 0 25px 20px 25px; +} + +.phpbb_alert .alert_close { + display: block; + float: right; + width: 16px; + height: 16px; + overflow: hidden; + text-decoration: none !important; + background: transparent url("../images/alert_close.png") 0 0 no-repeat; + margin-top: -7px; + margin-right: -31px; +} +.phpbb_alert .alert_close:hover { + background-position: 0 -16px; +} + + +.phpbb_alert p { + margin: 8px 0; + padding-bottom: 8px; +} + +.phpbb_alert label { + display: block; + margin: 8px 0; + padding-bottom: 8px; +} + +.phpbb_alert div.alert_text > p, +.phpbb_alert div.alert_text > label, +.phpbb_alert div.alert_text > select, +.phpbb_alert div.alert_text > textarea, +.phpbb_alert div.alert_text > input { + font-size: 0.9em; +} + +#darkenwrapper { + display: none; + position: relative; + z-index: 44; +} + +#darken { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: #000000; + opacity: 0.5; + z-index: 45; +} + +@media only screen and (max-height: 500px), only screen and (max-device-width: 500px) +{ + .phpbb_alert { + top: 25px; + } +} + +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + .phpbb_alert { + width: auto; + margin: 0 25px; + } +} + +#loading_indicator { + background: #000000 url("../images/loading.gif") center center no-repeat; + border-radius: 5px; + display: none; + opacity: 0.8; + margin-top: -50px; + margin-left: -50px; + height: 50px; + width: 50px; + position: fixed; + left: 50%; + top: 50%; + z-index: 51; +} + /* Pagination ---------------------------------------- */ .pagination { + font-size: .85em; height: 1%; /* IE tweak (holly hack) */ width: auto; text-align: right; - margin-top: 5px; - font-size: 0.85em; - padding-bottom: 2px; + margin: 5px 0; +} + +.top-pagination { + float: right; + margin: 15px 0 5px 0; } .rtl .pagination { text-align: left; + float: left; } -.pagination strong, -.pagination b { - font-weight: normal; +li.pagination { + margin-top: 0; } -.pagination span.page-sep { - display:none; +.pagination img { + vertical-align: middle; } -.pagination span strong { - padding: 0 2px; - margin: 0 2px; - font-weight: normal; - font-size: 0.85em; - color: #FFFFFF; - background: #4692BF; - border: 1px solid #4692BF; +.pagination ul { + display: inline-block; + *display: inline; /* IE7 inline-block hack */ + *zoom: 1; + margin-left: 0; + margin-bottom: 0; +} + +li.pagination ul { + margin-top: -2px; + vertical-align: middle; } -.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active { +.pagination ul li, dl .pagination ul li, dl.icon .pagination ul li { + display: inline; + padding: 0; + font-size: 100%; + line-height: normal; +} + +.pagination li a, .pagnation li span, li .pagination li a, li .pagnation li span, .pagination li.active span, .pagination li.ellipsis span { font-weight: normal; - font-size: 0.85em; text-decoration: none; - color: #5C758C; - margin: 0 2px; padding: 0 2px; - background: #ECEDEE; - border: 1px solid #B4BAC0; + border: 1px solid transparent; + font-size: 0.9em; + line-height: 1.5em; } -.pagination span a:hover { - border-color: #368AD2; - background: #368AD2; +.pagination li a, .pagination li a:link, .pagination li a:visited { + color: #5C758C; + background-color: #ECEDEE; + border-color: #B4BAC0; +} + +.pagination li.ellipsis span { + background-color: transparent; + color: #000000; +} + +.pagination li.active span { color: #FFFFFF; - text-decoration: none; + background-color: #4692BF; + border-color: #4692BF; } -.pagination img { - vertical-align: middle; +.pagination li a:hover, .pagination .active a:hover { + color: #FFFFFF; + background-color: #368AD2; + border-color: #368AD2; +} + +.pagination li a:active, .pagination li.active a:active { + color: #5C758C; + background-color: #ECEDEE; + border-color: #B4BAC0; } +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + .pagination, .rtl .pagination { + float: none; + text-align: center; + margin: 5px 0; + } + + .pagination li a, .pagination li span { + display: inline-block; + min-width: 10px; + } +} /* Action Highlighting ---------------------------------------- */ @@ -1144,6 +1781,7 @@ input.button1:focus, input.button2:focus, input.button3:focus { margin: 10px 0; color: #FFFFFF; text-align: center; + clear: both; } .success { @@ -1162,8 +1800,6 @@ input.button1:focus, input.button2:focus, input.button3:focus { background-color: #BC2A4D; } -* html .errorbox, * html .successbox { height: 1%; } /* Pixel shift fix for IE */ - .successbox h3, .errorbox h3 { color: #FFFFFF; margin: 0 0 0.5em; @@ -1247,18 +1883,7 @@ input.button1:focus, input.button2:focus, input.button3:focus { vertical-align: middle; } -/* Nice method for clearing floated blocks without having to insert any extra markup - From http://www.positioniseverything.net/easyclearing.html -.clearfix:after, #tabs:after, .row:after, #content:after, fieldset dl:after, #page-body:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; -}*/ - -.clearfix, #tabs, .row, #content, fieldset dl, #page-body { - height: 1%; +.row, fieldset dl { overflow: hidden; } @@ -1312,6 +1937,15 @@ input.button1:focus, input.button2:focus, input.button3:focus { /* Permission interface ---------------------------------------- */ +.column1, .column2 { + width: 48%; + float: left; +} + +.ltr .column2, .rtl .column1 { + float: right; +} + fieldset.permissions legend { text-transform: none; } @@ -1509,60 +2143,15 @@ fieldset.permissions .padding { float: left; background-color: #CADCEB; width: 100%; + border-radius: 5px; + overflow: hidden; + padding: 5px 0; } .rtl .permissions-panel { float: right; } -.permissions-panel span.corners-top { - background-image: url("../images/corners_left2.gif"); -} - -.permissions-panel span.corners-top span { - background-image: url("../images/corners_right2.gif"); -} - -.permissions-panel span.corners-bottom { - background-image: url("../images/corners_left2.gif"); -} - -.permissions-panel span.corners-bottom span { - background-image: url("../images/corners_right2.gif"); -} - -.permissions-panel span.corners-top, .permissions-panel span.corners-bottom, -.permissions-panel span.corners-top span, .permissions-panel span.corners-bottom span { - font-size: 1px; - line-height: 1px; - display: block; - height: 5px; - background-repeat: no-repeat; -} - -.permissions-panel span.corners-top { - background-image: url("../images/corners_left2.gif"); - background-position: 0 0; - margin: 0 0; -} - -.permissions-panel span.corners-top span { - background-image: url("../images/corners_right2.gif"); - background-position: 100% 0; -} - -.permissions-panel span.corners-bottom { - background-image: url("../images/corners_left2.gif"); - background-position: 0 100%; - margin: 0 0; - clear: both; -} - -.permissions-panel span.corners-bottom span { - background-image: url("../images/corners_right2.gif"); - background-position: 100% 100%; -} - /* Permission table ---------------------------------------- */ .permissions-panel .tablewrap { @@ -1645,6 +2234,208 @@ fieldset.permissions .padding { padding: 0; } +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + .column1, .column2 { + float: none !important; + width: auto; + } + + .permissions-simple { + clear: both; + } + + .permissions-simple td, .permissions-simple dd { + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + + .permissions-simple dd { + margin-top: 5px; + } + + .permissions-panel .tablewrap { + margin: 0 5px; + } + + .permissions-category { + min-width: 0; + margin: 0 !important; + } + + .permissions-category a, .permissions-category a span.tabbg { + display: block; + float: none !important; + background: transparent none; + } + + .permissions-category a { + background: #d9e5ee; + margin: 5px 0; + padding: 0 !important; + border-radius: 3px; + text-decoration: underline; + } + + .permissions-category .activetab a { + background-color: #dd6900; + color: #fff; + } + + .permissions-category a span.tabbg { + color: inherit !important; + padding-top: 6px !important; + padding-bottom: 6px !important; + } + + .permissions-category .activetab span.colour { + border-color: #fff; + } +} + +/* Avatars gallery +---------------------------------------- */ +#gallery { + display: block; + margin: 0 -5px; + padding: 0; + overflow: hidden; +} + +#gallery li { + display: block; + float: left; + border: 1px solid #ccc; + border-radius: 2px; + background: #fff; + padding: 5px; + margin: 5px; +} + +#gallery li:hover { + background-color: #eee; +} + +#gallery li label { + display: block; + text-align: center; + padding: 0; +} + +/* Dropdown menu +----------------------------------------*/ +.dropdown { + position: absolute; + left: 0; + top: 22px; + z-index: 2; + border: 1px solid transparent; + border-radius: 5px; + padding: 9px 0 0; +} + +.dropdown-up .dropdown { + top: auto; + bottom: 18px; + padding: 0 0 9px; +} + +.dropdown-left .dropdown { + left: auto; + right: 0; +} + +.dropdown .pointer, .dropdown .pointer-inner { + position: absolute; + width: 0; + height: 0; + border-top-width: 0; + border-bottom: 10px solid transparent; + border-left: 10px dashed transparent; + border-right: 10px dashed transparent; + -webkit-transform: rotate(360deg); /* better anti-aliasing in webkit */ + display: block; +} + +.dropdown-up .pointer, .dropdown-up .pointer-inner { + border-bottom-width: 0; + border-top: 10px solid transparent; +} + +.dropdown .pointer { + right: auto; + left: 10px; + top: 0; + z-index: 3; +} + +.dropdown-up .pointer { + bottom: 0; + top: auto; +} + +.dropdown-left .dropdown .pointer { + left: auto; + right: 10px; +} + +.dropdown .pointer-inner { + top: auto; + bottom: -11px; + left: -10px; +} + +.dropdown-up .pointer-inner { + bottom: auto; + top: -11px; +} + +.dropdown .pointer { + border-color: #B9B9B9 transparent; +} + +.dropdown .pointer-inner { + border-color: #FFF transparent; +} + +.dropdown .dropdown-contents { + z-index: 2; + overflow: hidden; + overflow-y: auto; + background: #fff; + border: 1px solid #b9b9b9; + border-radius: 5px; + padding: 5px; + position: relative; + min-width: 40px; + max-height: 200px; + box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.dropdown-up .dropdown-contents { + box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2); +} + +.dropdown li { + float: none; + margin: 0; + white-space: nowrap; + text-align: left; +} + +.wrap .dropdown li, .dropdown.wrap li { + white-space: normal; +} + +.dropdown li:before, .dropdown li:after { + display: none !important; +} + + /* Classes for additional tasks ---------------------------------------- */ @@ -1657,3 +2448,38 @@ fieldset.permissions .padding { .phpinfo td, .phpinfo th, .phpinfo h2, .phpinfo h1 { text-align: left; } + +.requirements_not_met { + padding: 5px; + background-color: #BC2A4D; +} + +.requirements_not_met dt label, .requirements_not_met dd p { + color: #FFFFFF; + font-size: 1.4em; +} + +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + .responsive-hide { display: none !important; } + .responsive-show { display: block !important; } + .responsive-show-inline { display: inline !important; } + .responsive-show-inline-block { display: inline-block !important; } +} + +.clearfix { + overflow: hidden; +} + +.pagination:after, +#page-header:after, +#page-body:after, +#tabs:after, +#tabs > ul:after, +#tabs li:after, +#acp:after, +#content:after { + content: ''; + clear: both; + display: block; +} |