mirror of
https://github.com/phpbb/phpbb.git
synced 2025-06-29 14:48:53 +00:00
5976dc2141
Users that had very long rank titles would cause the rest of their profile details to be pushed down below the avatar and rank details breaking the layout. This change limits the width of the avatar and rank details. PHPBB-17352
569 lines
9.3 KiB
CSS
569 lines
9.3 KiB
CSS
/* Responsive Design
|
|
---------------------------------------- */
|
|
|
|
@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;
|
|
}
|
|
}
|
|
|
|
@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 {
|
|
width: auto;
|
|
float: none;
|
|
text-align: left;
|
|
}
|
|
|
|
dl.details dd {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
p.responsive-center {
|
|
float: none;
|
|
text-align: center;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.action-bar > div {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.action-bar > .pagination {
|
|
float: none;
|
|
clear: both;
|
|
padding-bottom: 1px;
|
|
text-align: center;
|
|
}
|
|
|
|
.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 {
|
|
margin-top: 5px;
|
|
width: 100%;
|
|
}
|
|
|
|
.quick-links .dropdown-trigger span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
.cp-main .forabg, .cp-main .forumbg, .cp-main .post, .cp-main .panel {
|
|
border-radius: 7px;
|
|
}
|
|
|
|
/* Logo block
|
|
----------------------------------------*/
|
|
.site-description {
|
|
float: none;
|
|
width: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.logo {
|
|
/* change display value to inline-block to show logo */
|
|
display: none;
|
|
float: none;
|
|
padding: 10px;
|
|
}
|
|
|
|
.site-description h1, .site-description p {
|
|
text-align: inherit;
|
|
float: none;
|
|
margin: 5px;
|
|
line-height: 1.2em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.site-description p, .search-header {
|
|
display: none;
|
|
}
|
|
|
|
/* Navigation
|
|
----------------------------------------*/
|
|
.headerbar + .navbar {
|
|
margin-top: -5px;
|
|
}
|
|
|
|
/* Search
|
|
----------------------------------------*/
|
|
.responsive-search { display: block !important; }
|
|
|
|
/* .topiclist lists
|
|
----------------------------------------*/
|
|
li.header dt {
|
|
text-align: center;
|
|
text-transform: none;
|
|
line-height: 1em;
|
|
font-size: 1.2em;
|
|
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 dd.mark {
|
|
display: block;
|
|
}
|
|
|
|
/* Forums and topics lists
|
|
----------------------------------------*/
|
|
ul.topiclist.forums dt {
|
|
margin-right: -250px;
|
|
}
|
|
|
|
ul.topiclist dd.mark {
|
|
display: block;
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 0;
|
|
margin: 0;
|
|
width: auto;
|
|
min-width: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
ul.topiclist.forums dd.topics dfn, ul.topiclist.topics dd.posts dfn {
|
|
position: relative;
|
|
left: 0;
|
|
width: auto;
|
|
display: inline;
|
|
font-weight: normal;
|
|
}
|
|
|
|
li.row .responsive-show strong {
|
|
font-weight: bold;
|
|
color: inherit;
|
|
}
|
|
|
|
ul.topiclist li.row dt a.subforum {
|
|
vertical-align: bottom;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
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 {
|
|
display: block;
|
|
width: auto !important;
|
|
text-align: left !important;
|
|
}
|
|
|
|
table.responsive.show-header th:first-child span.rank-img {
|
|
display: none;
|
|
}
|
|
|
|
table.responsive tr {
|
|
margin: 2px 0;
|
|
}
|
|
|
|
table.responsive td {
|
|
width: auto !important;
|
|
text-align: left !important;
|
|
padding: 4px;
|
|
}
|
|
|
|
table.responsive td.empty {
|
|
display: none !important;
|
|
}
|
|
|
|
table.responsive td > dfn {
|
|
display: inline-block !important;
|
|
}
|
|
|
|
table.responsive td > dfn:after {
|
|
content: ':';
|
|
padding-right: 5px;
|
|
}
|
|
|
|
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 {
|
|
width: auto;
|
|
float: none;
|
|
}
|
|
|
|
fieldset dd, fieldset.fields1 dd, fieldset.fields2 dd {
|
|
margin-left: 0;
|
|
}
|
|
|
|
textarea, dd textarea, .message-box textarea {
|
|
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;
|
|
}
|
|
|
|
.horizontal-palette td:nth-child(2n), .vertical-palette tr:nth-child(2n) {
|
|
display: none;
|
|
}
|
|
|
|
fieldset.quick-login label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
white-space: normal;
|
|
}
|
|
|
|
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"] {
|
|
display: inline-block;
|
|
text-align: right;
|
|
min-width: 50%;
|
|
}
|
|
|
|
/* User profile
|
|
----------------------------------------*/
|
|
.column1, .column2, .left-box.profile-details {
|
|
float: none;
|
|
width: auto;
|
|
clear: both;
|
|
}
|
|
|
|
.avatar-rank-container {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* 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;
|
|
width: auto;
|
|
float: none;
|
|
padding: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.post .postprofile {
|
|
width: auto;
|
|
border-width: 0 0 1px 0;
|
|
padding-bottom: 5px;
|
|
margin: 0 0 5px 0;
|
|
min-height: 40px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.postprofile dd {
|
|
display: none;
|
|
}
|
|
|
|
.postprofile dt, .postprofile dd.profile-rank, .search .postprofile dd {
|
|
display: block;
|
|
margin: 0;
|
|
}
|
|
|
|
.postprofile .has-avatar .avatar-container {
|
|
margin: 0;
|
|
overflow: inherit;
|
|
}
|
|
|
|
.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-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.has-profile .post-buttons {
|
|
right: 30px;
|
|
top: 15px;
|
|
}
|
|
|
|
.online {
|
|
background-size: 40px;
|
|
}
|
|
|
|
/* Misc stuff
|
|
----------------------------------------*/
|
|
h2 {
|
|
margin-top: .5em;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: .5em;
|
|
overflow: hidden;
|
|
}
|
|
|
|
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%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 701px) {
|
|
.postbody {
|
|
width: calc(100% - 200px - 1px - 16px);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|