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