[Summary view] [Print] [Text view]

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