[Summary view] [Print] [Text view]

   1  /* Responsive Design
   2  ---------------------------------------- */
   3  
   4  @media (max-width: 320px) {
   5      select, .inputbox {
   6          max-width: 240px;
   7      }
   8  }
   9  
  10  /* Notifications list
  11  ----------------------------------------*/
  12  @media (max-width: 350px) {
  13      .dropdown-extended .dropdown-contents {
  14          width: auto;
  15      }
  16  }
  17  
  18  @media (max-width: 430px) {
  19      .action-bar .search-box .inputbox {
  20          width: 120px;
  21      }
  22  
  23      .section-viewtopic .search-box .inputbox {
  24          width: 57px;
  25      }
  26  }
  27  
  28  @media (max-width: 500px) {
  29      dd label {
  30          white-space: normal;
  31      }
  32  
  33      select, .inputbox {
  34          max-width: 260px;
  35      }
  36  
  37      .captcha-panel dd.captcha {
  38          margin-left: 0;
  39      }
  40  
  41      .captcha-panel dd.captcha-image img {
  42          width: 100%;
  43      }
  44  
  45      dl.details dt, dl.details dd {
  46          width: auto;
  47          float: none;
  48          text-align: left;
  49      }
  50  
  51      dl.details dd {
  52          margin-left: 20px;
  53      }
  54  
  55      p.responsive-center {
  56          float: none;
  57          text-align: center;
  58          margin-bottom: 5px;
  59      }
  60  
  61      .action-bar > div {
  62          margin-bottom: 5px;
  63       }
  64  
  65      .action-bar > .pagination {
  66          float: none;
  67          clear: both;
  68          padding-bottom: 1px;
  69          text-align: center;
  70      }
  71  
  72      .action-bar > .pagination li.page-jump {
  73          margin: 0 2px;
  74      }
  75  
  76      p.jumpbox-return {
  77          display: none;
  78      }
  79  
  80      .display-options > label:nth-child(1) {
  81          display: block;
  82          margin-bottom: 5px;
  83      }
  84  
  85      .attach-controls {
  86          margin-top: 5px;
  87          width: 100%;
  88      }
  89  
  90      .quick-links .dropdown-trigger span {
  91          display: none;
  92      }
  93  }
  94  
  95  @media (max-width: 550px) {
  96      ul.topiclist.forums dt {
  97          margin-right: 0;
  98      }
  99  
 100      ul.topiclist.forums dt .list-inner {
 101          margin-right: 0;
 102      }
 103  
 104      ul.topiclist.forums dd.lastpost {
 105          display: none;
 106      }
 107  }
 108  
 109  @media (max-width: 700px) {
 110      .responsive-hide { display: none !important; }
 111      .responsive-show { display: block !important; }
 112      .responsive-show-inline { display: inline !important; }
 113      .responsive-show-inline-block { display: inline-block !important; }
 114  
 115      /* Content wrappers
 116      ----------------------------------------*/
 117      html {
 118          height: auto;
 119      }
 120  
 121      body {
 122          padding: 0;
 123      }
 124  
 125      .wrap {
 126          border: none;
 127          border-radius: 0;
 128          margin: 0;
 129          min-width: 290px;
 130          padding: 0 5px;
 131      }
 132  
 133      /* Common block wrappers
 134      ----------------------------------------*/
 135      .headerbar, .navbar, .forabg, .forumbg, .post, .panel {
 136          border-radius: 0;
 137          margin-left: -5px;
 138          margin-right: -5px;
 139      }
 140  
 141      .cp-main .forabg, .cp-main .forumbg, .cp-main .post, .cp-main .panel {
 142          border-radius: 7px;
 143      }
 144  
 145      /* Logo block
 146      ----------------------------------------*/
 147      .site-description {
 148          float: none;
 149          width: auto;
 150          text-align: center;
 151      }
 152  
 153      .logo {
 154          /* change display value to inline-block to show logo */
 155          display: none;
 156          float: none;
 157          padding: 10px;
 158      }
 159  
 160      .site-description h1, .site-description p {
 161          text-align: inherit;
 162          float: none;
 163          margin: 5px;
 164          line-height: 1.2em;
 165          overflow: hidden;
 166          text-overflow: ellipsis;
 167      }
 168  
 169      .site-description p, .search-header {
 170          display: none;
 171      }
 172  
 173      /* Navigation
 174      ----------------------------------------*/
 175      .headerbar + .navbar {
 176          margin-top: -5px;
 177      }
 178  
 179      /* Search
 180      ----------------------------------------*/
 181      .responsive-search { display: block !important; }
 182  
 183      /* .topiclist lists
 184      ----------------------------------------*/
 185      li.header dt {
 186          text-align: center;
 187          text-transform: none;
 188          line-height: 1em;
 189          font-size: 1.2em;
 190          padding-bottom: 4px;
 191      }
 192  
 193      ul.topiclist li.header dt, ul.topiclist li.header dt .list-inner {
 194          margin-right: 0 !important;
 195          padding-right: 0;
 196      }
 197  
 198      ul.topiclist li.header dd {
 199          display: none !important;
 200      }
 201  
 202      ul.topiclist dt, ul.topiclist dt .list-inner,
 203      ul.topiclist.missing-column dt, ul.topiclist.missing-column dt .list-inner,
 204      ul.topiclist.two-long-columns dt, ul.topiclist.two-long-columns dt .list-inner,
 205      ul.topiclist.two-columns dt, ul.topiclist.two-columns dt .list-inner {
 206          margin-right: 0;
 207      }
 208  
 209      ul.topiclist dt .list-inner.with-mark {
 210          padding-right: 34px;
 211      }
 212  
 213      ul.topiclist dt .list-inner {
 214          min-height: 28px;
 215      }
 216  
 217      ul.topiclist li.header dt .list-inner {
 218          min-height: 0;
 219      }
 220  
 221      ul.topiclist dd {
 222          display: none;
 223      }
 224      ul.topiclist dd.mark {
 225          display: block;
 226      }
 227  
 228      /* Forums and topics lists
 229      ----------------------------------------*/
 230      ul.topiclist.forums dt {
 231          margin-right: -250px;
 232      }
 233  
 234      ul.topiclist dd.mark {
 235          display: block;
 236          position: absolute;
 237          right: 5px;
 238          top: 0;
 239          margin: 0;
 240          width: auto;
 241          min-width: 0;
 242          text-align: left;
 243      }
 244  
 245      ul.topiclist.forums dd.topics dfn, ul.topiclist.topics dd.posts dfn {
 246          position: relative;
 247          left: 0;
 248          width: auto;
 249          display: inline;
 250          font-weight: normal;
 251      }
 252  
 253      li.row .responsive-show strong {
 254          font-weight: bold;
 255          color: inherit;
 256      }
 257  
 258      ul.topiclist li.row dt a.subforum {
 259          vertical-align: bottom;
 260          overflow: hidden;
 261          text-overflow: ellipsis;
 262          max-width: 100px;
 263      }
 264  
 265      /* Pagination
 266      ----------------------------------------*/
 267      .pagination > ul {
 268          margin: 5px 0 0;
 269      }
 270  
 271      .row .pagination .ellipsis + li {
 272          display: none !important;
 273      }
 274  
 275      /* Responsive tables
 276      ----------------------------------------*/
 277      table.responsive, table.responsive tbody, table.responsive tr, table.responsive td {
 278          display: block;
 279      }
 280  
 281      table.responsive thead, table.responsive th {
 282          display: none;
 283      }
 284  
 285      table.responsive.show-header thead, table.responsive.show-header th:first-child {
 286          display: block;
 287          width: auto !important;
 288          text-align: left !important;
 289      }
 290  
 291      table.responsive.show-header th:first-child span.rank-img {
 292          display: none;
 293      }
 294  
 295      table.responsive tr {
 296          margin: 2px 0;
 297      }
 298  
 299      table.responsive td {
 300          width: auto !important;
 301          text-align: left !important;
 302          padding: 4px;
 303      }
 304  
 305      table.responsive td.empty {
 306          display: none !important;
 307      }
 308  
 309      table.responsive td > dfn {
 310          display: inline-block !important;
 311      }
 312  
 313      table.responsive td > dfn:after {
 314          content: ':';
 315          padding-right: 5px;
 316      }
 317  
 318      table.responsive span.rank-img {
 319          float: none;
 320          padding-right: 5px;
 321      }
 322  
 323      table.responsive.memberlist td:first-child input[type="checkbox"] {
 324          float: right;
 325      }
 326  
 327      /* Forms
 328      ----------------------------------------*/
 329      fieldset dt, fieldset.fields1 dt, fieldset.fields2 dt {
 330          width: auto;
 331          float: none;
 332      }
 333  
 334      fieldset dd, fieldset.fields1 dd, fieldset.fields2 dd {
 335          margin-left: 0;
 336      }
 337  
 338      textarea, dd textarea, .message-box textarea {
 339          width: 100%;
 340          -moz-box-sizing: border-box;
 341          box-sizing: border-box;
 342      }
 343  
 344      dl.pmlist dt {
 345          width: auto !important;
 346          margin-bottom: 5px;
 347      }
 348  
 349      dl.pmlist dd {
 350          display: inline-block;
 351          margin-left: 0 !important;
 352      }
 353  
 354      dl.pmlist dd:first-of-type {
 355          padding-left: 20px;
 356      }
 357  
 358      .smiley-box, .message-box {
 359          float: none;
 360          width: auto;
 361      }
 362  
 363      .smiley-box {
 364          margin-top: 5px;
 365      }
 366  
 367      .bbcode-status {
 368          display: none;
 369      }
 370  
 371      .colour-palette, .colour-palette tbody, .colour-palette tr {
 372          display: block;
 373      }
 374  
 375      .colour-palette td {
 376          display: inline-block;
 377          margin-right: 2px;
 378      }
 379  
 380      .horizontal-palette td:nth-child(2n), .vertical-palette tr:nth-child(2n) {
 381          display: none;
 382      }
 383  
 384      fieldset.quick-login label {
 385          display: block;
 386          margin-bottom: 5px;
 387          white-space: normal;
 388      }
 389  
 390      fieldset.quick-login label > span {
 391          display: inline-block;
 392          min-width: 100px;
 393      }
 394  
 395      fieldset.quick-login input.inputbox {
 396          width: 85%;
 397          max-width: 300px;
 398          margin-left: 20px;
 399      }
 400  
 401      fieldset.quick-login label[for="autologin"] {
 402          display: inline-block;
 403          text-align: right;
 404          min-width: 50%;
 405      }
 406  
 407      /* User profile
 408      ----------------------------------------*/
 409      .column1, .column2, .left-box.profile-details {
 410          float: none;
 411          width: auto;
 412          clear: both;
 413      }
 414  
 415      .avatar-rank-container {
 416          max-width: 100%;
 417      }
 418  
 419      /* Polls
 420      ----------------------------------------*/
 421      fieldset.polls dt {
 422          width: 90%;
 423      }
 424  
 425      fieldset.polls dd.resultbar {
 426          padding-left: 20px;
 427      }
 428  
 429      fieldset.polls dd.poll_option_percent {
 430          width: 20%;
 431      }
 432  
 433      fieldset.polls dd.resultbar, fieldset.polls dd.poll_option_percent {
 434          margin-top: 5px;
 435      }
 436  
 437      /* Post
 438      ----------------------------------------*/
 439      .postbody {
 440          position: inherit;
 441      }
 442  
 443      .postprofile, .postbody, .search .postbody {
 444          display: block;
 445          width: auto;
 446          float: none;
 447          padding: 0;
 448          min-height: 0;
 449      }
 450  
 451      .post .postprofile {
 452          width: auto;
 453          border-width: 0 0 1px 0;
 454          padding-bottom: 5px;
 455          margin: 0 0 5px 0;
 456          min-height: 40px;
 457          overflow: hidden;
 458      }
 459  
 460      .postprofile dd {
 461          display: none;
 462      }
 463  
 464      .postprofile dt, .postprofile dd.profile-rank, .search .postprofile dd {
 465          display: block;
 466          margin: 0;
 467      }
 468  
 469      .postprofile .has-avatar .avatar-container {
 470          margin: 0;
 471          overflow: inherit;
 472      }
 473  
 474      .postprofile .avatar-container:after {
 475          clear: none;
 476      }
 477  
 478      .postprofile .avatar {
 479          margin-right: 5px;
 480      }
 481  
 482      .postprofile .avatar img {
 483          width: auto !important;
 484          height: auto !important;
 485          max-height: 32px;
 486      }
 487  
 488      .has-profile .postbody h3 {
 489          margin-left: 0 !important;
 490          margin-right: 0 !important;
 491      }
 492  
 493      .has-profile .post-buttons {
 494          right: 30px;
 495          top: 15px;
 496      }
 497  
 498      .online {
 499          background-size: 40px;
 500      }
 501  
 502      /* Misc stuff
 503      ----------------------------------------*/
 504      h2 {
 505          margin-top: .5em;
 506      }
 507  
 508      p {
 509          margin-bottom: .5em;
 510          overflow: hidden;
 511      }
 512  
 513      p.rightside {
 514          margin-bottom: 0;
 515      }
 516  
 517      fieldset.display-options label {
 518          display: block;
 519          clear: both;
 520          margin-bottom: 5px;
 521      }
 522  
 523      dl.mini dd.pm-legend {
 524          float: left;
 525          min-width: 200px;
 526      }
 527  
 528      .topicreview {
 529          margin: 0 -5px;
 530          padding: 0 5px;
 531      }
 532  
 533      fieldset.display-actions {
 534          white-space: normal;
 535      }
 536  
 537      .phpbb_alert {
 538          width: auto;
 539          margin: 0 5px;
 540      }
 541  
 542      .attach-comment dfn {
 543          width: 100%;
 544      }
 545  }
 546  
 547  @media (min-width: 701px) {
 548      .postbody {
 549          width: calc(100% - 200px - 1px - 16px);
 550      }
 551  
 552      .postprofile {
 553          width: 200px;
 554      }
 555  }
 556  
 557  @media (min-width: 701px) and (max-width: 950px) {
 558      ul.topiclist dt {
 559          margin-right: -410px;
 560      }
 561  
 562      ul.topiclist dt .list-inner {
 563          margin-right: 410px;
 564      }
 565  
 566      dd.posts, dd.topics, dd.views {
 567          width: 80px;
 568      }
 569  }