diff options
Diffstat (limited to 'phpBB/styles/prosilver/theme/common.css')
-rw-r--r-- | phpBB/styles/prosilver/theme/common.css | 804 |
1 files changed, 628 insertions, 176 deletions
diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index 7eb00bd808..288477f52a 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -1,12 +1,51 @@ -/* General Markup Styles +/* CSS Reset http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 ---------------------------------------- */ - -* { - /* Reset browsers default margin, padding and font sizes */ +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 */ @@ -16,19 +55,18 @@ html { body { /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */ font-family: Verdana, Helvetica, Arial, sans-serif; - color: #828282; - background-color: #FFFFFF; /*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; - color: #FFFFFF; margin-top: 15px; font-weight: bold; font-size: 2em; @@ -38,7 +76,6 @@ h2 { /* Forum header titles */ font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: normal; - color: #3f3f3f; font-size: 2em; margin: 0.8em 0 0.2em 0; } @@ -52,11 +89,10 @@ h3 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; - border-bottom: 1px solid #CCCCCC; + border-bottom: 1px solid transparent; margin-bottom: 3px; padding-bottom: 2px; font-size: 1.05em; - color: #989898; margin-top: 20px; } @@ -78,8 +114,8 @@ img { hr { /* Also see tweaks.css */ - border: 0 none #FFFFFF; - border-top: 1px solid #CCCCCC; + border: 0 solid transparent; + border-top-width: 1px; height: 1px; margin: 5px 0; display: block; @@ -87,7 +123,7 @@ hr { } hr.dashed { - border-top: 1px dashed #CCCCCC; + border-top-style: dashed; margin: 10px 0; } @@ -99,6 +135,43 @@ 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 { @@ -107,7 +180,7 @@ p.right { } #simple-wrap { - padding: 6px 10px; + padding: 6px 0; } #page-body { @@ -136,7 +209,6 @@ a#logo:hover { /* Search box --------------------------------------------- */ #search-box { - color: #FFFFFF; position: relative; margin-top: 30px; margin-right: 5px; @@ -148,11 +220,10 @@ a#logo:hover { #search-box #keywords { width: 95px; - background-color: #FFF; } #search-box input { - border: 1px solid #b0b0b0; + border: 1px solid transparent; } /* .button1 style defined later, just a few tweaks for the search button version */ @@ -183,122 +254,73 @@ a#logo:hover { /* Round cornered boxes and backgrounds ---------------------------------------- */ .headerbar { - background: #ebebeb none repeat-x 0 0; - color: #FFFFFF; + background: transparent none repeat-x 0 0; margin-bottom: 4px; - padding: 0 5px; + padding: 5px; + border-radius: 7px; } .navbar { - background-color: #ebebeb; padding: 0 10px; + padding: 5px 10px 5px 10px; + border-radius: 7px; } .forabg { - background: #b1b1b1 none repeat-x 0 0; + background: transparent none repeat-x 0 0; margin-bottom: 4px; - padding: 0 5px; + padding: 5px; clear: both; + border-radius: 7px; } .forumbg { - background: #ebebeb none repeat-x 0 0; + background: transparent none repeat-x 0 0; margin-bottom: 4px; - padding: 0 5px; + padding: 5px; clear: both; + border-radius: 7px; } .panel { margin-bottom: 4px; - padding: 0 10px; - background-color: #f3f3f3; - color: #3f3f3f; + padding: 5px 10px; + border-radius: 7px; } .post { - padding: 0 10px; + padding: 5px 10px; margin-bottom: 4px; background-repeat: no-repeat; background-position: 100% 0; + border-radius: 7px; } -.post:target .content { - color: #000000; -} - -.post:target h3 a { - color: #000000; +.inner:after { + content: ''; + clear: both; + display: block; } -.bg1 { background-color: #f7f7f7;} -.bg2 { background-color: #f2f2f2; } -.bg3 { background-color: #ebebeb; } - .rowbg { margin: 5px 5px 2px 5px; } -.ucprowbg { - background-color: #e2e2e2; -} - -.fieldsbg { - /*border: 1px #DBDEE2 solid;*/ - background-color: #eaeaea; -} - -span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span { - font-size: 1px; - line-height: 1px; +/* Horizontal lists +----------------------------------------*/ +ul.linklist { display: block; - height: 5px; - background-repeat: no-repeat; -} - -span.corners-top { - background-image: none; - background-position: 0 0; - margin: 0 -5px; -} - -span.corners-top span { - background-image: none; - background-position: 100% 0; + margin: 0; } -span.corners-bottom { - background-image: none; - background-position: 0 100%; - margin: 0 -5px; +ul.linklist:after { + content: ''; + display: block; clear: both; } -span.corners-bottom span { - background-image: none; - background-position: 100% 100%; -} - -.headbg span.corners-bottom { - margin-bottom: -1px; -} - -.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom { - margin: 0 -10px; -} - -.rules span.corners-top { - margin: 0 -10px 5px -10px; -} - -.rules span.corners-bottom { - margin: 5px -10px 0 -10px; -} - -/* Horizontal lists -----------------------------------------*/ -ul.linklist { - display: block; - margin: 0; +#cp-main .panel { + padding: 5px 10px; } ul.linklist li { @@ -321,7 +343,7 @@ ul.linklist li.rightside, p.rightside { ul.navlinks { padding-bottom: 1px; margin-bottom: 1px; - border-bottom: 1px solid #FFFFFF; + border-bottom: 1px solid transparent; font-weight: bold; } @@ -339,10 +361,258 @@ ul.rightside { 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 { + display: none; +} + +ul.linklist.bulletin li.no-bulletin:before { + display: none; +} + +.responsive-menu:before { + display: none !important; +} + +/* 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; +} + +.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; +} + +.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, #notification_list li { + white-space: normal; +} + +.dropdown li:before, .dropdown li:after { + display: none !important; +} + +/* Responsive breadcrumbs +----------------------------------------*/ +.breadcrumbs .crumb { + word-wrap: normal; +} + +.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 { - /* See tweaks.css */ + width: 100%; } #ucp-main table.table1 { @@ -352,7 +622,6 @@ table.table1 { table.table1 thead th { font-weight: normal; text-transform: uppercase; - color: #FFFFFF; line-height: 1.3em; font-size: 1em; padding: 0 0 4px 3px; @@ -363,35 +632,27 @@ table.table1 thead th span { } table.table1 tbody tr { - border: 1px solid #cfcfcf; -} - -table.table1 tbody tr:hover, table.table1 tbody tr.hover { - background-color: #f6f6f6; - color: #000; + border: 1px solid transparent; } table.table1 td { - color: #6a6a6a; font-size: 1.1em; } table.table1 tbody td { padding: 5px; - border-top: 1px solid #FAFAFA; + border-top: 1px solid transparent; } table.table1 tbody th { padding: 5px; - border-bottom: 1px solid #000000; + border-bottom: 1px solid transparent; text-align: left; - color: #333333; - background-color: #FFFFFF; } /* Specific column styles */ table.table1 .name { text-align: left; } -table.table1 .posts { text-align: center !important; width: 7%; } +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%; } @@ -413,7 +674,6 @@ table.info tbody th { padding: 3px; text-align: right; vertical-align: top; - color: #000000; font-weight: normal; } @@ -425,17 +685,14 @@ table.info tbody th { margin: 0 -1px; } -.forumbg-table > .inner > span.corners-top { - margin: 0 -4px -1px -4px; -} - -.forumbg-table > .inner > span.corners-bottom { - margin: -1px -4px 0 -4px; +#color_palette_placeholder table { + border-collapse: separate; + border-spacing: 1px; } /* Misc layout styles ---------------------------------------- */ -/* column[1-2] styles are containers for two column layouts +/* column[1-2] styles are containers for two column layouts Also see tweaks.css */ .column1 { float: left; @@ -456,6 +713,10 @@ table.info tbody th { text-align: left; } +.left-box.profile-details { + width: 80%; +} + .right-box { float: right; width: auto; @@ -472,7 +733,6 @@ dl.details dt { clear: left; width: 30%; text-align: right; - color: #000000; display: block; } @@ -480,11 +740,18 @@ dl.details dd { margin-left: 0; padding-left: 5px; margin-bottom: 5px; - color: #828282; float: left; width: 65%; + overflow: hidden; + text-overflow: ellipsis; +} + +.clearfix, fieldset dl, ul.topiclist dl, dl.polls { + height: 1%; + overflow: hidden; } + /* Pagination ---------------------------------------- */ .pagination { @@ -495,68 +762,140 @@ dl.details dd { float: right; } -.pagination span.page-sep { - display: none; -} - li.pagination { margin-top: 0; } -.pagination strong, .pagination b { - font-weight: normal; +.pagination img { + vertical-align: middle; } -.pagination span strong { - padding: 0 2px; - margin: 0 2px; - font-weight: normal; - color: #FFFFFF; - background-color: #bfbfbf; - border: 1px solid #bfbfbf; - font-size: 0.9em; +.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 span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active { +.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; - color: #747474; - margin: 0 2px; padding: 0 2px; - background-color: #eeeeee; - border: 1px solid #bababa; + border: 1px solid transparent; font-size: 0.9em; line-height: 1.5em; } -.pagination span a:hover { - border-color: #d2d2d2; - background-color: #d2d2d2; - color: #FFF; - text-decoration: none; -} - -.pagination img { - vertical-align: middle; -} - /* Pagination in viewforum for multipage topics */ .row .pagination { display: block; float: right; width: auto; margin-top: 0; - padding: 1px 0 1px 15px; + padding: 1px 0 1px 8px; font-size: 0.9em; background: none 0 50% no-repeat; } -.row .pagination span a, li.pagination span a { - background-color: #FFFFFF; +/* jQuery popups +---------------------------------------- */ +.phpbb_alert { + border: 1px solid transparent; + position: fixed; + display: none; + top: 150px; + left: 0; + right: 0; + max-width: 640px; + margin: 0 auto; + z-index: 50; + padding: 25px; + padding: 0 25px 20px 25px; } -.row .pagination span a:hover, li.pagination span a:hover { - background-color: #d2d2d2; +@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 @@ -573,7 +912,6 @@ li.pagination { .copyright { padding: 5px; text-align: center; - color: #555555; } .small { @@ -589,45 +927,43 @@ li.pagination { } .error { - color: #bcbcbc; font-weight: bold; font-size: 1em; } -.reported { - background-color: #f7f7f7; -} - -li.reported:hover { - background-color: #ececec; -} - div.rules { - background-color: #ececec; - color: #bcbcbc; - padding: 0 10px; margin: 10px 0; font-size: 1.1em; + padding: 5px 10px; + border-radius: 7px; } div.rules ul, div.rules ol { margin-left: 20px; } -p.rules { - background-color: #ececec; - background-image: none; +p.post-notice { + position: relative; padding: 5px; + padding-left: 26px; + min-height: 14px; + margin-bottom: 1em; } -p.rules img { - vertical-align: middle; - padding-top: 5px; +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; } -p.rules a { - vertical-align: middle; - clear: both; +form > p.post-notice strong { + line-height: 20px; } #top { @@ -642,3 +978,119 @@ p.rules a { line-height: 1px; background: transparent; } + +.hidden { + display: none; +} + +.smilies { + vertical-align: text-bottom; +} + +.icon-notification { + position: relative; +} + +#notification_list { + display: none; + position: absolute; + left: 0; + width: 330px; + z-index: 1; + top: 22px; +} + +#notification_list ul { + max-height: 350px; + overflow-y: auto; + overflow-x: hidden; + clear: both; +} + +#notification_list ul li { + padding: 10px; + margin: 0; + float: none; + border-bottom: 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; +} + +#notification_list .dropdown-contents { + max-height: none; + padding: 0; +} + +#notification_list .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; +} + +#notification_list .header .header_settings { + float: right; + font-weight: normal; + text-transform: none; +} + +#notification_list .footer { + text-align: center; + font-size: 1.2em; +} + +#notification_list ul li a, .notification_list dt > a, #notification_list .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; +} + +.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; +} |