/* -------------------------------------------------------------- /* $Responsive /* -------------------------------------------------------------- */ /* stylelint-disable selector-max-compound-selectors */ /* stylelint-disable selector-no-qualifying-type */ @media (max-width: 320px) { select, .inputbox { max-width: 240px; } } /* Notifications list ---------------------------------------------------------------- */ @media (max-width: 350px) { .dropdown-extended .dropdown-contents { width: auto; } } @media (max-width: 430px) { .action-bar .search-box .inputbox { width: 120px; } .section-viewtopic .search-box .inputbox { width: 57px; } .action-bar .search-box .inputbox ::-moz-placeholder { content: "Search..."; } .action-bar .search-box .inputbox :-ms-input-placeholder { content: "Search..."; } .action-bar .search-box .inputbox ::-webkit-input-placeholder { content: "Search..."; } } @media (max-width: 500px) { dd label { white-space: normal; } select, .inputbox { max-width: 260px; } .captcha-panel dd.captcha { margin-left: 0; } .captcha-panel dd.captcha-image img { width: 100%; } dl.details dt, dl.details dd { text-align: left; float: none; width: auto; } dl.details dd { margin-left: 20px; } p.responsive-center { text-align: center; float: none; margin-bottom: 5px; } .phpbb_alert { top: 25px; } .action-bar > div { margin-bottom: 5px; } .action-bar > .pagination { text-align: center; float: none; clear: both; padding-bottom: 1px; } .action-bar > .pagination li.page-jump { margin: 0 2px; } p.jumpbox-return { display: none; } .display-options > label:nth-child(1) { display: block; margin-bottom: 5px; } .attach-controls { width: 100%; margin-top: 5px; } .quick-links .dropdown-trigger span { display: none; } .rtl dl.details dt, .rtl dl.details dd { text-align: right; float: none; } .rtl dl.details dd { margin-right: 20px; margin-left: 0; } .rtl .captcha-panel dd.captcha { margin-right: 0; } } @media (max-width: 550px) { ul.topiclist.forums dt { margin-right: 0; } ul.topiclist.forums dt .list-inner { margin-right: 0; } ul.topiclist.forums dd.lastpost { display: none; } /* RTL */ /* .topiclist lists ---------------------------------------- */ .rtl ul.topiclist.forums dt { margin-left: 0; } .rtl ul.topiclist.forums dt .list-inner { margin-left: 0; } } @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; min-width: 290px; margin: 0; padding: 0 5px; } /* Common block wrappers ---------------------------------------------------------------- */ .headerbar, .navbar, .forabg, .forumbg, .post, .panel { border-radius: 0; margin-right: -5px; margin-left: -5px; } .cp-main .forabg, .cp-main .forumbg, .cp-main .post, .cp-main .panel { border-radius: 7px; } /* Logo block ---------------------------------------------------------------- */ .site-description { text-align: center; float: none; width: auto; } .logo { /* change display value to inline-block to show logo */ display: none; float: none; padding: 10px; } .site-description h1, .site-description p { line-height: 24px; text-align: inherit; text-overflow: ellipsis; float: none; overflow: hidden; margin: 5px; } .site-description p, .search-header { display: none; } /* Navigation ---------------------------------------------------------------- */ .headerbar + .navbar { margin-top: -5px; } /* Search ---------------------------------------------------------------- */ .responsive-search { display: block !important; } /* Forums and topicslists ---------------------------------------------------------------- */ li.header dt { font-size: 12px; line-height: 12px; text-align: center; text-transform: none; padding-bottom: 4px; } ul.topiclist li.header dt, ul.topiclist li.header dt .list-inner { margin-right: 0 !important; padding-right: 0; } ul.topiclist li.header dd { display: none !important; } 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; } ul.topiclist dt .list-inner.with-mark { padding-right: 34px; } ul.topiclist dt .list-inner { min-height: 28px; } ul.topiclist li.header dt .list-inner { min-height: 0; } ul.topiclist dd { display: none; } ul.topiclist.forums dt { margin-right: -250px; } ul.topiclist dd.mark { text-align: left; position: absolute; top: 0; right: 5px; display: block; width: auto; min-width: 0; margin: 0; } ul.topiclist.forums dd.topics dfn, ul.topiclist.topics dd.posts dfn { font-weight: normal; position: relative; left: 0; display: inline; } li.row .responsive-show strong { font-weight: bold; color: inherit; } ul.topiclist li.row dt a.subforum { vertical-align: bottom; text-overflow: ellipsis; overflow: hidden; max-width: 100px; } /* Pagination ---------------------------------------------------------------- */ .pagination > ul { margin: 5px 0 0; } .row .pagination .ellipsis + li { display: none !important; } /* Responsive tables ---------------------------------------------------------------- */ table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; } table.responsive thead, table.responsive th { display: none; } table.responsive.show-header thead, table.responsive.show-header th:first-child { text-align: left !important; display: block; width: auto !important; } table.responsive.show-header th:first-child span.rank-img { display: none; } table.responsive tr { margin: 2px 0; } table.responsive td { text-align: left !important; width: auto !important; padding: 4px; } table.responsive td.empty { display: none !important; } table.responsive td > dfn { display: inline-block !important; } table.responsive td > dfn:after { padding-right: 5px; content: ":"; } table.responsive span.rank-img { float: none; padding-right: 5px; } table.responsive.memberlist td:first-child input[type="checkbox"] { float: right; } /* Forms ---------------------------------------------------------------- */ fieldset dt, fieldset.fields1 dt, fieldset.fields2 dt { float: none; width: auto; } fieldset dd, fieldset.fields1 dd, fieldset.fields2 dd { margin-left: 0; } textarea, dd textarea, .message-box textarea { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; } 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; } .horizontal-palette td:nth-child(2n), .vertical-palette tr:nth-child(2n) { display: none; } fieldset.quick-login label { white-space: normal; display: block; margin-bottom: 5px; } fieldset.quick-login label > span { display: inline-block; min-width: 100px; } fieldset.quick-login input.inputbox { width: 85%; max-width: 300px; margin-left: 20px; } fieldset.quick-login label[for="autologin"] { text-align: right; display: inline-block; min-width: 50%; } /* User profile ---------------------------------------------------------------- */ .column1, .column2, .left-box.profile-details { float: none; clear: both; width: auto; } /* Polls ---------------------------------------------------------------- */ fieldset.polls dt { width: 90%; } fieldset.polls dd.resultbar { padding-left: 20px; } fieldset.polls dd.poll_option_percent { width: 20%; } fieldset.polls dd.resultbar, fieldset.polls dd.poll_option_percent { margin-top: 5px; } /* Post ---------------------------------------------------------------- */ .postbody { position: inherit; } .postprofile, .postbody, .search .postbody { display: block; float: none; width: auto; min-height: 0; padding: 0; } .post .postprofile { border-width: 0 0 1px; overflow: hidden; width: auto; min-height: 40px; margin: 0 0 5px; padding-bottom: 5px; } .postprofile dd { display: none; } .postprofile dt, .postprofile dd.profile-rank, .search .postprofile dd { display: block; margin: 0; } .postprofile .has-avatar .avatar-container { overflow: inherit; margin: 0; } .postprofile .avatar-container:after { clear: none; } .postprofile .avatar { margin-right: 5px; } .postprofile .avatar img { width: auto !important; height: auto !important; max-height: 32px; } .has-profile .postbody h3 { margin-right: 0 !important; margin-left: 0 !important; } /* post-buttons */ .has-profile .post-buttons { margin: 5px; } .post-buttons > li > a { display: none; } .post-buttons-responsive-menu, .post-button-responsive, .post-buttons-responsive-menu .post-buttons-label { display: block !important; } .post-buttons-responsive-menu .dropdown-contents .button { font-weight: normal; line-height: inherit; background: none; border: none; box-shadow: none; color: #0f4d8a; display: flex; } .post-buttons-responsive-menu .dropdown-contents .button:hover { text-decoration: underline; color: #d41142; } .post-buttons-responsive-menu .dropdown-contents .c-button-icon { color: inherit; padding-right: 5px; } /* Misc stuff ---------------------------------------------------------------- */ h2 { margin-top: 12px; } p { overflow: hidden; margin-bottom: 8px; } p.rightside { margin-bottom: 0; } fieldset.display-options label { display: block; clear: both; margin-bottom: 5px; } dl.mini dd.pm-legend { float: left; min-width: 200px; } .topicreview { margin: 0 -5px; padding: 0 5px; } fieldset.display-actions { white-space: normal; } .phpbb_alert { width: auto; margin: 0 5px; } .attach-comment dfn { width: 100%; } /* RTL */ /* .topiclist lists ---------------------------------------- */ .rtl ul.topiclist li.header dt, .rtl ul.topiclist li.header dt .list-inner { margin-left: 0 !important; padding-left: 0; } .rtl ul.topiclist dt, .rtl ul.topiclist dt .list-inner, .rtl ul.topiclist.missing-column dt, .rtl ul.topiclist.missing-column dt .list-inner, .rtl ul.topiclist.two-long-columns dt, .rtl ul.topiclist.two-long-columns dt .list-inner, .rtl ul.topiclist.two-columns dt, .rtl ul.topiclist.two-columns dt .list-inner { margin-left: 0; } .rtl ul.topiclist dt .list-inner.with-mark { padding-left: 34px; } /* Forums and topics lists ---------------------------------------- */ .rtl ul.topiclist.forums dt { margin-left: -250px; } .rtl ul.topiclist.forums dt .list-inner { margin-left: 250px; } .rtl ul.topiclist dd.mark { text-align: right; right: auto; left: 5px; } .rtl table.responsive.show-header thead, .rtl table.responsive.show-header th:first-child { text-align: right !important; } .rtl table.responsive td { text-align: right !important; } /* User profile ---------------------------------------- */ .rtl .column1, .rtl .column2, .rtl .left-box.profile-details { float: none; } /* Post ---------------------------------------- */ .rtl .postprofile, .rtl .postbody, .rtl .search .postbody { float: none; } .rtl .post .postprofile { border-width: 0 0 1px; } .rtl .postprofile dt, .rtl .postprofile dd.profile-rank, .rtl .search .postprofile dd { margin: 0; } .rtl .postprofile .avatar { margin-right: 0; margin-left: 5px; } .rtl .has-profile .post-buttons { left: 20px; } /* Forms ---------------------------------------- */ .rtl fieldset dt, .rtl fieldset.fields1 dt, .rtl fieldset.fields2 dt { float: none; } .rtl fieldset dd, .rtl fieldset.fields1 dd, .rtl fieldset.fields2 dd { margin-right: 20px; } } @media (min-width: 701px) { .postbody { width: calc(100% - 200px - 1px - 1px); } .postprofile { width: 200px; } } @media (min-width: 701px) and (max-width: 950px) { ul.topiclist dt { margin-right: -410px; } ul.topiclist dt .list-inner { margin-right: 410px; } dd.posts, dd.topics, dd.views { width: 80px; } } /* Responsive *CP navigation ---------------------------------------- */ @media (max-width: 900px) { .nojs .tabs a span, .nojs .minitabs a span { letter-spacing: -0.03em; text-overflow: ellipsis; overflow: hidden; max-width: 40px; } .cp-menu, .navigation, .cp-main { float: none; width: auto; margin: 0; } .navigation { max-width: 320px; margin: 0 auto; padding: 0; } .navigation a { background-image: none; } .navigation li:first-child a { border-top-left-radius: 5px; border-top-right-radius: 5px; } .navigation li:last-child a { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .rtl .cp-menu, .rtl .navigation, .rtl .cp-main { float: none; } .navigation a, .rtl .navigation a { background: #b2c2cf; } } @media (max-width: 992px) { .row .pagination { text-align: left; float: left; margin-top: 4px; margin-bottom: 4px; } } @media (max-width: 1220px) { .wrap { margin: 0 12px; } } /* stylelint-enable selector-max-compound-selectors */ /* stylelint-enable selector-no-qualifying-type */