phpbb/phpBB/styles/prosilver/theme/common.css
Daniel James 5976dc2141 [ticket/17352] Fix overflow of long rank titles on profile page
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
2024-06-25 16:09:52 +01:00

1285 lines
20 KiB
CSS

/* General Markup Styles
---------------------------------------- */
html {
font-size: 100%;
/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
height: 101%;
}
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;
line-height: normal;
margin: 0;
padding: 12px 0;
word-wrap: break-word;
-webkit-print-color-adjust: exact;
}
h1 {
/* Forum name */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-right: 200px;
margin-top: 15px;
font-weight: bold;
font-size: 2em;
}
h2 {
/* Forum header titles */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 2em;
margin: 0.8em 0 0.2em 0;
}
h2.solo {
margin-bottom: 1em;
}
h3 {
/* Sub-headers (also used as post headers, but defined later) */
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
border-bottom: 1px solid transparent;
margin-bottom: 3px;
padding-bottom: 2px;
font-size: 1.05em;
margin-top: 20px;
}
h4 {
/* Forum and topic list titles */
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Sans-serif;
font-size: 1.3em;
}
p {
line-height: 1.3em;
font-size: 1.1em;
margin-bottom: 1.5em;
}
img {
border-width: 0;
}
hr {
border: 0 solid transparent;
border-top-width: 1px;
height: 1px;
margin: 5px 0;
display: block;
clear: both;
}
hr.dashed {
border-top-style: dashed;
margin: 10px 0;
}
hr.divider {
display: none;
}
p.right {
text-align: right;
}
p.jumpbox-return {
margin-top: 10px;
margin-bottom: 0;
float: left;
}
b, strong {
font-weight: bold;
}
.text-strong {
font-weight: bold;
}
i, em {
font-style: italic;
}
.text-italics {
font-style: italic;
}
u {
text-decoration: underline;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
li {
display: list-item;
}
ul ul, ol ul {
list-style-type: circle;
}
ol ol ul, ol ul ul, ul ol ul, ul ul ul {
list-style-type: square;
}
a:hover { text-decoration: underline; }
/* Main blocks
---------------------------------------- */
.wrap {
border: 1px solid transparent;
border-radius: 8px;
margin: 0 auto;
max-width: 1152px;
min-width: 625px;
padding: 15px;
}
@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px) {
.wrap {
margin: 0 12px;
}
}
.page-body {
margin: 4px 0;
clear: both;
}
.page-footer {
clear: both;
}
.page-footer h3 {
margin-top: 20px;
}
.logo {
float: left;
width: auto;
padding: 10px 13px 0 10px;
}
.logo:hover {
text-decoration: none;
}
.site_logo {
background-repeat: no-repeat;
display: inline-block;
width: 149px;
height: 52px;
}
/* Site description and logo */
.site-description {
float: left;
width: 65%;
}
.site-description h1 {
margin-right: 0;
}
/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
margin-bottom: 4px;
padding: 5px;
border-radius: 7px;
}
.navbar {
padding: 3px 10px;
border-radius: 7px;
}
.forabg {
margin-bottom: 4px;
padding: 5px;
clear: both;
border-radius: 7px;
}
.forumbg {
margin-bottom: 4px;
padding: 5px;
clear: both;
border-radius: 7px;
}
.panel {
margin-bottom: 4px;
padding: 5px 10px;
border-radius: 7px;
}
.post {
padding: 5px 10px;
margin-bottom: 4px;
background-repeat: no-repeat;
background-position: 100% 0;
border-radius: 7px;
position: relative;
}
.rowbg {
margin: 5px 5px 2px 5px;
}
/* Horizontal lists
----------------------------------------*/
.navbar ul.linklist {
padding: 2px 0;
list-style-type: none;
}
ul.linklist {
display: block;
margin: 0;
}
.cp-main .panel {
padding: 5px 10px;
}
ul.linklist > li {
float: left;
font-size: 1.1em;
line-height: 2.2em;
list-style-type: none;
margin-right: 7px;
padding-top: 1px;
width: auto;
}
ul.linklist > li.rightside, p.rightside, a.rightside {
float: right;
margin-right: 0;
margin-left: 7px;
text-align: right;
}
ul.navlinks {
border-top: 1px solid transparent;
}
ul.leftside {
float: left;
margin-left: 0;
margin-right: 5px;
text-align: left;
}
ul.rightside {
float: right;
margin-left: 5px;
margin-right: -5px;
text-align: right;
}
ul.linklist li.responsive-menu {
position: relative;
margin: 0 5px 0 0;
}
.hasjs ul.linklist.leftside, .hasjs ul.linklist.rightside {
max-width: 48%;
}
.hasjs ul.linklist.fullwidth {
max-width: none;
}
li.responsive-menu.dropdown-right .dropdown {
left: -9px;
}
li.responsive-menu.dropdown-left .dropdown {
right: -6px;
}
ul.linklist .dropdown {
top: 22px;
}
ul.linklist .dropdown-up .dropdown {
bottom: 18px;
top: auto;
}
/* Bulletin icons for list items
----------------------------------------*/
ul.linklist.bulletin > li:before {
display: inline-block;
content: "\2022";
font-size: inherit;
line-height: inherit;
padding-right: 4px;
}
ul.linklist.bulletin > li:first-child:before,
ul.linklist.bulletin > li.rightside:last-child:before {
content: none;
}
ul.linklist.bulletin > li.no-bulletin:before {
content: none;
}
.responsive-menu:before {
display: none !important;
}
/* Profile in overall_header.html */
.header-profile {
display: inline-block;
vertical-align: top;
}
a.header-avatar,
a.header-avatar:hover {
text-decoration: none;
}
a.header-avatar img {
margin-bottom: 2px;
max-height: 20px;
vertical-align: middle;
width: auto;
}
a.header-avatar span:after {
content: '\f0dd';
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
padding-left: 6px;
padding-top: 2px;
vertical-align: top;
}
/* Dropdown menu
----------------------------------------*/
.dropdown-container {
position: relative;
}
.dropdown-container-right {
float: right;
}
.dropdown-container-left {
float: left;
}
.nojs .dropdown-container:hover .dropdown {
display: block !important;
}
.dropdown {
display: none;
position: absolute;
left: 0;
top: 1.2em;
z-index: 2;
border: 1px solid transparent;
border-radius: 5px;
padding: 9px 0 0;
margin-right: -500px;
}
.dropdown.live-search {
top: auto;
}
.dropdown-container.topic-tools {
float: left;
}
.dropdown-up .dropdown {
top: auto;
bottom: 1.2em;
padding: 0 0 9px;
}
.dropdown-left .dropdown, .nojs .rightside .dropdown {
left: auto;
right: 0;
margin-left: -500px;
margin-right: 0;
}
.dropdown-button-control .dropdown {
top: 24px;
}
.dropdown-button-control.dropdown-up .dropdown {
top: auto;
bottom: 24px;
}
.dropdown .pointer, .dropdown .pointer-inner {
position: absolute;
width: 0;
height: 0;
border-top-width: 0;
border-bottom: 10px solid transparent;
border-left: 10px dashed transparent;
border-right: 10px dashed transparent;
-webkit-transform: rotate(360deg); /* better anti-aliasing in webkit */
display: block;
}
.dropdown-up .pointer, .dropdown-up .pointer-inner {
border-bottom-width: 0;
border-top: 10px solid transparent;
}
.dropdown .pointer {
right: auto;
left: 10px;
top: -1px;
z-index: 3;
}
.dropdown-up .pointer {
bottom: -1px;
top: auto;
}
.dropdown-left .dropdown .pointer, .nojs .rightside .dropdown .pointer {
left: auto;
right: 10px;
}
.dropdown .pointer-inner {
top: auto;
bottom: -11px;
left: -10px;
}
.dropdown-up .pointer-inner {
bottom: auto;
top: -11px;
}
.dropdown .dropdown-contents {
z-index: 2;
overflow: hidden;
overflow-y: auto;
border: 1px solid transparent;
border-radius: 5px;
padding: 5px;
position: relative;
max-height: 300px;
}
.dropdown-contents a {
display: block;
padding: 5px;
}
.jumpbox {
margin: 5px 0;
}
.jumpbox .dropdown li {
border-top: 1px solid transparent;
}
.jumpbox .dropdown-select {
margin: 0;
}
.jumpbox .dropdown-contents {
padding: 0;
text-decoration: none;
}
.jumpbox .dropdown-contents li {
padding: 0;
}
.jumpbox .dropdown-contents a {
margin-right: 20px;
padding: 5px 10px;
text-decoration: none;
width: 100%;
}
.jumpbox .spacer {
display: inline-block;
width: 0px;
}
.jumpbox .spacer + .spacer {
width: 20px;
}
.dropdown-contents a {
display: block;
padding: 5px;
}
.jumpbox .dropdown-select {
margin: 0;
}
.jumpbox .dropdown-contents a {
text-decoration: none;
}
.dropdown li {
display: list-item;
border-top: 1px dotted transparent;
float: none !important;
line-height: normal !important;
font-size: 1em !important;
list-style: none;
margin: 0;
white-space: nowrap;
text-align: left;
}
.dropdown-contents > li {
padding-right: 15px;
}
.dropdown-nonscroll > li {
padding-right: 0;
}
.dropdown li:first-child, .dropdown li.separator + li, .dropdown li li {
border-top: 0;
}
.dropdown li li:first-child {
margin-top: 4px;
}
.dropdown li li:last-child {
padding-bottom: 0;
}
.dropdown li li {
border-top: 1px dotted transparent;
padding-left: 18px;
}
.wrap .dropdown li, .dropdown.wrap li, .dropdown-extended li {
white-space: normal;
}
.dropdown li.separator {
border-top: 1px solid transparent;
padding: 0;
}
.dropdown li.separator:first-child, .dropdown li.separator:last-child {
display: none !important;
}
/* Responsive breadcrumbs
----------------------------------------*/
.breadcrumbs .crumb {
float: left;
font-weight: bold;
word-wrap: normal;
}
.breadcrumbs .crumb:before {
content: '\2039';
font-weight: bold;
padding: 0 0.5em;
}
.breadcrumbs .crumb:first-child:before {
content: none;
}
.breadcrumbs .crumb a {
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: bottom;
overflow: hidden;
}
.breadcrumbs.wrapped .crumb a { letter-spacing: -.3px; }
.breadcrumbs.wrapped .crumb.wrapped-medium a { letter-spacing: -.4px; }
.breadcrumbs.wrapped .crumb.wrapped-tiny a { letter-spacing: -.5px; }
.breadcrumbs .crumb.wrapped-max a { max-width: 120px; }
.breadcrumbs .crumb.wrapped-wide a { max-width: 100px; }
.breadcrumbs .crumb.wrapped-medium a { max-width: 80px; }
.breadcrumbs .crumb.wrapped-small a { max-width: 60px; }
.breadcrumbs .crumb.wrapped-tiny a { max-width: 40px; }
/* Table styles
----------------------------------------*/
table.table1 {
width: 100%;
}
.ucp-main table.table1 {
padding: 2px;
}
table.table1 thead th {
font-weight: normal;
text-transform: uppercase;
line-height: 1.3em;
font-size: 1em;
padding: 0 0 4px 3px;
}
table.table1 thead th span {
padding-left: 7px;
}
table.table1 tbody tr {
border: 1px solid transparent;
}
table.table1 td {
font-size: 1.1em;
}
table.table1 tbody td {
padding: 5px;
border-top: 1px solid transparent;
}
table.table1 tbody th {
padding: 5px;
border-bottom: 1px solid transparent;
text-align: left;
}
/* Specific column styles */
table.table1 .name { text-align: left; }
table.table1 .center { text-align: center; }
table.table1 .reportby { width: 15%; }
table.table1 .posts { text-align: center; width: 7%; }
table.table1 .joined { text-align: left; width: 15%; }
table.table1 .active { text-align: left; width: 15%; }
table.table1 .mark { text-align: center; width: 7%; }
table.table1 .info { text-align: left; width: 30%; }
table.table1 .info div { width: 100%; white-space: normal; overflow: hidden; }
table.table1 .autocol { line-height: 2em; white-space: nowrap; }
table.table1 thead .autocol { padding-left: 1em; }
table.table1 span.rank-img {
float: right;
width: auto;
}
table.info td {
padding: 3px;
}
table.info tbody th {
padding: 3px;
text-align: right;
vertical-align: top;
font-weight: normal;
}
.forumbg table.table1 {
margin: 0;
}
.forumbg-table > .inner {
margin: 0 -1px;
}
.color_palette_placeholder table {
border-collapse: separate;
border-spacing: 1px;
}
/* Misc layout styles
---------------------------------------- */
/* column[1-2] styles are containers for two column layouts */
.column1 {
float: left;
clear: left;
width: 49%;
}
.column2 {
float: right;
clear: right;
width: 49%;
}
/* General classes for placing floating blocks */
.left-box {
float: left;
width: auto;
text-align: left;
max-width: 100%;
}
.avatar-rank-container {
max-width: 20%;
}
.left-box.profile-details {
width: 80%;
}
.right-box {
float: right;
width: auto;
text-align: right;
max-width: 100%;
}
dl.details {
font-size: 1.1em;
}
dl.details dt {
float: left;
clear: left;
width: 30%;
text-align: right;
display: block;
}
dl.details dd {
margin-left: 0;
padding-left: 5px;
margin-bottom: 5px;
float: left;
width: 65%;
overflow: hidden;
text-overflow: ellipsis;
}
.clearfix, fieldset dl, ul.topiclist dl, dl.polls {
overflow: hidden;
}
fieldset.fields1 ul.recipients {
list-style-type: none;
line-height: 1.8;
max-height: 150px;
overflow-y: auto;
}
fieldset.fields1 dd.recipients {
clear: left;
margin-left: 1em;
}
fieldset.fields1 dl.pmlist > dt {
width: auto !important;
}
fieldset.fields1 dl.pmlist dd.recipients {
margin-left: 0 !important;
}
/* Action-bars (container for post/reply buttons, pagination, etc.)
---------------------------------------- */
.action-bar {
font-size: 11px;
margin: 4px 0;
}
.forabg + .action-bar {
margin-top: 2em;
}
.action-bar .button {
margin-right: 5px;
float: left;
}
.action-bar .button-search {
margin-right: 0;
}
/* Pagination
---------------------------------------- */
.pagination {
float: right;
text-align: right;
width: auto;
}
.action-bar.bar-bottom .pagination {
margin-top: 0;
}
.action-bar .pagination .button {
margin-right: 0;
float: none;
}
.pagination > ul {
display: inline-block;
list-style: none !important;
margin-left: 5px;
}
.pagination > ul > li {
display: inline-block !important;
padding: 0;
font-size: 100%;
line-height: normal;
vertical-align: middle;
}
.pagination li a, .pagination li span {
border-radius: 2px;
padding: 2px 5px;
}
.pagination li.active span {
display: inline-block;
font-size: 13px;
font-weight: normal;
font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
line-height: 1.4;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;
}
.pagination li.ellipsis span {
border: none;
padding: 0;
}
.pagination li.page-jump {
margin-right: 5px;
}
.pagination li.page-jump a {
padding: 0 8px;
}
.pagination li.page-jump a i {
font-size: 21px;
}
.pagination .arrow a {
padding: 2px 0;
}
/* Pagination in viewforum for multipage topics */
.row .pagination {
display: block;
margin-top: 3px;
margin-bottom: 3px;
}
.row .pagination > ul {
margin: 0;
}
.row .pagination li a, .row .pagination li span {
border-radius: 2px;
padding: 1px 3px;
font-size: 9px;
}
/* jQuery popups
---------------------------------------- */
.phpbb_alert {
border: 1px solid transparent;
display: none;
left: 0;
padding: 0 25px 20px 25px;
position: fixed;
right: 0;
top: 150px;
z-index: 50;
width: 620px;
margin: 0 auto;
}
@media only screen and (max-height: 500px), only screen and (max-device-width: 500px)
{
.phpbb_alert {
top: 25px;
}
}
.phpbb_alert .alert_close {
float: right;
margin-right: -36px;
margin-top: -8px;
}
.phpbb_alert p {
margin: 8px 0;
padding-bottom: 8px;
}
.phpbb_alert label {
display: block;
margin: 8px 0;
padding-bottom: 8px;
}
.phpbb_alert div.alert_text > p,
.phpbb_alert div.alert_text > label,
.phpbb_alert div.alert_text > select,
.phpbb_alert div.alert_text > textarea,
.phpbb_alert div.alert_text > input {
font-size: 1.1em;
}
.darkenwrapper {
display: none;
position: relative;
z-index: 44;
}
.darken {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
z-index: 45;
}
.loading_indicator {
background: center center no-repeat;
border-radius: 5px;
display: none;
opacity: 0.8;
margin-top: -50px;
margin-left: -50px;
height: 50px;
width: 50px;
position: fixed;
left: 50%;
top: 50%;
z-index: 51;
}
/* Miscellaneous styles
---------------------------------------- */
.copyright {
font-size: 10px;
text-align: center;
padding: 10px;
}
.footer-row {
font-size: 10px;
line-height: 1.8;
margin: 0;
}
.small {
font-size: 0.9em !important;
}
.titlespace {
margin-bottom: 15px;
}
.headerspace {
margin-top: 20px;
}
.error {
font-weight: bold;
font-size: 1em;
}
div.rules {
margin: 10px 0;
font-size: 1.1em;
padding: 5px 10px;
border-radius: 7px;
}
div.rules ul, div.rules ol {
margin-left: 20px;
}
p.post-notice {
position: relative;
padding: 5px;
min-height: 14px;
margin-bottom: 1em;
}
form > p.post-notice strong {
line-height: 20px;
}
.stat-block {
clear: both;
}
.top-anchor {
display: block;
position: absolute;
top: -20px;
}
.clear {
display: block;
clear: both;
font-size: 1px;
line-height: 1px;
background: transparent;
}
/* Inner box-model clearing */
.inner:after,
ul.linklist:after,
.action-bar:after,
.notification_text:after,
.tabs-container:after,
.tabs > ul:after,
.minitabs > ul:after,
.postprofile .avatar-container:after {
clear: both;
content: '';
display: block;
}
.emoji {
min-height: 18px;
min-width: 18px;
height: 1em;
width: 1em;
}
.smilies {
vertical-align: text-bottom;
}
.icon-notification {
position: relative;
}
.member-search {
float: left;
margin: 0;
padding: 6px 10px;
}
.member-search strong {
font-size: 0.95em;
}
.dropdown-extended {
display: none;
z-index: 1;
}
.dropdown-extended ul {
max-height: 350px;
overflow-y: auto;
overflow-x: hidden;
clear: both;
}
.dropdown-extended ul li {
padding: 0;
margin: 0 !important;
float: none;
border-top: 1px solid;
list-style-type: none;
font-size: 0.95em;
clear: both;
position: relative;
}
.dropdown-extended ul li:first-child {
border-top: none;
}
.dropdown-extended ul li.no_notifications {
padding: 10px;
}
.dropdown-extended .dropdown-contents {
max-height: none;
padding: 0;
position: absolute;
width: 340px;
}
.nojs .dropdown-extended .dropdown-contents {
position: relative;
}
.dropdown-extended .header {
padding: 0 10px;
font-family: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
text-align: left;
text-shadow: 1px 1px 1px white;
text-transform: uppercase;
line-height: 3em;
border-bottom: 1px solid;
border-radius: 5px 5px 0 0;
}
.dropdown-extended .header .header_settings {
float: right;
font-weight: normal;
text-transform: none;
}
.dropdown-extended .header .header_settings a {
display: inline-block;
padding: 0 5px;
}
.dropdown-extended .header:after {
content: '';
display: table;
clear: both;
}
.dropdown-extended .footer {
text-align: center;
font-size: 1.1em;
}
.dropdown-extended ul li a, .dropdown-extended ul li.no-url {
padding: 8px;
}
.dropdown-extended .footer > a {
padding: 5px 0;
}
.dropdown-extended ul li a, .notification_list dt > a, .dropdown-extended .footer > a {
display: block;
text-decoration: none;
}
.notification_list ul li img {
float: left;
max-height: 50px;
max-width: 50px;
width: auto !important;
height: auto !important;
margin-right: 5px;
}
.notification_list ul li p {
margin-bottom: 4px;
font-size: 1em;
}
.notification_list p.notification-reference,
.notification_list p.notification-location,
.notification_list li a p.notification-reason {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notification_list p.notification-time {
font-size: 0.9em;
margin: 0;
text-align: right;
}
.notification_list div.notifications {
margin-left: 50px;
padding: 5px;
}
.notification_list div.notifications a {
display: block;
}
.notification_list p.notifications_title {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.2em !important;
}
.notification_list p.notifications_title strong {
font-weight: bold;
}
.notification_list p.notifications_time {
font-size: 0.9em !important;
}
.notification_text {
margin-left: 58px;
}
.badge {
border-radius: 10px;
opacity: 0.8;
text-align: center;
white-space: nowrap;
font-size: 10px;
line-height: 1;
float: right;
display: inline-block;
margin-left: 3px;
vertical-align: baseline;
position: relative;
top: 3px;
padding: 4px 6px;
}
.badge.hidden {
display: none;
}
/* Navbar specific list items
----------------------------------------*/
.linklist .quick-links {
margin: 0 7px 0 0;
}
.linklist.compact .rightside > a > span {
display: none;
}
.dropdown-page-jump .dropdown {
top: 20px;
}
.dropdown-page-jump.dropdown-up .dropdown {
bottom: 20px;
}
.dropdown-page-jump input.tiny {
width: 50px;
}
.dropdown .clone.hidden {
display: none;
}
.dropdown .clone.hidden + li.separator {
display: none;
}
.dropdown .clone.hidden + li {
border-top: none;
}