diff options
Diffstat (limited to 'phpBB/styles/prosilver/theme/common.css')
-rw-r--r-- | phpBB/styles/prosilver/theme/common.css | 717 |
1 files changed, 432 insertions, 285 deletions
diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index 84f6859936..e800c63294 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -1,49 +1,3 @@ -/* 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 { @@ -53,14 +7,13 @@ html { } 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; + -webkit-print-color-adjust: exact; } h1 { @@ -113,7 +66,6 @@ img { } hr { - /* Also see tweaks.css */ border: 0 solid transparent; border-top-width: 1px; height: 1px; @@ -171,103 +123,78 @@ ol ol ul, ol ul ul, ul ol ul, ul ul ul { list-style-type: square; } +a:hover { text-decoration: underline; } /* Main blocks ---------------------------------------- */ -#wrap { - padding: 0 20px; - min-width: 650px; +.wrap { + border: 1px solid transparent; + border-radius: 8px; + margin: 0 auto; + max-width: 1152px; + min-width: 625px; + padding: 15px; } -#simple-wrap { - padding: 6px 0; +@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px) { + .wrap { + margin: 0 12px; + } } -#page-body { +.page-body { margin: 4px 0; clear: both; } -#page-footer { +.page-footer { clear: both; } -#page-footer h3 { +.page-footer h3 { margin-top: 20px; } -#logo { +.logo { float: left; width: auto; padding: 10px 13px 0 10px; } -a#logo:hover { +.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_logo { + display: inline-block; + width: 149px; + height: 52px; } /* Site description and logo */ -#site-description { +.site-description { float: left; - width: 70%; + width: 65%; } -#site-description h1 { +.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: 0 10px; - padding: 5px 10px 5px 10px; + padding: 3px 10px; border-radius: 7px; } .forabg { - background: transparent none repeat-x 0 0; margin-bottom: 4px; padding: 5px; clear: both; @@ -275,7 +202,6 @@ a#logo:hover { } .forumbg { - background: transparent none repeat-x 0 0; margin-bottom: 4px; padding: 5px; clear: both; @@ -294,12 +220,7 @@ a#logo:hover { background-repeat: no-repeat; background-position: 100% 0; border-radius: 7px; -} - -.inner:after { - content: ''; - clear: both; - display: block; + position: relative; } .rowbg { @@ -308,43 +229,39 @@ a#logo:hover { /* Horizontal lists ----------------------------------------*/ -ul.linklist { - display: block; - margin: 0; +.navbar ul.linklist { + padding: 2px 0; + list-style-type: none; } -ul.linklist:after { - content: ''; +ul.linklist { display: block; - clear: both; + margin: 0; } -#cp-main .panel { +.cp-main .panel { padding: 5px 10px; } -ul.linklist li { - display: block; - list-style-type: none; +ul.linklist > li { float: left; - width: auto; - margin-right: 5px; 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 { +ul.linklist > li.rightside, p.rightside, a.rightside { float: right; margin-right: 0; - margin-left: 5px; + margin-left: 7px; text-align: right; } ul.navlinks { - padding-bottom: 1px; - margin-bottom: 1px; - border-bottom: 1px solid transparent; - font-weight: bold; + border-top: 1px solid transparent; } ul.leftside { @@ -363,28 +280,7 @@ ul.rightside { 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; + margin: 0 5px 0 0; } .hasjs ul.linklist.leftside, .hasjs ul.linklist.rightside { @@ -403,27 +299,18 @@ li.responsive-menu.dropdown-left .dropdown { right: -6px; } -li.responsive-menu .dropdown .dropdown-contents { - padding: 0 5px; -} - -ul.linklist .dropdown-down .dropdown { +ul.linklist .dropdown { top: 22px; } ul.linklist .dropdown-up .dropdown { bottom: 18px; + top: auto; } -ul.linklist .dropdown li { - clear: both; -} - - - /* Bulletin icons for list items ----------------------------------------*/ -ul.linklist.bulletin li:before { +ul.linklist.bulletin > li:before { display: inline-block; content: "\2022"; font-size: inherit; @@ -431,29 +318,65 @@ ul.linklist.bulletin li:before { padding-right: 4px; } -ul.linklist.bulletin li:first-child:before, ul.linklist.bulletin li.rightside:last-child:before { - display: none; +ul.linklist.bulletin > li:first-child:before, +ul.linklist.bulletin > li.rightside:last-child:before { + content: none; } -ul.linklist.bulletin li.no-bulletin:before { - display: 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; +} + +.header-avatar:hover { + text-decoration: none; +} + +.header-avatar img { + margin-bottom: 2px; + max-height: 20px; + vertical-align: middle; + width: auto; +} + +.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; @@ -461,6 +384,11 @@ ul.linklist.bulletin li.no-bulletin:before { border: 1px solid transparent; border-radius: 5px; padding: 9px 0 0; + margin-right: -500px; +} + +.dropdown.live-search { + top: auto; } .dropdown-container.topic-tools { @@ -476,6 +404,8 @@ ul.linklist.bulletin li.no-bulletin:before { .dropdown-left .dropdown, .nojs .rightside .dropdown { left: auto; right: 0; + margin-left: -500px; + margin-right: 0; } .dropdown-button-control .dropdown { @@ -507,12 +437,12 @@ ul.linklist.bulletin li.no-bulletin:before { .dropdown .pointer { right: auto; left: 10px; - top: 0; + top: -1px; z-index: 3; } .dropdown-up .pointer { - bottom: 0; + bottom: -1px; top: auto; } @@ -540,28 +470,86 @@ ul.linklist.bulletin li.no-bulletin:before { 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; + 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 { - border-bottom: 1px dotted transparent; + display: list-item; + border-top: 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-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 { @@ -574,25 +562,41 @@ ul.linklist.bulletin li.no-bulletin:before { .dropdown li li { border-top: 1px dotted transparent; - padding-left: 10px; + padding-left: 18px; } -.wrap .dropdown li, .dropdown.wrap li, #notification_list li { +.wrap .dropdown li, .dropdown.wrap li, .dropdown-extended li { white-space: normal; } -.dropdown li:before, .dropdown li:after { +.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 { - display: inline-block; white-space: nowrap; text-overflow: ellipsis; vertical-align: bottom; @@ -615,7 +619,7 @@ table.table1 { width: 100%; } -#ucp-main table.table1 { +.ucp-main table.table1 { padding: 2px; } @@ -652,6 +656,8 @@ table.table1 tbody th { /* 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%; } @@ -685,15 +691,14 @@ table.info tbody th { margin: 0 -1px; } -#color_palette_placeholder table { +.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 */ +/* column[1-2] styles are containers for two column layouts */ .column1 { float: left; clear: left; @@ -711,6 +716,7 @@ table.info tbody th { float: left; width: auto; text-align: left; + max-width: 100%; } .left-box.profile-details { @@ -721,6 +727,7 @@ table.info tbody th { float: right; width: auto; text-align: right; + max-width: 100%; } dl.details { @@ -750,78 +757,150 @@ dl.details dd { 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; +} + +/* 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 { - width: auto; - text-align: right; - margin-top: 5px; float: right; + text-align: right; + width: auto; } -li.pagination { +.action-bar.bar-bottom .pagination { margin-top: 0; } -.pagination img { - vertical-align: middle; +.action-bar .pagination .button { + margin-right: 0; + float: none; } -.pagination ul { +.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; + list-style: none !important; + margin-left: 5px; } -.pagination ul li, dl .pagination ul li, dl.icon .pagination ul li { - display: inline; +.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 a, .pagnation li span, li .pagination li a, li .pagination li span, .pagination li.active span, .pagination li.ellipsis span { +.pagination li.active span { + display: inline-block; + font-size: 13px; font-weight: normal; - text-decoration: none; - padding: 0 2px; + 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; - font-size: 0.9em; - line-height: 1.5em; +} + +.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; - float: right; - width: auto; - margin-top: 0; - padding: 1px 0 1px 8px; - font-size: 0.9em; - background: none 0 50% no-repeat; + margin-top: -12px; +} + +.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; - position: fixed; display: none; - top: 150px; left: 0; + padding: 0 25px 20px 25px; + position: fixed; right: 0; - max-width: 640px; - margin: 0 auto; + top: 150px; z-index: 50; - padding: 25px; - padding: 0 25px 20px 25px; + width: 620px; + margin: 0 auto; } @media only screen and (max-height: 500px), only screen and (max-device-width: 500px) @@ -832,18 +911,9 @@ li.pagination ul { } .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; + margin-right: -36px; + margin-top: -8px; } .phpbb_alert p { @@ -865,13 +935,13 @@ li.pagination ul { font-size: 1.1em; } -#darkenwrapper { +.darkenwrapper { display: none; position: relative; z-index: 44; } -#darken { +.darken { position: fixed; left: 0; top: 0; @@ -881,7 +951,7 @@ li.pagination ul { z-index: 45; } -#loading_indicator { +.loading_indicator { background: center center no-repeat; border-radius: 5px; display: none; @@ -898,15 +968,6 @@ li.pagination ul { /* 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; @@ -943,28 +1004,20 @@ div.rules ul, div.rules ol { 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 { +.stat-block { + clear: both; +} + +.top-anchor { + display: block; position: absolute; top: -20px; } @@ -977,8 +1030,18 @@ form > p.post-notice strong { background: transparent; } -.hidden { - display: none; +/* 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; } .smilies { @@ -989,66 +1052,101 @@ form > p.post-notice strong { position: relative; } -#notification_list { +.member-search { + float: left; + margin: 0; + padding: 6px 10px; +} + +.member-search strong { + font-size: 0.95em; +} + +.dropdown-extended { display: none; - position: absolute; - left: 0; - width: 330px; z-index: 1; - top: 22px; } -#notification_list ul { +.dropdown-extended ul { max-height: 350px; overflow-y: auto; overflow-x: hidden; clear: both; } -#notification_list ul li { - padding: 10px; - margin: 0; +.dropdown-extended ul li { + padding: 0; + margin: 0 !important; float: none; - border-bottom: 1px solid; + border-top: 1px solid; list-style-type: none; font-size: 0.95em; clear: both; position: relative; } -#notification_list ul li:before, #notification_list ul li:after { - display: none; +.dropdown-extended ul li:first-child { + border-top: none; } -#notification_list .dropdown-contents { +.dropdown-extended ul li.no_notifications { + padding: 10px; +} + +.dropdown-extended .dropdown-contents { max-height: none; padding: 0; + position: absolute; + width: 340px; } -#notification_list .header { +.nojs .dropdown-extended .dropdown-contents { + position: relative; +} + +.dropdown-extended .header { padding: 0 10px; font-family: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 11px; font-weight: bold; + text-align: left; text-shadow: 1px 1px 1px white; - text-transform: uppercase; - line-height: 30px; + text-transform: uppercase; + line-height: 3em; border-bottom: 1px solid; border-radius: 5px 5px 0 0; } -#notification_list .header .header_settings { +.dropdown-extended .header .header_settings { float: right; font-weight: normal; text-transform: none; } -#notification_list .footer { +.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.2em; + font-size: 1.1em; +} + +.dropdown-extended ul li a, .dropdown-extended ul li.no-url { + padding: 8px; } -#notification_list ul li a, .notification_list dt > a, #notification_list .footer > a { +.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; } @@ -1056,39 +1154,88 @@ form > p.post-notice strong { .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: 13px !important; + font-size: 1.2em !important; +} + +.notification_list p.notifications_title strong { font-weight: bold; } .notification_list p.notifications_time { - font-size: 11px !important; + font-size: 0.9em !important; } -.notification_text:after { - content: ''; - clear: both; - display: block; +.notification_text { + margin-left: 58px; } -.compact .icon-notification > a > span, .compact .icon-pm > a > span { +/* Navbar specific list items +----------------------------------------*/ + +.linklist .quick-links { + margin: 0 7px 0 0; +} + +.linklist.compact .rightside > a > span span { display: none; } -.compact .icon-notification > a > strong, .compact .icon-pm > a > strong { +.linklist.compact .rightside > a strong { padding-left: 2px; } + +.dropdown-page-jump .dropdown { + top: 20px; +} + +.dropdown-page-jump.dropdown-up .dropdown { + bottom: 20px; +} + +.dropdown-page-jump input.tiny { + width: 50px; +} + +.dropdown .clone.hidden + li.separator { + display: none; +} + +.dropdown .clone.hidden + li { + border-top: none; +} |