diff options
Diffstat (limited to 'phpBB/styles/prosilver/theme/responsive.css')
-rw-r--r-- | phpBB/styles/prosilver/theme/responsive.css | 881 |
1 files changed, 432 insertions, 449 deletions
diff --git a/phpBB/styles/prosilver/theme/responsive.css b/phpBB/styles/prosilver/theme/responsive.css index 76033a5ce1..0257941ead 100644 --- a/phpBB/styles/prosilver/theme/responsive.css +++ b/phpBB/styles/prosilver/theme/responsive.css @@ -1,110 +1,167 @@ /* Responsive Design ---------------------------------------- */ -@media (max-width: 320px) { - select, .inputbox { - max-width: 240px; - } +.responsive-hide { display: none !important; } +.responsive-show { display: block !important; } +.responsive-show-inline { display: inline !important; } +.responsive-show-inline-block { display: inline-block !important; } + +/* Content wrappers +----------------------------------------*/ +html { + height: auto; } -/* Notifications list +body { + padding: 0; +} + +#wrap { + border: none; + border-radius: 0; + margin: 0; + min-width: 290px; + padding: 0 5px; +} + +/* Common block wrappers ----------------------------------------*/ -@media (max-width: 350px) { - .dropdown-extended .dropdown-contents { - width: auto; - } +.headerbar, .navbar, .forabg, .forumbg, .post, .panel { + border-radius: 0; + margin-left: -5px; + margin-right: -5px; } -@media (max-width: 430px) { - .action-bar .search-box .inputbox { - width: 120px; - } +#cp-main .forabg, #cp-main .forumdb, #cp-main .post, #cp-main .panel { + border-radius: 7px; +} - .section-viewtopic .search-box .inputbox { - width: 57px; - } +/* Logo block +----------------------------------------*/ +#site-description { + float: none; + width: auto; + text-align: center; +} - .action-bar .search-box .inputbox ::-moz-placeholder { - content: "Search..."; - } +.logo { + /* change display value to inline-block to show logo */ + display: none; + float: none; + padding: 10px; +} - .action-bar .search-box .inputbox :-ms-input-placeholder { - content: "Search..."; - } +#site-description h1, #site-description p { + text-align: inherit; + float: none; + margin: 5px; + line-height: 1.2em; + overflow: hidden; + text-overflow: ellipsis; +} - .action-bar .search-box .inputbox ::-webkit-input-placeholder { - content: "Search..."; - } +#site-description p, .search-header { + display: none; } -@media (max-width: 500px) { - dd label { - white-space: normal; - } +/* Navigation +----------------------------------------*/ +.headerbar + .navbar { + margin-top: -5px; +} - select, .inputbox { - max-width: 260px; - } +/* Search +----------------------------------------*/ +.responsive-search { display: block !important; } +.responsive-search a { + display: block; + width: 16px; + height: 22px; + text-indent: 99px; + overflow: hidden; + background-position: 50% 50%; + background-repeat: no-repeat; + text-decoration: none; +} - .captcha-panel dd.captcha { - margin-left: 0; - } +/* .topiclist lists +----------------------------------------*/ +li.header dt { + text-align: center; + text-transform: none; + line-height: 1em; + font-size: 1.2em; + padding-bottom: 4px; +} - .captcha-panel dd.captcha-image img { - width: 100%; - } +ul.topiclist li.header dt, ul.topiclist li.header dt .list-inner { + margin-right: 0 !important; + padding-right: 0; +} - dl.details dt, dl.details dd { - width: auto; - float: none; - text-align: left; - } +ul.topiclist li.header dd { + display: none !important; +} - dl.details dd { - margin-left: 20px; - } +ul.topiclist dt, ul.topiclist dt .list-inner, +ul.topiclist.missing-column dt, ul.topiclist.missing-column dt .list-inner, +ul.topiclist.two-long-columns dt, ul.topiclist.two-long-columns dt .list-inner, +ul.topiclist.two-columns dt, ul.topiclist.two-columns dt .list-inner { + margin-right: 0; +} - p.responsive-center { - float: none; - text-align: center; - margin-bottom: 5px; - } +ul.topiclist dt .list-inner.with-mark { + padding-right: 34px; +} - .action-bar > div { - margin-bottom: 5px; - } +ul.topiclist dt .list-inner { + min-height: 28px; +} - .action-bar > .pagination { - float: none; - clear: both; - padding-bottom: 1px; - text-align: center; - } +ul.topiclist li.header dt .list-inner { + min-height: 0; +} - .action-bar > .pagination li.page-jump { - margin: 0 2px; - } +ul.topiclist dd { + display: none; +} +ul.topiclist dd.mark { + display: block; +} - p.jumpbox-return { - display: none; - } +/* Forums and topics lists +----------------------------------------*/ +ul.topiclist.forums dt { + margin-right: -250px; +} +ul.topiclist.forums dt .list-inner { + margin-right: 250px; +} - .display-options > label:nth-child(1) { - display: block; - margin-bottom: 5px; - } +ul.topiclist.forums dd.lastpost { + display: block; +} - .attach-controls { - margin-top: 5px; - width: 100%; - } +ul.topiclist dd.mark { + display: block; + position: absolute; + right: 5px; + top: 0; + margin: 0; + width: auto; + min-width: 0; + text-align: left; +} - .quick-links .dropdown-trigger span { - display: none; - } +ul.topiclist.forums dd.topics dfn, ul.topiclist.topics dd.posts dfn { + position: relative; + left: 0; + width: auto; + display: inline; + font-weight: normal; } -@media (max-width: 550px) { +@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) { ul.topiclist.forums dt { margin-right: 0; } @@ -118,474 +175,400 @@ } } -@media (max-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; } - - /* Content wrappers - ----------------------------------------*/ - html { - height: auto; - } - - body { - padding: 0; - } - - .wrap { - border: none; - border-radius: 0; - margin: 0; - min-width: 290px; - padding: 0 5px; - } - - /* Common block wrappers - ----------------------------------------*/ - .headerbar, .navbar, .forabg, .forumbg, .post, .panel { - border-radius: 0; - margin-left: -5px; - margin-right: -5px; - } +li.row .responsive-show strong { + font-weight: bold; + color: inherit; +} - .cp-main .forabg, .cp-main .forumdb, .cp-main .post, .cp-main .panel { - border-radius: 7px; - } +ul.topiclist li.row dt a.subforum { + display: inline-block; + vertical-align: bottom; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100px; +} - /* Logo block - ----------------------------------------*/ - .site-description { - float: none; +/* Notifications list +----------------------------------------*/ +@media only screen and (max-width: 350px), only screen and (max-device-width: 350px) { + .dropdown-extended .dropdown-contents { width: auto; - text-align: center; } +} - .logo { - /* change display value to inline-block to show logo */ - display: none; - float: none; - padding: 10px; - } +/* Pagination +----------------------------------------*/ +.pagination > ul { + margin: 5px 0 0; +} - .site-description h1, .site-description p { - text-align: inherit; - float: none; - margin: 5px; - line-height: 1.2em; - overflow: hidden; - text-overflow: ellipsis; - } +.row .pagination .ellipsis + li { + display: none !important; +} - .site-description p, .search-header { - display: none; - } +/* Responsive tables +----------------------------------------*/ +table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { + display: block; +} - /* Navigation - ----------------------------------------*/ - .headerbar + .navbar { - margin-top: -5px; - } +table.responsive thead, table.responsive th { + display: none; +} - /* Search - ----------------------------------------*/ - .responsive-search { display: block !important; } +table.responsive.show-header thead, table.responsive.show-header th:first-child { + display: block; + width: auto !important; + text-align: left !important; +} - /* .topiclist lists - ----------------------------------------*/ - li.header dt { - text-align: center; - text-transform: none; - line-height: 1em; - font-size: 1.2em; - padding-bottom: 4px; - } +table.responsive.show-header th:first-child span.rank-img { + display: none; +} - ul.topiclist li.header dt, ul.topiclist li.header dt .list-inner { - margin-right: 0 !important; - padding-right: 0; - } +table.responsive tr { + margin: 2px 0; +} - ul.topiclist li.header dd { - display: none !important; - } +table.responsive td { + width: auto !important; + text-align: left !important; + padding: 4px; +} - ul.topiclist dt, ul.topiclist dt .list-inner, - ul.topiclist.missing-column dt, ul.topiclist.missing-column dt .list-inner, - ul.topiclist.two-long-columns dt, ul.topiclist.two-long-columns dt .list-inner, - ul.topiclist.two-columns dt, ul.topiclist.two-columns dt .list-inner { - margin-right: 0; - } +table.responsive td.empty { + display: none !important; +} - ul.topiclist dt .list-inner.with-mark { - padding-right: 34px; - } +table.responsive td > dfn { + display: inline-block !important; +} - ul.topiclist dt .list-inner { - min-height: 28px; - } +table.responsive td > dfn:after { + content: ':'; + padding-right: 5px; +} - ul.topiclist li.header dt .list-inner { - min-height: 0; - } +table.responsive span.rank-img { + float: none; + padding-right: 5px; +} - ul.topiclist dd { - display: none; - } - ul.topiclist dd.mark { - display: block; - } +table.responsive#memberlist td:first-child input[type="checkbox"] { + float: right; +} - /* Forums and topics lists - ----------------------------------------*/ - ul.topiclist.forums dt { - margin-right: -250px; - } +/* Forms +----------------------------------------*/ +fieldset dt, fieldset.fields1 dt, fieldset.fields2 dt { + width: auto; + float: none; +} - ul.topiclist dd.mark { - display: block; - position: absolute; - right: 5px; - top: 0; - margin: 0; - width: auto; - min-width: 0; - text-align: left; - } +fieldset dd, fieldset.fields1 dd, fieldset.fields2 dd { + margin-left: 20px; +} - ul.topiclist.forums dd.topics dfn, ul.topiclist.topics dd.posts dfn { - position: relative; - left: 0; - width: auto; - display: inline; - font-weight: normal; - } +textarea, dd textarea, #message-box textarea { + width: 100%; + -moz-box-sizing: border-box; + box-sizing: border-box; +} - li.row .responsive-show strong { - font-weight: bold; - color: inherit; - } +dl.pmlist dt { + width: auto !important; + margin-bottom: 5px; +} - ul.topiclist li.row dt a.subforum { - vertical-align: bottom; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100px; - } +dl.pmlist dd { + display: inline-block; + margin-left: 0 !important; +} - /* Pagination - ----------------------------------------*/ - .pagination > ul { - margin: 5px 0 0; - } +dl.pmlist dd:first-of-type { + padding-left: 20px; +} - .row .pagination .ellipsis + li { - display: none !important; - } +#smiley-box, #message-box { + float: none; + width: auto; +} - /* Responsive tables - ----------------------------------------*/ - table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { - display: block; - } +#smiley-box { + margin-top: 5px; +} - table.responsive thead, table.responsive th { - display: none; - } +.bbcode-status { + display: none; +} - table.responsive.show-header thead, table.responsive.show-header th:first-child { - display: block; - width: auto !important; - text-align: left !important; - } +.colour-palette, .colour-palette tbody, .colour-palette tr { + display: block; +} - table.responsive.show-header th:first-child span.rank-img { - display: none; - } +.colour-palette td { + display: inline-block; + margin-right: 2px; +} - table.responsive tr { - margin: 2px 0; - } +.horizontal-palette td:nth-child(2n), .vertical-palette tr:nth-child(2n) { + display: none; +} - table.responsive td { - width: auto !important; - text-align: left !important; - padding: 4px; - } +.colour-palette a { + display: inline-block !important; +} - table.responsive td.empty { - display: none !important; - } +fieldset.quick-login label { + display: block; + margin-bottom: 5px; + white-space: normal; +} - table.responsive td > dfn { - display: inline-block !important; - } +fieldset.quick-login label > span { + display: inline-block; + min-width: 100px; +} - table.responsive td > dfn:after { - content: ':'; - padding-right: 5px; - } +fieldset.quick-login input.inputbox { + width: 85%; + max-width: 300px; + margin-left: 20px; +} - table.responsive span.rank-img { - float: none; - padding-right: 5px; - } +fieldset.quick-login label[for="autologin"] { + display: inline-block; + text-align: right; + min-width: 50%; +} - table.responsive.memberlist td:first-child input[type="checkbox"] { - float: right; +@media only screen and (max-width: 500px), only screen and (max-device-width: 500px) { + dd label { + white-space: normal; } - /* Forms - ----------------------------------------*/ - fieldset dt, fieldset.fields1 dt, fieldset.fields2 dt { - width: auto; - float: none; + select, .inputbox { + max-width: 260px; } - fieldset dd, fieldset.fields1 dd, fieldset.fields2 dd { - margin-left: 20px; + .captcha-panel dd.captcha { + margin-left: 0; } - textarea, dd textarea, .message-box textarea { + .captcha-panel dd.captcha-image img { width: 100%; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - - dl.pmlist dt { - width: auto !important; - margin-bottom: 5px; - } - - dl.pmlist dd { - display: inline-block; - margin-left: 0 !important; - } - - dl.pmlist dd:first-of-type { - padding-left: 20px; } - .smiley-box, .message-box { - float: none; - width: auto; - } - - .smiley-box { - margin-top: 5px; - } - - .bbcode-status { - display: none; - } - - .colour-palette, .colour-palette tbody, .colour-palette tr { - display: block; - } - - .colour-palette td { - display: inline-block; - margin-right: 2px; + #recaptcha_challenge_image, + #recaptcha_response_field, + .recaptchatable #recaptcha_image { + width: 100% !important; + height: auto !important; } - .horizontal-palette td:nth-child(2n), .vertical-palette tr:nth-child(2n) { + .recaptchatable tr td:last-child { display: none; } - fieldset.quick-login label { - display: block; - margin-bottom: 5px; - white-space: normal; + .captcha-panel .recaptcha-responsive { + display: inline-block !important; + margin-top: 10px; + vertical-align: middle; } +} - fieldset.quick-login label > span { - display: inline-block; - min-width: 100px; +@media only screen and (max-width: 430px), only screen and (max-device-width: 430px) { + .section-viewtopic .search-box .inputbox { + width: 110px; } +} - fieldset.quick-login input.inputbox { - width: 85%; - max-width: 300px; - margin-left: 20px; +@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) { + select, .inputbox { + max-width: 240px; } +} - fieldset.quick-login label[for="autologin"] { - display: inline-block; - text-align: right; - min-width: 50%; - } +/* User profile +----------------------------------------*/ +.column1, .column2, .left-box.profile-details { + float: none; + width: auto; +} - /* User profile - ----------------------------------------*/ - .column1, .column2, .left-box.profile-details { - float: none; +@media only screen and (max-width: 500px), only screen and (max-device-width: 500px) { + dl.details dt, dl.details dd { width: auto; + float: none; + text-align: left; } - /* Polls - ----------------------------------------*/ - fieldset.polls dt { - width: 90%; - } - - fieldset.polls dd.resultbar { - padding-left: 20px; - } - - fieldset.polls dd.poll_option_percent { - width: 20%; + dl.details dd { + margin-left: 20px; } +} - fieldset.polls dd.resultbar, fieldset.polls dd.poll_option_percent { - margin-top: 5px; - } +/* Polls +----------------------------------------*/ +fieldset.polls dt { + width: 90%; +} - /* Post - ----------------------------------------*/ - .postbody { - position: inherit; - } +fieldset.polls dd.resultbar { + padding-left: 20px; +} - .postprofile, .postbody, .search .postbody { - display: block; - width: auto; - float: none; - padding: 0; - min-height: 0; - } +fieldset.polls dd.poll_option_percent { + width: 20%; +} - .post .postprofile { - width: auto; - border-width: 0 0 1px 0; - padding-bottom: 5px; - margin: 0; - margin-bottom: 5px; - min-height: 40px; - overflow: hidden; - } +fieldset.polls dd.resultbar, fieldset.polls dd.poll_option_percent { + margin-top: 5px; +} - .postprofile dd { - display: none; - } +/* Post +----------------------------------------*/ +.postbody { + position: inherit; +} - .postprofile dt, .postprofile dd.profile-rank, .search .postprofile dd { - display: block; - margin: 0; - } +.postprofile, .postbody, .search .postbody { + display: block; + width: auto; + float: none; + padding: 0; + min-height: 0; +} - .postprofile .has-avatar .avatar-container { - margin: 0; - overflow: inherit; - } +.post .postprofile { + width: auto; + border-width: 0 0 1px 0; + padding-bottom: 5px; + margin: 0; + margin-bottom: 5px; + min-height: 40px; + overflow: hidden; +} - .postprofile .avatar-container:after { - clear: none; - } +.postprofile dd { + display: none; +} - .postprofile .avatar { - margin-right: 5px; - } +.postprofile dt, .postprofile dd.profile-rank, .search .postprofile dd { + display: block; + margin: 0; +} - .postprofile .avatar img { - width: auto !important; - height: auto !important; - max-height: 32px; - } +.postprofile .has-avatar .avatar-container { + margin: 0; + overflow: inherit; +} - .has-profile .postbody h3 { - margin-left: 0 !important; - margin-right: 0 !important; - } +.postprofile .avatar-container:after { + clear: none; +} - .has-profile .post-buttons { - right: 30px; - top: 15px; - } +.postprofile .avatar { + margin-right: 5px; +} - .online { - background-size: 40px; - } +.postprofile .avatar img { + width: auto !important; + height: auto !important; + max-height: 32px; +} - /* Misc stuff - ----------------------------------------*/ - h2 { - margin-top: .5em; - } +.has-profile .postbody h3 { + margin-left: 0 !important; + margin-right: 0 !important; +} - p { - margin-bottom: .5em; - overflow: hidden; - } +.has-profile .post-buttons { + right: 20px; + top: 15px; +} - p.rightside { - margin-bottom: 0; - } +.online { + background-size: 40px; +} - fieldset.display-options label { - display: block; - clear: both; - margin-bottom: 5px; - } +/* Misc stuff +----------------------------------------*/ +h2 { + margin-top: .5em; +} - dl.mini dd.pm-legend { - float: left; - min-width: 200px; - } +p { + margin-bottom: .5em; + overflow: hidden; +} - .topicreview { - margin: 0 -5px; - padding: 0 5px; - } +p.rightside { + margin-bottom: 0; +} - fieldset.display-actions { - white-space: normal; - } +fieldset.display-options label { + display: block; + clear: both; + margin-bottom: 5px; +} - .phpbb_alert { - width: auto; - margin: 0 5px; - } +dl.mini dd.pm-legend { + float: left; + min-width: 200px; +} - .attach-comment dfn { - width: 100%; - } +#topicreview { + margin: 0 -5px; + padding: 0 5px; } -@media (min-width: 700px) { - .postbody { width: 70%; } +fieldset.display-actions { + white-space: normal; } -@media (min-width: 850px) { - .postbody { width: 76%; } +.phpbb_alert { + width: auto; + margin: 0 5px; } -@media (max-width: 850px) { - .postprofile { width: 28%; } +.attach-comment dfn { + width: 100%; +} +@media only screen and (max-width: 500px), only screen and (max-device-width: 500px) { + p.responsive-center { + float: none !important; + text-align: center !important; + margin-bottom: 5px; + } -} + .action-bar > div { + margin-bottom: 5px; + } -@media (min-width: 701px) and (max-width: 950px) { + .action-bar > .pagination { + float: none; + clear: both; + padding-bottom: 1px; + text-align: center; + } - ul.topiclist dt { - margin-right: -410px; + .action-bar > .pagination li.page-jump { + margin: 0 2px; } - ul.topiclist dt .list-inner { - margin-right: 410px; + p.jumpbox-return { + display: none; } - dd.posts, dd.topics, dd.views { - width: 80px; + .display-options > label:nth-child(1) { + display: block; + margin-bottom: 5px; } -} -@media (max-width: 992px) { - .row .pagination { - text-align: left; - float: left; - margin-top: 4px; - margin-bottom: 4px; + .attach-controls { + margin-top: 5px; + width: 100%; } } |