1
0
mirror of https://github.com/phpbb/phpbb.git synced 2025-02-25 04:23:38 +01:00
brunoais 8173f96d60 [ticket/12604] Fix wrong padding when no notifications
Added a class to the <li> when the <li> represents that there's no
notifications (no_notifications) and
Added a CSS rule that matches the change to the HTML source for when
there's no notifications.

PHPBB3-12604
2014-05-28 11:59:44 +01:00

1158 lines
19 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* CSS Reset http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126
---------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 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 {
/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
font-family: Verdana, Helvetica, Arial, sans-serif;
/*font-size: 62.5%; This sets the default font size to be equivalent to 10px */
font-size: 10px;
line-height: normal;
margin: 0;
padding: 12px 0;
word-wrap: break-word;
}
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 {
/* Also see tweaks.css */
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: 1em;
}
b, strong {
font-weight: bold;
}
i, em {
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;
}
/* Main blocks
---------------------------------------- */
#wrap {
padding: 0 20px;
min-width: 650px;
}
#simple-wrap {
padding: 6px 0;
}
#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;
}
a#logo:hover {
text-decoration: none;
}
/* Search box
--------------------------------------------- */
#search-box {
position: relative;
margin-top: 30px;
margin-right: 5px;
display: block;
float: right;
text-align: right;
white-space: nowrap; /* For Opera */
}
#search-box #keywords {
width: 95px;
}
#search-box input {
border: 1px solid transparent;
}
/* .button1 style defined later, just a few tweaks for the search button version */
#search-box input.button1 {
padding: 1px 5px;
}
#search-box li {
text-align: right;
margin-top: 4px;
}
#search-box img {
vertical-align: middle;
margin-right: 3px;
}
/* Site description and logo */
#site-description {
float: left;
width: 70%;
}
#site-description h1 {
margin-right: 0;
}
/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
background: transparent none repeat-x 0 0;
margin-bottom: 4px;
padding: 5px;
border-radius: 7px;
}
.navbar {
padding: 5px 10px 5px 10px;
border-radius: 7px;
}
.forabg {
background: transparent none repeat-x 0 0;
margin-bottom: 4px;
padding: 5px;
clear: both;
border-radius: 7px;
}
.forumbg {
background: transparent none repeat-x 0 0;
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;
}
.inner:after {
content: '';
clear: both;
display: block;
}
.rowbg {
margin: 5px 5px 2px 5px;
}
/* Horizontal lists
----------------------------------------*/
ul.linklist {
display: block;
margin: 0;
}
ul.linklist:after {
content: '';
display: block;
clear: both;
}
#cp-main .panel {
padding: 5px 10px;
}
ul.linklist li {
display: block;
list-style-type: none;
float: left;
width: auto;
margin-right: 5px;
font-size: 1.1em;
line-height: 2.2em;
padding-top: 1px;
}
ul.linklist li.rightside, p.rightside {
float: right;
margin-right: 0;
margin-left: 5px;
text-align: right;
}
ul.navlinks {
padding-bottom: 1px;
margin-bottom: 1px;
border-bottom: 1px solid transparent;
font-weight: bold;
}
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;
}
ul.linklist li.responsive-menu a.responsive-menu-link {
display: inline-block;
margin: 0 5px;
font-size: 16px;
position: relative;
width: 16px;
line-height: 16.5px;
text-decoration: none;
}
ul.linklist li.responsive-menu a.responsive-menu-link:before {
content: '';
position: absolute;
left: 0;
top: 7px;
height: .125em;
width: 14px;
border-bottom: 0.125em solid transparent;
border-top: 0.375em double transparent;
}
.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;
}
li.responsive-menu .dropdown .dropdown-contents {
padding: 0 5px;
}
ul.linklist .dropdown-down .dropdown {
top: 22px;
}
ul.linklist .dropdown-up .dropdown {
bottom: 18px;
}
ul.linklist .dropdown li {
clear: both;
}
/* 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;
}
/* Avatar in overall_header.html */
.header-avatar img {
margin-bottom: 2px;
max-height: 25px;
vertical-align: middle;
width: auto;
}
/* Dropdown menu
----------------------------------------*/
.dropdown-container {
position: relative;
}
.nojs .dropdown-container:hover .dropdown {
display: block !important;
}
.dropdown {
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: 0;
z-index: 3;
}
.dropdown-up .pointer {
bottom: 0;
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;
min-width: 40px;
max-height: 200px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.dropdown li {
border-bottom: 1px dotted transparent;
float: none !important;
line-height: normal !important;
font-size: 1em !important;
list-style: none;
margin: 0;
padding-top: 4px;
padding-bottom: 4px;
white-space: nowrap;
text-align: left;
}
.dropdown li:last-child, .dropdown li li {
border-bottom: 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: 10px;
}
.wrap .dropdown li, .dropdown.wrap li, .dropdown-extended li {
white-space: normal;
}
.dropdown li:before, .dropdown li:after {
display: none !important;
}
/* Responsive breadcrumbs
----------------------------------------*/
.breadcrumbs .crumb {
float: left;
word-wrap: normal;
}
.breadcrumbs .crumb:before {
content: '';
font-weight: bold;
padding: 0 0.5em;
}
.breadcrumbs .crumb:first-child:before {
content: none;
}
.breadcrumbs .crumb a {
display: inline-block;
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 .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
Also see tweaks.css */
.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;
}
.left-box.profile-details {
width: 80%;
}
.right-box {
float: right;
width: auto;
text-align: right;
}
dl.details {
/*font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;*/
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 ul.recipients input.button2{
font-size: 0.8em;
margin-right: 0;
padding: 0;
}
fieldset.fields1 dl.pmlist > dt {
width: auto !important;
}
fieldset.fields1 dl.pmlist dd.recipients {
margin-left: 0 !important;
}
/* Pagination
---------------------------------------- */
.pagination {
width: auto;
text-align: right;
margin-top: 5px;
float: right;
}
li.pagination {
margin-top: 0;
}
.pagination img {
vertical-align: middle;
}
.pagination ul {
display: inline-block;
*display: inline; /* IE7 inline-block hack */
*zoom: 1;
margin-left: 0;
margin-bottom: 0;
}
li.pagination ul {
margin-top: -2px;
vertical-align: middle;
}
.pagination ul li, dl .pagination ul li, dl.icon .pagination ul li {
display: inline;
padding: 0;
font-size: 100%;
line-height: normal;
}
.pagination li a, .pagnation li span, li .pagination li a, li .pagination li span, .pagination li.active span, .pagination li.ellipsis span {
font-weight: normal;
text-decoration: none;
padding: 0 2px;
border: 1px solid transparent;
font-size: 0.9em;
line-height: 1.5em;
}
/* Pagination in viewforum for multipage topics */
.row .pagination {
display: block;
float: right;
width: auto;
margin-top: 0;
padding: 1px 0 1px 8px;
font-size: 0.9em;
background: none 0 50% no-repeat;
}
/* 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 {
display: block;
float: right;
width: 16px;
height: 16px;
overflow: hidden;
text-decoration: none !important;
background: transparent none 0 0 no-repeat;
margin-top: -7px;
margin-right: -31px;
}
.phpbb_alert .alert_close:hover {
background-position: 0 -16px;
}
.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
---------------------------------------- */
#forum-permissions {
float: right;
width: auto;
padding-left: 5px;
margin-left: 5px;
margin-top: 10px;
text-align: right;
}
.copyright {
padding: 5px;
text-align: center;
}
.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;
padding-left: 26px;
min-height: 14px;
margin-bottom: 1em;
}
p.post-notice:before {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 28px;
background: transparent none 50% 50% no-repeat;
pointer-events: none;
}
form > p.post-notice strong {
line-height: 20px;
}
#top {
position: absolute;
top: -20px;
}
.clear {
display: block;
clear: both;
font-size: 1px;
line-height: 1px;
background: transparent;
}
.hidden {
display: none;
}
.smilies {
vertical-align: text-bottom;
}
.icon-notification {
position: relative;
}
.dropdown-extended {
display: none;
position: absolute;
left: 0;
width: 330px;
z-index: 1;
top: 22px;
}
.dropdown-extended ul {
max-height: 350px;
overflow-y: auto;
overflow-x: hidden;
clear: both;
}
.dropdown-extended ul li {
padding: 0;
margin: 0;
float: none;
border-bottom: 1px solid;
list-style-type: none;
font-size: 0.95em;
clear: both;
position: relative;
}
.dropdown-extended ul li.no_notifications {
padding: 10px;
}
.dropdown-extended ul li:before, .dropdown-extended ul li:after {
display: none;
}
.dropdown-extended .dropdown-contents {
max-height: none;
padding: 0;
}
.dropdown-extended .header {
padding: 0 10px;
font-family: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: bold;
text-shadow: 1px 1px 1px white;
text-transform: uppercase;
line-height: 30px;
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 .footer {
text-align: center;
font-size: 1.1em;
}
.dropdown-extended ul li a{
padding: 10px;
}
.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;
width: auto !important;
height: auto !important;
margin-right: 5px;
}
.notification_list ul li p {
margin: 0;
font-size: 1em;
}
.notification_list div.notifications {
padding: 5px;
}
.notification_list p.notifications_title {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px !important;
font-weight: bold;
}
.notification_list p.notifications_time {
font-size: 11px !important;
}
.notification_text:after {
content: '';
clear: both;
display: block;
}
.compact .icon-notification > a > span, .compact .icon-pm > a > span {
display: none;
}
.compact .icon-notification > a > strong, .compact .icon-pm > a > strong {
padding-left: 2px;
}