diff options
Diffstat (limited to 'phpBB/styles/prosilver/theme')
20 files changed, 2724 insertions, 2206 deletions
diff --git a/phpBB/styles/prosilver/theme/base.css b/phpBB/styles/prosilver/theme/base.css index 98c57d9264..f4daeee1e5 100644 --- a/phpBB/styles/prosilver/theme/base.css +++ b/phpBB/styles/prosilver/theme/base.css @@ -1,6 +1,6 @@ -/* -------------------------------------------------------------- +/* -------------------------------------------------------------- /* $Base --------------------------------------------------------------- */ +/* -------------------------------------------------------------- */ /** { -webkit-box-sizing: border-box; @@ -12,19 +12,25 @@ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -}*/ +} +*/ -/* Define your base font-size here; most elements will inherit this. _NO__DOTCOMMA__AFTER__*/ +/* + * 1. Define your base font-size here (16px), most elements will inherit this. + * 2. 24px (This is now our magic number; all subsequent margin-bottoms and + * line-heights want to be a multiple of this number in order to maintain + * vertical rhythm.) +*/ html { - font-size: 1em; /* Assuming 16px... */ - line-height: 1.5; /* 24px (This is now our magic number; all subsequent margin-bottoms and line-heights want to be a multiple of this number in order to maintain vertical rhythm.) _NO__DOTCOMMA__AFTER__*/ + font-size: 16px; /* [1] */ + line-height: 1.5; /* [2] */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #333333; background-color: #ffffff; + color: #333333; } input, @@ -36,26 +42,31 @@ textarea { line-height: inherit; } -figure { margin: 0 } -img { vertical-align: middle } +figure { + margin: 0; +} + +img { + vertical-align: middle; +} hr { - margin-top: 20px; - margin-bottom: 20px; border: 0; border-top: 1px solid #e5e5e5; + margin-top: 20px; + margin-bottom: 20px; } a { - color: #428bca; text-decoration: none; + color: #428bca; } a:hover, a:focus, a:active { - color: #2a6496; text-decoration: underline; + color: #2a6496; } blockquote, @@ -69,7 +80,10 @@ h5, h6, figure, p, -pre { margin: 0 } +pre { + margin: 0; +} + button { background: transparent; border: 0; @@ -81,8 +95,7 @@ button { * results in a loss of the default `button` focus styles. */ button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; + outline: 1px dotted 5px auto -webkit-focus-ring-color; } fieldset { @@ -91,12 +104,15 @@ fieldset { padding: 0; } -iframe { border: 0 } +iframe { + border: 0; +} + ol, ul { - list-style: none; margin: 0; padding: 0; + list-style: none; } /** @@ -104,7 +120,9 @@ ul { * This prevents an unwanted focus outline from appearing around elements that * might still respond to pointer events. */ -[tabindex="-1"]:focus { outline: none !important } +[tabindex="-1"]:focus { + outline: none !important; +} /** * Remove double underline from recent version of firefox @@ -112,4 +130,3 @@ ul { abbr[title] { text-decoration: none; } - diff --git a/phpBB/styles/prosilver/theme/bidi.css b/phpBB/styles/prosilver/theme/bidi.css index 79b769b1e7..bcf271b0c8 100644 --- a/phpBB/styles/prosilver/theme/bidi.css +++ b/phpBB/styles/prosilver/theme/bidi.css @@ -1,5 +1,8 @@ -/* RTL definitions ----------------------------------------- */ +/* -------------------------------------------------------------- /* + $Bidi +/* -------------------------------------------------------------- */ +/* stylelint-disable selector-max-compound-selectors */ +/* stylelint-disable selector-no-qualifying-type */ /** * common.css @@ -18,8 +21,8 @@ } .rtl div.rules ul { - margin-left: 0; margin-right: 20px; + margin-left: 0; } /* Main blocks @@ -51,48 +54,52 @@ } /* Horizontal lists -----------------------------------------*/ +---------------------------------------- */ .rtl ul.linklist > li { float: right; margin-right: 0; margin-left: 7px; } -.rtl ul.linklist > li.rightside, .rtl p.rightside, .rtl a.rightside { +.rtl ul.linklist > li.rightside, +.rtl p.rightside, +.rtl a.rightside { + text-align: left; float: left; margin-right: 7px; margin-left: 0; - text-align: left; } -.rtl ul.leftside > li, .rtl ul.rightside > li { +.rtl ul.leftside > li, +.rtl ul.rightside > li { float: left; } .rtl ul.leftside { + text-align: right; float: right; - margin-left: 5px; margin-right: 0; - text-align: right; + margin-left: 5px; } .rtl ul.rightside { + text-align: left; float: left; - margin-left: -5px; margin-right: 5px; - text-align: left; + margin-left: -5px; } /* Bulletin icons for list items -----------------------------------------*/ +---------------------------------------- */ .rtl ul.linklist.bulletin > li:before { - padding-left: 4px; padding-right: 0; + padding-left: 4px; } /* Dropdown menu ---------------------------------------- */ -.rtl .dropdown-container.topic-tools, .rtl .dropdown-container-left { +.rtl .dropdown-container.topic-tools, +.rtl .dropdown-container-left { float: right; } @@ -101,8 +108,8 @@ } .rtl .dropdown-contents > li { - padding-left: 15px; padding-right: 0; + padding-left: 15px; } .rtl .dropdown-nonscroll > li { @@ -110,15 +117,16 @@ } .rtl .dropdown li li { - padding-left: 0; padding-right: 18px; + padding-left: 0; } .rtl .dropdown-extended .header { text-align: right; } -.rtl .dropdown-extended .header .header_settings, .rtl .dropdown-container-right { +.rtl .dropdown-extended .header .header-settings, +.rtl .dropdown-container-right { float: left; } @@ -128,42 +136,42 @@ } /* Notifications ------------------------------------------*/ -.rtl .notification_list ul li img { +----------------------------------------- */ +.rtl .notification-avatar { float: right; - margin-left: 5px; margin-right: 0; + margin-left: 5px; } -.rtl .notification_list div.notifications { - margin-left: 0; +.rtl .notification-menu .notifications { margin-right: 50px; + margin-left: 0; } -.rtl .notification_text { - margin-left: 0; +.rtl .notification-text { margin-right: 58px; + margin-left: 0; } -.rtl .notification_list p.notification-time { +.rtl .notification-time { text-align: left; } /* Responsive breadcrumbs -----------------------------------------*/ +---------------------------------------- */ .rtl .breadcrumbs .crumb { float: right; } /* Table styles -----------------------------------------*/ +---------------------------------------- */ .rtl table.table1 thead th { padding: 0 3px 4px 0; } .rtl table.table1 thead th span { - padding-left: 0; padding-right: 7px; + padding-left: 0; } .rtl table.table1 tbody th { @@ -171,11 +179,27 @@ } /* Specific column styles */ -.rtl table.table1 .name { text-align: right; } -.rtl table.table1 .joined { text-align: right; } -.rtl table.table1 .active { text-align: right; } -.rtl table.table1 .info { text-align: right; } -.rtl table.table1 thead .autocol { padding-left: 0; padding-right: 1em; } +.rtl table.table1 .name { + text-align: right; +} + +.rtl table.table1 .joined { + text-align: right; +} + +.rtl table.table1 .active { + text-align: right; +} + +.rtl table.table1 .info { + text-align: right; +} + +/* Not used anywhere maybe deprecated? */ +.rtl table.table1 thead .autocol { + padding-right: 10px; + padding-left: 0; +} .rtl table.table1 span.rank-img { float: left; @@ -191,6 +215,7 @@ /* Misc layout styles ---------------------------------------- */ + /* column[1-2] styles are containers for two column layouts */ .rtl .column1 { float: right; @@ -204,37 +229,27 @@ /* General classes for placing floating blocks */ .rtl .left-box { - float: right; text-align: right; + float: right; } .rtl .right-box { - float: left; text-align: left; + float: left; } .rtl dl.details dt { + text-align: left; float: right; clear: right; - text-align: left; } .rtl dl.details dd { + float: right; margin-right: 0; margin-left: 0; padding-right: 5px; padding-left: 0; - float: right; -} - -*:first-child+html dl.details dd { - margin-right: 30%; - float: none; -} - -* html dl.details dd { - margin-right: 30%; - float: none; } /* Pagination @@ -249,16 +264,16 @@ } .rtl .pagination > ul { - margin-left: 0; margin-right: 5px; + margin-left: 0; } /* Pagination in viewforum for multipage topics */ .rtl .row .pagination { background-position: 100% 50%; float: left; - padding-left: 0; padding-right: 15px; + padding-left: 0; } .rtl .row .pagination > ul { @@ -269,21 +284,26 @@ direction: ltr; } -.pagination li.page-jump { - margin-left: 5px; +.rtl .pagination li.page-jump { margin-right: 0; + margin-left: 5px; +} + +.rtl .topic-poster { + float: right; + padding-left: 6px; } /* Action Bar styles ---------------------------------------- */ .rtl .action-bar .button { - margin-right: 0; float: right; + margin-right: 0; } .rtl .action-bar > .button { - margin-left: 5px; float: right; + margin-left: 5px; } .rtl .action-bar .dropdown-button-control .button { @@ -294,14 +314,14 @@ /* Miscellaneous styles ---------------------------------------- */ .rtl .quick-links { - margin-left: 7px; margin-right: 0; + margin-left: 7px; } .rtl .header-avatar span:after { float: left; - padding-left: 0; padding-right: 2px; + padding-left: 0; } .rtl .member-search { @@ -318,15 +338,15 @@ unicode-bidi: embed; } -li.breadcrumbs span:first-child > a { +.rtl li.breadcrumbs span:first-child > a { padding-left: 0; } /* Notification mark read link */ .rtl .dropdown-extended a.mark_read { border-radius: 0 3px 3px 0; - left: 0; right: auto; + left: 0; } .rtl .back2top .top { @@ -335,9 +355,10 @@ li.breadcrumbs span:first-child > a { } .rtl .skiplink { + right: -999px; + /* invisible skip link, used for accessibility */ left: 0; - right: -999px; } .rtl a.feed-icon-forum { @@ -347,7 +368,8 @@ li.breadcrumbs span:first-child > a { /** * content.css */ -.rtl ul.topiclist dt, .rtl li.header dt { +.rtl ul.topiclist dt, +.rtl li.header dt { float: right; margin-right: 0; margin-left: -440px; @@ -389,21 +411,21 @@ li.breadcrumbs span:first-child > a { } .rtl ul.topiclist dd { - float: right; border-right-width: 1px; border-right-style: solid; border-left: none; + float: right; } .rtl ul.topiclist dfn { - left: auto; right: -999px; + left: auto; } .rtl ul.topiclist li.row dt a.subforum { - padding-right: 12px; background-position: right; position: static; + padding-right: 12px; } .rtl .forum-image { @@ -412,16 +434,17 @@ li.breadcrumbs span:first-child > a { margin-left: 5px; } -.rtl li.header dt, .rtl li.header dd { +.rtl li.header dt, +.rtl li.header dd { border-right-width: 0; } .rtl li.header dd { - padding-left: 0; padding-right: 1px; + padding-left: 0; } -.rtl dl.row-item{ +.rtl dl.row-item { background-position: 99.5% 50%; } @@ -432,34 +455,39 @@ li.breadcrumbs span:first-child > a { } .rtl dl.row-item dt { - background-position: 99.5% 95%; /* Position of topic icon */ + background-position: 99.5% 95%; /* Position of topic icon */ } .rtl dl.row-item dt .list-inner { + padding-right: 45px; /* Space for folder icon */ padding-left: 5px; - padding-right: 45px; /* Space for folder icon */ } -.rtl dl a.row-item-link { /* topic row icon links */ - display: inline-block; - left: auto; +.rtl dl a.row-item-link { /* topic row icon links */ right: 0; - margin-left: 0; + left: auto; + display: inline-block; margin-right: 2px; + margin-left: 0; } -.rtl dd.lastpost > span, .rtl ul.topiclist dd.info > span, .rtl ul.topiclist dd.time > span, .rtl dd.redirect > span, .rtl dd.moderation > span { - padding-left: 0; +.rtl dd.lastpost > span, +.rtl ul.topiclist dd.info > span, +.rtl ul.topiclist dd.time > span, +.rtl dd.redirect > span, +.rtl dd.moderation > span { padding-right: 5px; + padding-left: 0; } /* Post body styles -----------------------------------------*/ +---------------------------------------- */ .rtl .date { float: left; } -.rtl .postbody, .rtl .postbody h3 { +.rtl .postbody, +.rtl .postbody h3 { float: right; } @@ -473,21 +501,22 @@ li.breadcrumbs span:first-child > a { } .rtl p.post-notice:before { - left: auto; right: 0; + left: auto; } /* Topic review panel -----------------------------------------*/ +---------------------------------------- */ .rtl .topicreview { padding-right: 0; padding-left: 5px; } /* Content container styles -----------------------------------------*/ -.rtl .content ul, .rtl .content ol { - margin-right: 3em; +---------------------------------------- */ +.rtl .content ul, +.rtl .content ol { + margin-right: 40px; margin-left: 0; } @@ -505,23 +534,25 @@ li.breadcrumbs span:first-child > a { } /* BB Code styles -----------------------------------------*/ +---------------------------------------- */ + /* Quote block */ .rtl blockquote { - margin: 0.5em 25px 0 1px; + margin: 5px 25px 0 1px; } +/* Nested quotes */ .rtl blockquote blockquote { - /* Nested quotes */ - margin: 0.5em 15px 0 1px; + margin: 5px 15px 0 1px; } +/* Username/source of quoter */ .rtl blockquote cite { - /* Username/source of quoter */ margin-left: 0; } -.rtl blockquote cite:before, .rtl .uncited:before { +.rtl blockquote cite:before, +.rtl .uncited:before { padding-left: 5px; } @@ -534,11 +565,11 @@ li.breadcrumbs span:first-child > a { } /* Attachments -----------------------------------------*/ +---------------------------------------- */ .rtl .attachbox { float: right; - margin: 5px 0 5px 5px; clear: right; + margin: 5px 0 5px 5px; } .rtl .attachbox dd { @@ -554,16 +585,16 @@ li.breadcrumbs span:first-child > a { } /* Post poll styles -----------------------------------------*/ +---------------------------------------- */ .rtl fieldset.polls dt { text-align: right; - float: right; border-left: none; + float: right; } .rtl fieldset.polls dd { - float: right; border-right: none; + float: right; margin-right: 0; } @@ -571,18 +602,23 @@ li.breadcrumbs span:first-child > a { text-align: left; } -.rtl .pollbar1, .rtl .pollbar2, .rtl .pollbar3, .rtl .pollbar4, .rtl .pollbar5 { +.rtl .pollbar1, +.rtl .pollbar2, +.rtl .pollbar3, +.rtl .pollbar4, +.rtl .pollbar5 { + border-right: none; border-left-width: 1px; border-left-style: solid; - border-right: none; } /* Poster profile block -----------------------------------------*/ +---------------------------------------- */ .rtl .postprofile { border-width: 0 1px 0 0; float: left; -/* text-align: right; */ + + /* text-align: right; */ } .rtl .pm .postprofile { @@ -591,19 +627,16 @@ li.breadcrumbs span:first-child > a { border-left: none; } -.rtl .postprofile dd, .rtl .postprofile dt { - margin-left: 0; +.rtl .postprofile dd, +.rtl .postprofile dt { margin-right: 8px; + margin-left: 0; } .rtl .postprofile .avatar { float: right; } -.rtl .online { - background-position: 0 0; -} - .rtl dl.pmlist dd { margin-right: 61% !important; margin-left: 0 !important; @@ -627,8 +660,8 @@ li.breadcrumbs span:first-child > a { } .rtl .has-profile .post-buttons { - left: 0; right: auto; + left: 0; } .rtl .post-buttons li { @@ -636,11 +669,11 @@ li.breadcrumbs span:first-child > a { } /* Poster contact icons - ----------------------------------------*/ + ---------------------------------------- */ .rtl .contact-icons a { + border-right: none; border-left-width: 1px; border-left-style: dotted; - border-right: none; float: right; } @@ -651,12 +684,13 @@ li.breadcrumbs span:first-child > a { /** * cp.css */ + /* Control Panel Styles ---------------------------------------- */ /* Main CP box -----------------------------------------*/ +---------------------------------------- */ .rtl .cp-menu { float: right; } @@ -666,7 +700,7 @@ li.breadcrumbs span:first-child > a { } .rtl .cp-main .panel ol { - margin-right: 2em; + margin-right: 22px; margin-left: 0; } @@ -675,15 +709,15 @@ li.breadcrumbs span:first-child > a { margin-left: 0; } -.tabs-container h2 { +.rtl .tabs-container h2 { float: right; } /* CP tabbed menu -----------------------------------------*/ +---------------------------------------- */ .rtl .tabs { - margin-left: 0; margin-right: 7px; + margin-left: 0; } .rtl .tabs .tab { @@ -691,12 +725,12 @@ li.breadcrumbs span:first-child > a { } .rtl .tabs .tab > a { - margin-left: 1px; margin-right: 0; + margin-left: 1px; } /* Mini tabbed menu used in MCP -----------------------------------------*/ +---------------------------------------- */ .rtl .minitabs { float: left; margin-right: 0; @@ -713,7 +747,7 @@ li.breadcrumbs span:first-child > a { } /* Responsive tabs -----------------------------------------*/ +---------------------------------------- */ .rtl .tabs .dropdown { margin-left: -2px; } @@ -730,23 +764,14 @@ li.breadcrumbs span:first-child > a { text-align: right; } -/* Responsive *CP navigation -----------------------------------------*/ -@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) -{ - .rtl .cp-menu, .rtl .navigation, .rtl .cp-main { - float: none; - } -} - /* UCP navigation menu -----------------------------------------*/ +---------------------------------------- */ /* Preferences pane layout -----------------------------------------*/ +---------------------------------------- */ .rtl .cp-main h2 { - margin-left: 0; margin-right: 10px; + margin-left: 0; } /* Friends list */ @@ -755,7 +780,7 @@ li.breadcrumbs span:first-child > a { } /* PM Styles -----------------------------------------*/ +---------------------------------------- */ /* PM panel adjustments */ .rtl .reply-all a.right { @@ -780,8 +805,8 @@ li.breadcrumbs span:first-child > a { border-right-width: 10px; border-right-style: solid; border-left-width: 0; - padding-left: 0; padding-right: 3px; + padding-left: 0; } /* Avatar gallery */ @@ -789,25 +814,16 @@ li.breadcrumbs span:first-child > a { float: right; } -/* Responsive *CP navigation -----------------------------------------*/ -@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) -{ - .rtl .cp-menu, .rtl .navigation, .rtl .cp-main { - float: none; - } -} - /** * forms.css */ /* General form styles -----------------------------------------*/ +---------------------------------------- */ .rtl option { padding-right: 0; - padding-left: 1em; + padding-left: 11px; } .rtl label { @@ -818,26 +834,26 @@ li.breadcrumbs span:first-child > a { /* Definition list layout for forms ---------------------------------------- */ .rtl fieldset dt { - float: right; text-align: right; + float: right; } .rtl fieldset dd { - margin-left: 0; margin-right: 41%; + margin-left: 0; } /* Specific layout 1 */ .rtl fieldset.fields1 dt { - border-left-width: 0; border-right-width: 1px; + border-left-width: 0; } .rtl fieldset.fields1 dd { - margin-right: 15em; - margin-left: 0; border-right-width: 0; border-left-width: 1px; + margin-right: 165px; + margin-left: 0; } /* Specific layout 2 */ @@ -847,10 +863,10 @@ li.breadcrumbs span:first-child > a { } .rtl fieldset.fields2 dd { - margin-right: 16em; - margin-left: 0; - border-left-width: 1px; border-right-width: 0; + border-left-width: 1px; + margin-right: 176px; + margin-left: 0; } /* Form elements */ @@ -858,26 +874,27 @@ li.breadcrumbs span:first-child > a { text-align: right; } -.rtl dd input, .rtl dd textarea { - margin-left: 3px; +.rtl dd input, +.rtl dd textarea { margin-right: 0; + margin-left: 3px; } /* Quick-login on index page */ .rtl fieldset.quick-login input.inputbox { - margin-left: 5px; margin-right: 0; + margin-left: 5px; } .rtl fieldset.quick-login label { - padding-left: 2px; padding-right: 0; + padding-left: 2px; } /* Display options on viewtopic/viewforum pages */ .rtl fieldset.display-options label { - padding-left: 2px; padding-right: 0; + padding-left: 2px; } .rtl .dropdown fieldset.display-options label { @@ -887,16 +904,16 @@ li.breadcrumbs span:first-child > a { /* Display actions for ucp and mcp pages */ .rtl fieldset.display-actions { text-align: left; - padding-left: 1em; padding-right: 0; + padding-left: 11px; } .rtl fieldset.display-actions label { - padding-left: 2px; padding-right: 0; + padding-left: 2px; } -/* MCP forum selection*/ +/* MCP forum selection */ .rtl fieldset.forum-selection { float: left; } @@ -906,7 +923,7 @@ li.breadcrumbs span:first-child > a { } /* Posting page styles -----------------------------------------*/ +---------------------------------------- */ /* Emoticons panel */ .rtl .smiley-box { @@ -922,22 +939,22 @@ li.breadcrumbs span:first-child > a { } .rtl .search-box .inputbox { - border-left-width: 0; border-right-width: 1px; + border-left-width: 0; border-radius: 0 4px 4px 0; float: right; padding: 3px; } .rtl .button-search, -.button-search-end { +.rtl .button-search-end { float: right; } .rtl .button-search-end { - border-radius: 4px 0 0 4px; - border-left-width: 1px; border-right-width: 0; + border-left-width: 1px; + border-radius: 4px 0 0 4px; } .rtl .search-header .button-search-end { @@ -955,7 +972,10 @@ li.breadcrumbs span:first-child > a { ---------------------------------------- */ /** Reference: Bug #27155 */ -.rtl .wrap, .rtl .headerbar, .rtl .site-description, .rtl .navbar { +.rtl .wrap, +.rtl .headerbar, +.rtl .site-description, +.rtl .navbar { position: relative; } @@ -967,124 +987,4 @@ li.breadcrumbs span:first-child > a { float: left; } -/** -* responsive.css -*/ -@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) -{ - /* .topiclist lists - ----------------------------------------*/ - .rtl ul.topiclist li.header dt, .rtl ul.topiclist li.header dt .list-inner { - margin-left: 0 !important; - padding-left: 0; - } - - .rtl ul.topiclist dt, .rtl ul.topiclist dt .list-inner, - .rtl ul.topiclist.missing-column dt, .rtl ul.topiclist.missing-column dt .list-inner, - .rtl ul.topiclist.two-long-columns dt, .rtl ul.topiclist.two-long-columns dt .list-inner, - .rtl ul.topiclist.two-columns dt, .rtl ul.topiclist.two-columns dt .list-inner { - margin-left: 0; - } - - .rtl ul.topiclist dt .list-inner.with-mark { - padding-left: 34px; - } - - /* Forums and topics lists - ----------------------------------------*/ - .rtl ul.topiclist.forums dt { - margin-left: -250px; - } - .rtl ul.topiclist.forums dt .list-inner { - margin-left: 250px; - } - - .rtl ul.topiclist dd.mark { - left: 5px; - right: auto; - text-align: right; - } - - .rtl table.responsive.show-header thead, .rtl table.responsive.show-header th:first-child { - text-align: right !important; - } - - .rtl table.responsive td { - text-align: right !important; - } - - /* User profile - ----------------------------------------*/ - .rtl .column1, .rtl .column2, .rtl .left-box.profile-details { - float: none; - } - - /* Post - ----------------------------------------*/ - .rtl .postprofile, .rtl .postbody, .rtl .search .postbody { - float: none; - } - - .rtl .post .postprofile { - border-width: 0 0 1px 0; - } - - .rtl .postprofile dt, .rtl .postprofile dd.profile-rank, .rtl .search .postprofile dd { - margin: 0; - } - - .rtl .postprofile .avatar { - margin-left: 5px; - margin-right: 0; - } - - .rtl .has-profile .post-buttons { - left: 20px; - } - - /* Forms - ----------------------------------------*/ - .rtl fieldset dt, .rtl fieldset.fields1 dt, .rtl fieldset.fields2 dt { - float: none; - } - - .rtl fieldset dd, .rtl fieldset.fields1 dd, .rtl fieldset.fields2 dd { - margin-right: 20px; - } -} - -@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) -{ - /* .topiclist lists - ----------------------------------------*/ - .rtl ul.topiclist.forums dt { - margin-left: 0; - } - - .rtl ul.topiclist.forums dt .list-inner { - margin-left: 0; - } -} - -@media only screen and (max-width: 500px), only screen and (max-device-width: 500px) -{ - .rtl dl.details dt, .rtl dl.details dd { - float: none; - text-align: right; - } - - .rtl dl.details dd { - margin-left: 0; - margin-right: 20px; - } - - .captcha-panel dd.captcha { - margin-right: 0; - } - - .rtl p.responsive-center { - float: none; - text-align: center; - margin-bottom: 5px; - } -} +/* stylelint-enable selector-no-qualifying-type */ diff --git a/phpBB/styles/prosilver/theme/buttons.css b/phpBB/styles/prosilver/theme/buttons.css index 575c41aaef..3a22537578 100644 --- a/phpBB/styles/prosilver/theme/buttons.css +++ b/phpBB/styles/prosilver/theme/buttons.css @@ -1,31 +1,31 @@ -/* Button Styles ----------------------------------------- */ +/* -------------------------------------------------------------- /* + $Buttons +/* -------------------------------------------------------------- */ .button { - display: inline-block; - padding: 2px 8px; + font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica; font-size: 13px; font-weight: 600; - font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica; line-height: 1.4; text-align: center; - white-space: nowrap; vertical-align: middle; - -ms-touch-action: manipulation; - touch-action: manipulation; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + white-space: nowrap; border: 1px solid transparent; border-radius: 4px; + display: inline-block; + padding: 2px 8px; + cursor: pointer; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .button:focus, .button:hover { - text-decoration: none; - outline: none; + text-decoration: none; + outline: none; } .caret { @@ -39,11 +39,21 @@ } /* Posting page styles -----------------------------------------*/ +---------------------------------------- */ +.button-form, +.button-form-bold { + font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; + border-radius: 0; +} + +.button-form-bold { + font-weight: 700; +} + .button-search, -.button-search-end { - float: left; +.button-search-end { border-radius: 0; + float: left; margin: 0; padding: 2px 5px; } @@ -65,27 +75,28 @@ } .button-icon-only { - padding-left: 3px; padding-right: 3px; + padding-left: 3px; } /* Poster contact icons -----------------------------------------*/ +---------------------------------------- */ .contact-icons.dropdown-contents { + font-size: 0; min-width: 0; padding: 0; - font-size: 0; } .contact-icon { background-repeat: no-repeat; display: block; - height: 16px; width: 16px; + height: 16px; } + .contact-icons a { - border-bottom: 1px dotted; border-right: 1px dotted; + border-bottom: 1px dotted; display: block; float: left; padding: 8px; @@ -107,16 +118,15 @@ --------------------------------------------- */ .post-buttons { float: right; - list-style: none; margin-top: 2px; + list-style: none; } .has-profile .post-buttons { - float: none; position: absolute; - margin: 0; - right: 0; top: 5px; + right: 0; + margin: 0; } .post-buttons > li { @@ -124,9 +134,10 @@ margin-right: 3px; } -.post-buttons .button, .format-buttons .button { - padding-left: 3px; +.post-buttons .button, +.format-buttons .button { padding-right: 3px; + padding-left: 3px; } .hastouch .post-buttons { @@ -143,27 +154,33 @@ } .post-buttons .dropdown a { - display: block; - font-size: 1.2em; + font-size: 13px; text-align: right; + display: block; } .hasjs .postbody .post-buttons { max-width: 40%; } +/* Format buttons +--------------------------------------------- */ +.format-buttons .button { + margin-bottom: 3px; +} + /* Browser-specific tweaks */ button::-moz-focus-inner { + border: 0; padding: 0; - border: 0 } /* Deprecated as of version 3.2 --------------------------------------------------*/ +------------------------------------------------- */ .small-icon { - background-position: 0 50%; - background-repeat: no-repeat; background-image: none; + background-repeat: no-repeat; + background-position: 0 50%; } .dropdown .small-icon { @@ -175,9 +192,12 @@ button::-moz-focus-inner { padding: 0 0 0 18px; } + +/* stylelint-disable selector-no-qualifying-type */ ul.linklist.bulletin > li.small-icon:before { display: none; } +/* stylelint-enable selector-no-qualifying-type */ .dropdown .small-icon > a { display: block; @@ -188,6 +208,6 @@ ul.linklist.bulletin > li.small-icon:before { } .rtl .small-icon > a { - padding-left: 0; padding-right: 19px; + padding-left: 0; } diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index 04a895873c..3de77eb13d 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -1,115 +1,121 @@ -/* --------------------------------------------------------------- -Colours and backgrounds for common.css --------------------------------------------------------------- */ +/* -------------------------------------------------------------- /* + $Colours +/* -------------------------------------------------------------- * -html, body { - color: #536482; - background-color: #F5F7FA; +/* stylelint-disable selector-max-compound-selectors */ +/* stylelint-disable selector-no-qualifying-type */ + +/* colours and backgrounds for common.css */ +html, +body { + background-color: #f5f5f5; + color: #47536b; +} + +.wrap { + background-color: #ffffff; + border-color: #ededed; } h1 { - color: #FFFFFF; + color: #ffffff; } h2 { - color: #28313F; + color: #29303d; } h3 { - border-bottom-color: #CCCCCC; - color: #115098; + border-bottom-color: #dedede; + color: #0059b3; } hr { - border-color: #FFFFFF; - border-top-color: #CCCCCC; + border-color: #ffffff; + border-top-color: #dedede; } -/* --------------------------------------------------------------- -Colours and backgrounds for links.css --------------------------------------------------------------- */ - -a { color: #105289; } -a:hover { color: #D31141; } +/* colours and backgrounds for links.css */ +a { + color: #0f4d8a; +} -/* Links on gradient backgrounds */ -.forumbg .header a, .forabg .header a, th a { - color: #FFFFFF; +a:hover { + color: #d41142; } -.forumbg .header a:hover, .forabg .header a:hover, th a:hover { - color: #A8D8FF; +/* links on gradient backgrounds */ +.forumbg .header a, +.forabg .header a, +th a { + color: #ffffff; } -/* Notification mark read link */ -.dropdown-extended a.mark_read { - background-color: #FFFFFF; +.forumbg .header a:hover, +.forabg .header a:hover, +th a:hover { + color: #80bfff; } -/* Post body links */ +/* post body links */ .postlink { - border-bottom-color: #368AD2; - color: #368AD2; + border-bottom-color: #2d80d2; + color: #2d80d2; } .postlink:visited { - border-bottom-color: #5D8FBD; - color: #5D8FBD; + border-bottom-color: #5380ac; + color: #5380ac; } .postlink:hover { - background-color: #D0E4F6; - color: #0D4473; + background-color: #d4e6f7; + color: #164069; } -.signature a, .signature a:hover { +.signature a, +.signature a:hover { background-color: transparent; } -/* Back to top of page */ +/* back to top of page */ .top i { - color: #999999; + color: #9e9e9e; } -/* Arrow links */ -.arrow-left:hover, .arrow-right:hover { - color: #368AD2; -} - -/* Round cornered boxes and backgrounds ----------------------------------------- */ -.wrap { - background-color: #FFF; - border-color: #E6E9ED; +/* arrow links */ +.arrow-left:hover, +.arrow-right:hover { + color: #2d80d2; } +/* round cornered boxes and backgrounds */ .headerbar { - color: #FFFFFF; + color: #ffffff; } -.headerbar, .forumbg { - background-color: #12A3EB; - background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%); - background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 92px,#12A3EB 100%); +.headerbar, +.forumbg { + background-color: #13a4ec; + background-image: -webkit-gradient(linear, left top, left bottom, from(#80d5ff), color-stop(0.1%, #0077b3), color-stop(30%, #13a4ec), to(#13a4ec)); + background-image: linear-gradient(to bottom, #80d5ff 0%, #0077b3 0.1%, #13a4ec 30%, #13a4ec 100%); background-repeat: repeat-x; } .forabg { - background-color: #0076B1; - background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #12A3EB 2px, #0076B1 92px, #0076B1 100%); - background-image: linear-gradient(to bottom, #6ACEFF 0%,#12A3EB 2px,#0076B1 92px,#0076B1 100%); + background-color: #0077b3; + background-image: -webkit-gradient(linear, left top, left bottom, from(#80d5ff), color-stop(0.1%, #13a4ec), color-stop(30%, #0077b3), to(#0077b3)); + background-image: linear-gradient(to bottom, #80d5ff 0%, #13a4ec 0.1%, #0077b3 30%, #0077b3 100%); background-repeat: repeat-x; } .navbar { - background-color: #CADCEB; + background-color: #c9dee8; } .panel { - background-color: #ECF1F3; - color: #28313F; + background-color: #f0f3f5; + color: #29303d; } .post:target .content { @@ -121,226 +127,216 @@ a:hover { color: #D31141; } } .bg1 { - background-color: #ECF3F7; + background-color: #edf4f7; } -table.zebra-list tr:nth-child(odd) td, ul.zebra-list li:nth-child(odd) { - background-color: #ECF3F7; +table.zebra-list tr:nth-child(odd) td, +ul.zebra-list li:nth-child(odd) { + background-color: #edf4f7; } .bg2 { - background-color: #E1EBF2; -} - -table.zebra-list tr:nth-child(even) td, ul.zebra-list li:nth-child(even) { - background-color: #E1EBF2; -} - -.bg3 { - background-color: #CADCEB; + background-color: #dbe9f0; } -.ucprowbg { - background-color: #DCDEE2; +table.zebra-list tr:nth-child(even) td, +ul.zebra-list li:nth-child(even) { + background-color: #dbe9f0; } -.fieldsbg { - background-color: #E7E8EA; +.bg3 { + background-color: #c9dee8; } -.site_logo { - background-image: url("./images/site_logo.svg"); -} - -/* Horizontal lists -----------------------------------------*/ - +/* horizontal lists */ ul.navlinks { - border-top-color: #FFFFFF; + border-top-color: #ffffff; } -/* Table styles -----------------------------------------*/ +/* table styles */ table.table1 thead th { - color: #FFFFFF; + color: #ffffff; } table.table1 tbody tr { - border-color: #BFC1CF; + border-color: #c9dee8; } -table.table1 tbody tr:hover, table.table1 tbody tr.hover { - background-color: #CFE1F6; - color: #000; +table.table1 tbody tr:hover, +table.table1 tbody tr.hover { + background-color: #d4e6f7; + color: #000000; } table.table1 td { - color: #536482; + color: #47536b; } table.table1 tbody td { - border-top-color: #FAFAFA; + border-top-color: #fafafa; } table.table1 tbody th { + background-color: #ffffff; border-bottom-color: #000000; - color: #333333; - background-color: #FFFFFF; + color: #212121; } table.info tbody th { color: #000000; } -/* Misc layout styles ----------------------------------------- */ +/* misc layout styles */ dl.details dt { color: #000000; } dl.details dd { - color: #536482; + color: #47536b; } -.sep { - color: #1198D9; +/* icon styles */ +.icon.icon-blue, +a:hover .icon.icon-blue { + color: #0059b3; } -/* Icon styles ----------------------------------------- */ -.icon.icon-blue, a:hover .icon.icon-blue { - color: #196db5; +.icon.online { + color: #85de39; } -.icon.icon-green, a:hover .icon.icon-green{ - color: #1b9A1B; +.icon.icon-green, +a:hover .icon.icon-green { + color: #4db355; } -.icon.icon-red, a:hover .icon.icon-red{ - color: #BC2A4D; +.icon.icon-red, +a:hover .icon.icon-red { + color: #d41142; } -.icon.icon-orange, a:hover .icon.icon-orange{ - color: #FF6600; +.icon.icon-orange, +a:hover .icon.icon-orange { + color: #ff9500; } -.icon.icon-bluegray, a:hover .icon.icon-bluegray{ - color: #536482; +.icon.icon-bluegray, +a:hover .icon.icon-bluegray { + color: #47536b; } -.icon.icon-gray, a:hover .icon.icon-gray{ - color: #777777; +.icon.icon-gray, +a:hover .icon.icon-gray { + color: #757575; } -.icon.icon-lightgray, a:hover .icon.icon-lightgray{ - color: #999999; +.icon.icon-lightgray, +a:hover .icon.icon-lightgray { + color: #9e9e9e; } -.icon.icon-black, a:hover .icon.icon-black{ - color: #333333; +.icon.icon-black, +a:hover .icon.icon-black { + color: #212121; } .alert_close .icon:before { - background-color: #FFFFFF; + background-color: #ffffff; } -/* Jumpbox */ +/* jumpbox */ .jumpbox .dropdown li { - border-top-color: #CCCCCC; + border-top-color: #dedede; } .jumpbox-cat-link { - background-color: #0076b1; - border-top-color: #0076B1; - color: #FFFFFF; + background-color: #0077b3; + border-top-color: #0077b3; + color: #ffffff; } -.jumpbox-cat-link:hover { - background-color: #12A3EB; - border-top-color: #12A3EB; - color: #FFFFFF; +.jumpbox-cat-link:hover, +.jumpbox-cat-link:focus { + background-color: #13a4ec; + border-top-color: #13a4ec; + color: #ffffff; } .jumpbox-forum-link { - background-color: #E1EBF2; + background-color: #dbe9f0; } .jumpbox-forum-link:hover { - background-color: #F6F4D0; + background-color: #fffbcc; } .jumpbox .dropdown .pointer-inner { - border-color: #E1EBF2 transparent; + border-color: #dbe9f0 transparent; } .jumpbox-sub-link { - background-color: #E1EBF2; + background-color: #dbe9f0; } .jumpbox-sub-link:hover { - background-color: #F1F8FF; + background-color: #e6f7ff; } -/* Miscellaneous styles ----------------------------------------- */ - +/* miscellaneous styles */ .copyright { - color: #555555; + color: #424242; } .error { - color: #BC2A4D; + color: #d41142; } .reported { - background-color: #F7ECEF; + background-color: #f7edf0; } li.reported:hover { - background-color: #ECD5D8 !important; + background-color: #f0dbe0 !important; } -.sticky, .announce { - /* you can add a background for stickies and announcements*/ + +.sticky, +.announce { + /* you can add a background for stickies and announcements */ } div.rules { - background-color: #ECD5D8; - color: #BC2A4D; + background-color: #f0dbe0; + color: #d41142; } p.post-notice { - background-color: #ECD5D8; + background-color: #f0dbe0; background-image: none; } -/* --------------------------------------------------------------- -Colours and backgrounds for content.css --------------------------------------------------------------- */ - +/* colours and backgrounds for content.css */ ul.forums { - background-color: #EEF5F9; /* Old browsers */ /* FF3.6+ */ - background-image: -webkit-linear-gradient(top, #D2E0EB 0%, #EEF5F9 100%); - background-image: linear-gradient(to bottom, #D2E0EB 0%,#EEF5F9 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D2E0EB', endColorstr='#EEF5F9',GradientType=0 ); /* IE6-9 */ + background-color: #edf4f7; + background-image: -webkit-gradient(linear, left top, left bottom, from(#b8d3e0), to(#edf4f7)); + background-image: linear-gradient(to bottom, #b8d3e0 0%, #edf4f7 100%); } -ul.topiclist li { - color: #4C5D77; +ul.topiclist > li { + color: #47536b; } ul.topiclist dd { - border-left-color: #FFFFFF; + border-left-color: #ffffff; } .rtl ul.topiclist dd { - border-right-color: #FFFFFF; + border-right-color: #ffffff; border-left-color: transparent; } li.row { - border-top-color: #FFFFFF; - border-bottom-color: #00608F; + border-top-color: #ffffff; + border-bottom-color: #0077b3; } li.row strong { @@ -348,150 +344,143 @@ li.row strong { } li.row:hover { - background-color: #F6F4D0; + background-color: #fffbcc; } li.row:hover dd { - border-left-color: #CCCCCC; + border-left-color: #dedede; } .rtl li.row:hover dd { - border-right-color: #CCCCCC; + border-right-color: #dedede; border-left-color: transparent; } -li.header dt, li.header dd { - color: #FFFFFF; +li.header dt, +li.header dd { + color: #ffffff; } -/* Post body styles -----------------------------------------*/ +/* post body styles */ .postbody { - color: #333333; + color: #212121; } -/* Content container styles -----------------------------------------*/ +/* content container styles */ .content { - color: #333333; + color: #212121; } -.content h2, .panel h2 { - color: #115098; - border-bottom-color: #CCCCCC; +.content h2, +.panel h2 { + border-bottom-color: #dedede; + color: #0059b3; } dl.faq dt { - color: #333333; + color: #212121; } .posthilit { - background-color: #F3BFCC; - color: #BC2A4D; + background-color: #f4becb; + color: #d41142; } -.announce, .unreadpost { - /* Highlight the announcements & unread posts box */ +.announce, +.unreadpost { + /* highlight the announcements & unread posts box */ } -/* Post signature */ +/* post signature */ .signature { - border-top-color: #CCCCCC; + border-top-color: #dedede; } -/* Post noticies */ +/* post noticies */ .notice { - border-top-color: #CCCCCC; + border-top-color: #dedede; } -/* BB Code styles -----------------------------------------*/ -/* Quote block */ +/* bb code styles */ + +/* quote block */ blockquote { - background-color: #EBEADD; - border-color:#DBDBCE; + background-color: #f4f1d7; + border-color: #f1efda; } blockquote blockquote { - /* Nested quotes */ - background-color:#EFEED9; + /* nested quotes */ + background-color: #f7f4d4; } blockquote blockquote blockquote { - /* Nested quotes */ - background-color: #EBEADD; + /* nested quotes */ + background-color: #f4f1d7; } -/* Code block */ +/* code block */ .codebox { - background-color: #FFFFFF; - border-color: #C9D2D8; + background-color: #ffffff; + border-color: #c0d3dd; } .codebox p { - border-bottom-color: #CCCCCC; + border-bottom-color: #dedede; } .codebox code { - color: #2E8B57; + color: #4db355; } -/* Attachments -----------------------------------------*/ +/* attachments */ .attachbox { - background-color: #FFFFFF; - border-color: #C9D2D8; -} - -.pm-message .attachbox { - background-color: #F2F3F3; + background-color: #ffffff; + border-color: #c0d3dd; } .attachbox dd { - border-top-color: #C9D2D8; + border-top-color: #c0d3dd; } .attachbox p { - color: #666666; + color: #616161; } .attachbox p.stats { - color: #666666; + color: #616161; } .attach-image img { - border-color: #999999; + border-color: #9e9e9e; } -/* Inline image thumbnails */ - +/* inline image thumbnails */ dl.file dd { - color: #666666; + color: #616161; } dl.thumbnail img { - border-color: #666666; - background-color: #FFFFFF; + background-color: #ffffff; + border-color: #616161; } dl.thumbnail dd { - color: #666666; + color: #616161; } dl.thumbnail dt a:hover { - background-color: #EEEEEE; + background-color: #ededed; } dl.thumbnail dt a:hover img { - border-color: #368AD2; + border-color: #2d80d2; } -/* Post poll styles -----------------------------------------*/ - +/* post poll styles */ fieldset.polls dl { - border-top-color: #DCDEE2; - color: #666666; + border-top-color: #c9dee8; + color: #616161; } fieldset.polls dl.voted { @@ -499,477 +488,491 @@ fieldset.polls dl.voted { } fieldset.polls dd div { - color: #FFFFFF; + color: #ffffff; } -.rtl .pollbar1, .rtl .pollbar2, .rtl .pollbar3, .rtl .pollbar4, .rtl .pollbar5 { +.rtl .pollbar1, +.rtl .pollbar2, +.rtl .pollbar3, +.rtl .pollbar4, +.rtl .pollbar5 { border-right-color: transparent; } .pollbar1 { - background-color: #AA2346; - border-bottom-color: #74162C; - border-right-color: #74162C; + background-color: #b31a40; + border-right-color: #821732; + border-bottom-color: #821732; } .rtl .pollbar1 { - border-left-color: #74162C; + border-left-color: #821732; } .pollbar2 { - background-color: #BE1E4A; - border-bottom-color: #8C1C38; - border-right-color: #8C1C38; + background-color: #cf1745; + border-right-color: #9c1638; + border-bottom-color: #9c1638; } .rtl .pollbar2 { - border-left-color: #8C1C38; + border-left-color: #9c1638; } .pollbar3 { - background-color: #D11A4E; - border-bottom-color: #AA2346; - border-right-color: #AA2346; + background-color: #ec1349; + border-right-color: #cf1745; + border-bottom-color: #cf1745; } .rtl .pollbar3 { - border-left-color: #AA2346; + border-left-color: #cf1745; } .pollbar4 { - background-color: #E41653; - border-bottom-color: #BE1E4A; - border-right-color: #BE1E4A; + background-color: #f42559; + border-right-color: #ec1349; + border-bottom-color: #ec1349; } .rtl .pollbar4 { - border-left-color: #BE1E4A; + border-left-color: #ec1349; } .pollbar5 { - background-color: #F81157; - border-bottom-color: #D11A4E; - border-right-color: #D11A4E; + background-color: #fa3869; + border-right-color: #f42559; + border-bottom-color: #f42559; } .rtl .pollbar5 { - border-left-color: #D11A4E; + border-left-color: #f42559; } -/* Poster profile block -----------------------------------------*/ +/* poster profile block */ .postprofile { - color: #666666; - border-color: #FFFFFF; + border-color: #ffffff; + color: #616161; } .pm .postprofile { - border-color: #DDDDDD; + border-color: #dedede; } .postprofile strong { color: #000000; } -.online { - background-image: url("./en/icon_user_online.gif"); +dd.profile-warnings { + color: #d41142; } -dd.profile-warnings { - color: #BC2A4D; +/* Show scrollbars for items with overflow on iOS devices */ +.postbody .content::-webkit-scrollbar, +.topicreview::-webkit-scrollbar, +.post_details::-webkit-scrollbar, +.codebox code::-webkit-scrollbar, +.attachbox dd::-webkit-scrollbar, +.attach-image::-webkit-scrollbar, +.dropdown-extended ul::-webkit-scrollbar { + background: rgba(0, 0, 0, 0.1); +} + +.postbody .content::-webkit-scrollbar-thumb, +.topicreview::-webkit-scrollbar-thumb, +.post_details::-webkit-scrollbar-thumb, +.codebox code::-webkit-scrollbar-thumb, +.attachbox dd::-webkit-scrollbar-thumb, +.attach-image::-webkit-scrollbar-thumb, +.dropdown-extended ul::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.3); } -/* --------------------------------------------------------------- -Colours and backgrounds for buttons.css --------------------------------------------------------------- */ +/* colours and backgrounds for buttons.css */ .button { - border-color: #C7C3BF; - background-color: #E9E9E9; /* Old browsers */ /* FF3.6+ */ - background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #E9E9E9 100%); - background-image: linear-gradient(to bottom, #FFFFFF 0%,#E9E9E9 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#E9E9E9',GradientType=0 ); /* IE6-9 */ - box-shadow: 0 0 0 1px #FFFFFF inset; - -webkit-box-shadow: 0 0 0 1px #FFFFFF inset; - color: #D31141; + background-color: #e0e0e0; + background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e0e0e0)); + background-image: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%); + border-color: #bdbdbd; + -webkit-box-shadow: 0 0 0 1px #ffffff inset; + box-shadow: 0 0 0 1px #ffffff inset; + color: #d41142; } .button:hover, .button:focus { - border-color: #0A8ED0; - background-color: #FFFFFF; /* Old browsers */ /* FF3.6+ */ - background-image: -webkit-linear-gradient(top, #E9E9E9 0%, #FFFFFF 100%); - background-image: linear-gradient(to bottom, #E9E9E9 0%,#FFFFFF 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E9E9E9', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */ - text-shadow: 1px 1px 0 #FFFFFF, -1px -1px 0 #FFFFFF, -1px -1px 0 rgba(188, 42, 77, 0.2); + background-image: -webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#ffffff)); + background-image: linear-gradient(to bottom, #e0e0e0 0%, #ffffff 100%); + border-color: #0077b3; + text-shadow: 1px 1px 0 #ffffff, -1px -1px 0 #ffffff, -1px -1px 0 rgba(189, 40, 77, 0.2); + color: #d41142; } - .button .icon, .button-secondary { - color: #8f8f8f; + color: #9e9e9e; +} + +.button-form, +.button-form-bold { + border-color: #757575; + -webkit-box-shadow: none; + box-shadow: none; + color: #212121; +} + +.button-form:hover, +.button-form-bold:hover { + border-color: #d41142; + text-shadow: none; + color: #d41142; +} + +.button-form:focus, +.button-form-bold:focus { + border-color: #0077b3; + text-shadow: none; + color: #0077b3; } .button-secondary:focus, .button-secondary:hover, .button:focus .icon, .button:hover .icon { - color: #0A8ED0; + color: #0077b3; } .button-search:hover, .button-search-end:hover { - border-color: #C7C3BF; + border-color: #bdbdbd; } -.caret { border-color: #DADADA; } -.caret { border-color: #C7C3BF; } +.caret { + border-color: #bdbdbd; +} -.contact-icons a { border-color: #DCDCDC; } -.contact-icons a:hover { background-color: #F2F6F9; } +.contact-icons a { + border-color: #dedede; +} -/* Pagination ----------------------------------------- */ +.contact-icons a:hover { + background-color: #ededed; +} +/* pagination */ .pagination li a { - background: #ECEDEE; + background: #ededed; + -webkit-filter: none; filter: none; - border-color: #B4BAC0; - box-shadow: none; + border-color: #bdbdbd; -webkit-box-shadow: none; - color: #5C758C; + box-shadow: none; + color: #9e9e9e; } .pagination li.ellipsis span { background: transparent; - color: #000000; + color: #000000; } .pagination li.active span { - background: #4692BF; - border-color: #4692BF; - color: #FFFFFF; + background: #2d80d2; + border-color: #2d80d2; + color: #ffffff; } -.pagination li a:hover, .pagination li a:hover .icon, .pagination .dropdown-visible a.dropdown-trigger, .nojs .pagination .dropdown-container:hover a.dropdown-trigger { - background: #368AD2; - border-color: #368AD2; - filter: none; - color: #FFFFFF; +.pagination li a:hover, +.pagination li a:hover .icon, +.pagination .dropdown-visible a.dropdown-trigger, +.nojs .pagination .dropdown-container:hover a.dropdown-trigger { + background: #2d80d2; + border-color: #2d80d2; text-shadow: none; + color: #ffffff; } -/* Search box ---------------------------------------------- */ - +/* search box */ .search-box .inputbox, .search-box .inputbox:hover, .search-box .inputbox:focus { - border-color: #C7C3BF; + border-color: #bdbdbd; } .search-header { - box-shadow: 0 0 10px #0075B0; + -webkit-box-shadow: 0 0 10px #0077b3; + box-shadow: 0 0 10px #0077b3; } .search-results li:hover, .search-results li.active { - background-color: #CFE1F6; -} - -/* Icon images ----------------------------------------- */ - -.contact-icon { background-image: url("./images/icons_contact.png"); } - -/* Profile & navigation icons */ -.pm-icon { background-position: 0 0; } -.email-icon { background-position: -21px 0; } -.jabber-icon { background-position: -80px 0; } -.phpbb_icq-icon { background-position: -61px 0 ; } -.phpbb_wlm-icon { background-position: -182px 0; } -.phpbb_aol-icon { background-position: -244px 0; } -.phpbb_website-icon { background-position: -40px 0; } -.phpbb_youtube-icon { background-position: -98px 0; } -.phpbb_facebook-icon { background-position: -119px 0; } -.phpbb_googleplus-icon { background-position: -140px 0; } -.phpbb_skype-icon { background-position: -161px 0; } -.phpbb_twitter-icon { background-position: -203px 0; } -.phpbb_yahoo-icon { background-position: -224px 0; } - -/* Forum icons & Topic icons */ -.global_read { background-image: url("./images/announce_read.gif"); } -.global_read_mine { background-image: url("./images/announce_read_mine.gif"); } -.global_read_locked { background-image: url("./images/announce_read_locked.gif"); } -.global_read_locked_mine { background-image: url("./images/announce_read_locked_mine.gif"); } -.global_unread { background-image: url("./images/announce_unread.gif"); } -.global_unread_mine { background-image: url("./images/announce_unread_mine.gif"); } -.global_unread_locked { background-image: url("./images/announce_unread_locked.gif"); } -.global_unread_locked_mine { background-image: url("./images/announce_unread_locked_mine.gif"); } - -.announce_read { background-image: url("./images/announce_read.gif"); } -.announce_read_mine { background-image: url("./images/announce_read_mine.gif"); } -.announce_read_locked { background-image: url("./images/announce_read_locked.gif"); } -.announce_read_locked_mine { background-image: url("./images/announce_read_locked_mine.gif"); } -.announce_unread { background-image: url("./images/announce_unread.gif"); } -.announce_unread_mine { background-image: url("./images/announce_unread_mine.gif"); } -.announce_unread_locked { background-image: url("./images/announce_unread_locked.gif"); } -.announce_unread_locked_mine { background-image: url("./images/announce_unread_locked_mine.gif"); } - -.forum_link { background-image: url("./images/forum_link.gif"); } -.forum_read { background-image: url("./images/forum_read.gif"); } -.forum_read_locked { background-image: url("./images/forum_read_locked.gif"); } -.forum_read_subforum { background-image: url("./images/forum_read_subforum.gif"); } -.forum_unread { background-image: url("./images/forum_unread.gif"); } -.forum_unread_locked { background-image: url("./images/forum_unread_locked.gif"); } -.forum_unread_subforum { background-image: url("./images/forum_unread_subforum.gif"); } - -.sticky_read { background-image: url("./images/sticky_read.gif"); } -.sticky_read_mine { background-image: url("./images/sticky_read_mine.gif"); } -.sticky_read_locked { background-image: url("./images/sticky_read_locked.gif"); } -.sticky_read_locked_mine { background-image: url("./images/sticky_read_locked_mine.gif"); } -.sticky_unread { background-image: url("./images/sticky_unread.gif"); } -.sticky_unread_mine { background-image: url("./images/sticky_unread_mine.gif"); } -.sticky_unread_locked { background-image: url("./images/sticky_unread_locked.gif"); } -.sticky_unread_locked_mine { background-image: url("./images/sticky_unread_locked_mine.gif"); } - -.topic_moved { background-image: url("./images/topic_moved.gif"); } -.pm_read, -.topic_read { background-image: url("./images/topic_read.gif"); } -.topic_read_mine { background-image: url("./images/topic_read_mine.gif"); } -.topic_read_hot { background-image: url("./images/topic_read_hot.gif"); } -.topic_read_hot_mine { background-image: url("./images/topic_read_hot_mine.gif"); } -.topic_read_locked { background-image: url("./images/topic_read_locked.gif"); } -.topic_read_locked_mine { background-image: url("./images/topic_read_locked_mine.gif"); } -.pm_unread, -.topic_unread { background-image: url("./images/topic_unread.gif"); } -.topic_unread_mine { background-image: url("./images/topic_unread_mine.gif"); } -.topic_unread_hot { background-image: url("./images/topic_unread_hot.gif"); } -.topic_unread_hot_mine { background-image: url("./images/topic_unread_hot_mine.gif"); } -.topic_unread_locked { background-image: url("./images/topic_unread_locked.gif"); } -.topic_unread_locked_mine { background-image: url("./images/topic_unread_locked_mine.gif"); } + background-color: #cfe1f6; +} + +/* icon images */ +.site_logo { background-image: url("./images/site_logo.svg"); } +.contact-icon { background-image: url("./images/icons_contact.png"); } + +/* profile icons */ +.pm-icon { background-position: 0 0; } +.email-icon { background-position: -21px 0; } +.jabber-icon { background-position: -80px 0; } +.phpbb_icq-icon { background-position: -61px 0; } +.phpbb_wlm-icon { background-position: -182px 0; } +.phpbb_aol-icon { background-position: -244px 0; } +.phpbb_website-icon { background-position: -40px 0; } +.phpbb_youtube-icon { background-position: -98px 0; } +.phpbb_facebook-icon { background-position: -119px 0; } +.phpbb_googleplus-icon { background-position: -140px 0; } +.phpbb_skype-icon { background-position: -161px 0; } +.phpbb_twitter-icon { background-position: -203px 0; } +.phpbb_yahoo-icon { background-position: -224px 0; } + +/* forum icons & topic icons */ +.global_read { background-image: url("./images/announce_read.gif"); } +.global_read_mine { background-image: url("./images/announce_read_mine.gif"); } +.global_read_locked { background-image: url("./images/announce_read_locked.gif"); } +.global_read_locked_mine { background-image: url("./images/announce_read_locked_mine.gif"); } +.global_unread { background-image: url("./images/announce_unread.gif"); } +.global_unread_mine { background-image: url("./images/announce_unread_mine.gif"); } +.global_unread_locked { background-image: url("./images/announce_unread_locked.gif"); } +.global_unread_locked_mine { background-image: url("./images/announce_unread_locked_mine.gif"); } + +.announce_read { background-image: url("./images/announce_read.gif"); } +.announce_read_mine { background-image: url("./images/announce_read_mine.gif"); } +.announce_read_locked { background-image: url("./images/announce_read_locked.gif"); } +.announce_read_locked_mine { background-image: url("./images/announce_read_locked_mine.gif"); } +.announce_unread { background-image: url("./images/announce_unread.gif"); } +.announce_unread_mine { background-image: url("./images/announce_unread_mine.gif"); } +.announce_unread_locked { background-image: url("./images/announce_unread_locked.gif"); } +.announce_unread_locked_mine { background-image: url("./images/announce_unread_locked_mine.gif"); } + +.forum_link { background-image: url("./images/forum_link.gif"); } +.forum_read { background-image: url("./images/forum_read.gif"); } +.forum_read_locked { background-image: url("./images/forum_read_locked.gif"); } +.forum_read_subforum { background-image: url("./images/forum_read_subforum.gif"); } +.forum_unread { background-image: url("./images/forum_unread.gif"); } +.forum_unread_locked { background-image: url("./images/forum_unread_locked.gif"); } +.forum_unread_subforum { background-image: url("./images/forum_unread_subforum.gif"); } + +.sticky_read { background-image: url("./images/sticky_read.gif"); } +.sticky_read_mine { background-image: url("./images/sticky_read_mine.gif"); } +.sticky_read_locked { background-image: url("./images/sticky_read_locked.gif"); } +.sticky_read_locked_mine { background-image: url("./images/sticky_read_locked_mine.gif"); } +.sticky_unread { background-image: url("./images/sticky_unread.gif"); } +.sticky_unread_mine { background-image: url("./images/sticky_unread_mine.gif"); } +.sticky_unread_locked { background-image: url("./images/sticky_unread_locked.gif"); } +.sticky_unread_locked_mine { background-image: url("./images/sticky_unread_locked_mine.gif"); } +.pm_read, +.topic_read { background-image: url("./images/topic_read.gif"); } +.topic_moved { background-image: url("./images/topic_moved.gif"); } +.topic_read_mine { background-image: url("./images/topic_read_mine.gif"); } +.topic_read_hot { background-image: url("./images/topic_read_hot.gif"); } +.topic_read_hot_mine { background-image: url("./images/topic_read_hot_mine.gif"); } +.topic_read_locked { background-image: url("./images/topic_read_locked.gif"); } +.topic_read_locked_mine { background-image: url("./images/topic_read_locked_mine.gif"); } -/* --------------------------------------------------------------- -Colours and backgrounds for cp.css --------------------------------------------------------------- */ +.pm_unread, +.topic_unread { background-image: url("./images/topic_unread.gif"); } +.topic_unread_mine { background-image: url("./images/topic_unread_mine.gif"); } +.topic_unread_hot { background-image: url("./images/topic_unread_hot.gif"); } +.topic_unread_hot_mine { background-image: url("./images/topic_unread_hot_mine.gif"); } +.topic_unread_locked { background-image: url("./images/topic_unread_locked.gif"); } +.topic_unread_locked_mine { background-image: url("./images/topic_unread_locked_mine.gif"); } -/* Main CP box -----------------------------------------*/ +/* colours and backgrounds for cp.css */ -.panel-container h3, .panel-container hr, .cp-menu hr { - border-color: #A4B3BF; +/* main cp box */ +.panel-container h3, +.panel-container hr, +.cp-menu hr { + border-color: #c9dee8; } .panel-container .panel li.row { - border-bottom-color: #B5C1CB; - border-top-color: #F9F9F9; + border-top-color: #fafafa; + border-bottom-color: #c9dee8; } ul.cplist { - border-top-color: #B5C1CB; + border-top-color: #c9dee8; } -.panel-container .panel li.header dd, .panel-container .panel li.header dt { +.panel-container .panel li.header dd, +.panel-container .panel li.header dt { color: #000000; } .panel-container table.table1 thead th { - color: #333333; - border-bottom-color: #333333; + border-bottom-color: #212121; + color: #212121; } -.cp-main .pm-message { - border-color: #DBDEE2; - background-color: #FFFFFF; -} - -/* CP tabbed menu -----------------------------------------*/ +/* cp tabbed menu */ .tabs .tab > a { - background: #BACCD9; - color: #536482; + background: #c0d3dd; + color: #47536b; } .tabs .tab > a:hover { - background: #DDEDFB; - color: #D31141; + background: #e6f7ff; + color: #d41142; } -.tabs .activetab > a, -.tabs .activetab > a:hover { - background-color: #CADCEB; /* Old browsers */ /* FF3.6+ */ - background-image: -webkit-linear-gradient(top, #E2F2FF 0%, #CADCEB 100%); - background-image: linear-gradient(to bottom, #E2F2FF 0%,#CADCEB 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E2F2FF', endColorstr='#CADCEB',GradientType=0 ); /* IE6-9 */ - border-color: #CADCEB; - box-shadow: 0 1px 1px #F2F9FF inset; - color: #333333; +/* responsive tabs */ +.responsive-tab .responsive-tab-link:before { + border-color: #47536b; } +.responsive-tab .responsive-tab-link:hover:before { + border-color: #d41142; +} + +.tabs .activetab > a, .tabs .activetab > a:hover { - color: #000000; + background-color: #c9dee8; + background-image: -webkit-gradient(linear, left top, left bottom, from(#e6f7ff), to(#c9dee8)); + background-image: linear-gradient(to bottom, #e6f7ff 0%, #c9dee8 100%); + border-color: #c9dee8; + -webkit-box-shadow: 0 1px 1px #e6f7ff inset; + box-shadow: 0 1px 1px #e6f7ff inset; + color: #212121; } -/* Mini tabbed menu used in MCP -----------------------------------------*/ +/* mini tabbed menu used in mcp */ .minitabs .tab > a { - background-color: #E1EBF2; + background-color: #dbe9f0; } .minitabs .activetab > a, .minitabs .activetab > a:hover { - background-color: #F9F9F9; - color: #333333; + background-color: #fafafa; + color: #212121; } -/* Responsive tabs -----------------------------------------*/ -.responsive-tab .responsive-tab-link:before { - border-color: #536482; -} +/* ucp navigation menu */ -.responsive-tab .responsive-tab-link:hover:before { - border-color: #D31141; -} - -/* UCP navigation menu -----------------------------------------*/ - -/* Link styles for the sub-section links */ +/* link styles for the sub-section links */ .navigation a { - color: #333; - background: #CADCEB; /* Old browsers */ /* FF3.6+ */ - background: -webkit-linear-gradient(left, #B4C4D1 50%, #CADCEB 100%); - background: linear-gradient(to right, #B4C4D1 50%,#CADCEB 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B4C4D1', endColorstr='#CADCEB',GradientType=1 ); /* IE6-9 */ + background: #c0d3dd; + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #aab9c0), to(#c0d3dd)); + background-image: linear-gradient(to right, #aab9c0 50%, #c0d3dd 100%); + color: #212121; } .rtl .navigation a { - background: #B4C4D1; /* Old browsers */ /* FF3.6+ */ - background: -webkit-linear-gradient(left, #CADCEB 50%, #B4C4D1 100%); - background: linear-gradient(to right, #CADCEB 50%,#B4C4D1 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CADCEB', endColorstr='#B4C4D1',GradientType=1 ); /* IE6-9 */ + background: #afc5cf; + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #c0d3dd), to(#aab9c0)); + background-image: linear-gradient(to right, #c0d3dd 50%, #aab9c0 100%); } .navigation a:hover { - background: #AABAC6; - color: #BC2A4D; - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + background: #aab9c0; + color: #d41142; } .navigation .active-subsection a { - background: #F9F9F9; - color: #D31141; - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + background: #fafafa; + color: #d41142; } .navigation .active-subsection a:hover { - color: #D31141; -} - -@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) -{ - #navigation a, .rtl #navigation a { - background: #B2C2CF; - } + color: #d41142; } -/* Preferences pane layout -----------------------------------------*/ +/* preferences pane layout */ .panel-container h2 { - color: #333333; + color: #212121; } .panel-container .panel { - background-color: #F9F9F9; + background-color: #fafafa; } .cp-main .pm { - background-color: #FFFFFF; + background-color: #ffffff; } -/* Friends list */ +/* friends list */ .cp-mini { - background-color: #EEF5F9; + background-color: #edf4f7; } dl.mini dt { - color: #425067; + color: #47536b; } -/* PM Styles -----------------------------------------*/ -/* PM Message history */ +/* pm styles */ + +/* pm message history */ .current { color: #000000 !important; } -/* PM marking colours */ -.pmlist li.pm_message_reported_colour, .pm_message_reported_colour { - border-left-color: #BC2A4D; - border-right-color: #BC2A4D; +/* pm marking colours */ +.pmlist li.pm_message_reported_colour, +.pm_message_reported_colour { + border-right-color: #ec1349; + border-left-color: #ec1349; } -.pmlist li.pm_marked_colour, .pm_marked_colour { - border-color: #FF6600; +.pmlist li.pm_marked_colour, +.pm_marked_colour { + border-color: #ff9500; } -.pmlist li.pm_replied_colour, .pm_replied_colour { - border-color: #A9B8C2; +.pmlist li.pm_replied_colour, +.pm_replied_colour { + border-color: #a3b8c2; } -.pmlist li.pm_friend_colour, .pm_friend_colour { - border-color: #5D8FBD; +.pmlist li.pm_friend_colour, +.pm_friend_colour { + border-color: #4582a1; } -.pmlist li.pm_foe_colour, .pm_foe_colour { +.pmlist li.pm_foe_colour, +.pm_foe_colour { border-color: #000000; } -/* Avatar gallery */ +/* avatar gallery */ .gallery label { - background: #FFFFFF; - border-color: #CCC; + background: #ffffff; + border-color: #dedede; } .gallery label:hover { - background-color: #EEE; + background-color: #ededed; } -/* --------------------------------------------------------------- -Colours and backgrounds for forms.css --------------------------------------------------------------- */ +/* colours and backgrounds for forms.css */ -/* General form styles -----------------------------------------*/ +/* general form styles */ select { - border-color: #666666; - background-color: #FAFAFA; - color: #000; + background-color: #fafafa; + border-color: #616161; + color: #000000; } label { - color: #425067; + color: #47536b; } option.disabled-option { - color: graytext; + color: #7f7f7f; } -/* Definition list layout for forms ----------------------------------------- */ +/* definition list layout for forms */ dd label { - color: #333; + color: #212121; } fieldset.fields1 { background-color: transparent; } -/* Hover effects */ +/* hover effects */ fieldset dl:hover dt label { color: #000000; } @@ -978,191 +981,178 @@ fieldset.fields2 dl:hover dt label { color: inherit; } -/* Quick-login on index page */ -fieldset.quick-login input.inputbox { - background-color: #F2F3F3; -} - -/* Posting page styles -----------------------------------------*/ - +/* posting page styles */ .message-box textarea { - color: #333333; + color: #212121; } .message-box textarea.drag-n-drop { - outline-color: rgba(102, 102, 102, 0.5); + outline-color: rgba(97, 97, 97, 0.5); } .message-box textarea.drag-n-drop-highlight { - outline-color: rgba(17, 163, 234, 0.5); + outline-color: rgba(19, 164, 236, 0.5); } -/* Input field styles ----------------------------------------- */ +/* input field styles */ .inputbox { - background-color: #FFFFFF; - border-color: #B4BAC0; - color: #333333; + background-color: #ffffff; + border-color: #bdbdbd; + color: #212121; } -.inputbox:-moz-placeholder { - color: #333333; +.inputbox:-moz-placeholder, +.inputbox::-webkit-input-placeholder { + color: #212121; } -.inputbox::-webkit-input-placeholder { - color: #333333; +.inputbox:hover, +.inputbox:focus { + border-color: #13a4ec; } -.inputbox:hover { - border-color: #11A3EA; +.inputbox:focus:-moz-placeholder, +.inputbox:focus::-webkit-input-placeholder { + color: transparent; } -.inputbox:focus { - border-color: #11A3EA; +input.disabled { + color: #616161; } -.inputbox:focus:-moz-placeholder { - color: transparent; +/* jquery popups */ +.phpbb_alert { + background-color: #ffffff; + border-color: #9e9e9e; } -.inputbox:focus::-webkit-input-placeholder { - color: transparent; +.darken { + background-color: #000000; } +/* stylelint-disable at-rule-no-vendor-prefix */ -/* Form button styles ----------------------------------------- */ +@-webkit-keyframes colors { + 0% { + stroke: #4285f4; + } -a.button1, input.button1, input.button3, a.button2, input.button2 { - color: #000; - background-color: #EFEFEF; /* Old browsers */ /* FF3.6+ */ - background-image: -webkit-linear-gradient(top, #D2D2D2 0%, #EFEFEF 100%); - background-image: linear-gradient(to bottom, #D2D2D2 0%,#EFEFEF 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D2D2D2', endColorstr='#EFEFEF',GradientType=0 ); /* IE6-9 */ -} + 25% { + stroke: #de3e35; + } -a.button1, input.button1 { - border-color: #666666; -} + 50% { + stroke: #f7c223; + } -input.button3 { - background-image: none; -} + 75% { + stroke: #1b9a59; + } -/* Alternative button */ -a.button2, input.button2, input.button3 { - border-color: #666666; + 100% { + stroke: #4285f4; + } } -/* <a> button in the style of the form buttons */ -a.button1, a.button2 { - color: #000000; -} +/* stylelint-enable at-rule-no-vendor-prefix */ -/* Hover states */ -a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, input.button3:hover { - border-color: #D31141; - color: #D31141; - background-color: #D2D2D2; /* Old browsers */ /* FF3.6+ */ - background-image: -webkit-linear-gradient(top, #EFEFEF 0%, #D2D2D2 100%); - background-image: linear-gradient(to bottom, #EFEFEF 0%,#D2D2D2 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EFEFEF', endColorstr='#D2D2D2',GradientType=0 ); /* IE6-9 */ -} -/* Focus states */ -input.button1:focus, input.button2:focus, input.button3:focus { - border-color: #11A3EA; - color: #0F4987; -} +@keyframes colors { + 0% { + stroke: #4285f4; + } -input.disabled { - color: #666666; -} + 25% { + stroke: #de3e35; + } -/* jQuery popups ----------------------------------------- */ -.phpbb_alert { - background-color: #FFFFFF; - border-color: #999999; -} -.darken { - background-color: #000000; -} + 50% { + stroke: #f7c223; + } -.loading_indicator { - background-color: #000000; - background-image: url("./images/loading.gif"); + 75% { + stroke: #1b9a59; + } + + 100% { + stroke: #4285f4; + } } -.dropdown-extended ul li { - border-top-color: #B9B9B9; +.dropdown-extended .dropdown-extended-item { + border-top-color: #bdbdbd; } -.dropdown-extended ul li:hover { - background-color: #CFE1F6; +.dropdown-extended .dropdown-extended-item:hover { + background-color: #d4e6f7; color: #000000; } -.dropdown-extended .header, .dropdown-extended .footer { - border-color: #B9B9B9; +.dropdown-extended a.mark_read { + background-color: #ffffff; +} + +.dropdown-extended .header, +.dropdown-extended .footer { + border-color: #bdbdbd; color: #000000; } .dropdown-extended .footer { - border-top-style: solid; border-top-width: 1px; + border-top-style: solid; } .dropdown-extended .header { - background-color: #F1F8FF; /* Old browsers */ /* FF3.6+ */ - background-image: -webkit-linear-gradient(top, #F1F8FF 0%, #CADCEB 100%); - background-image: linear-gradient(to bottom, #F1F8FF 0%,#CADCEB 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F1F8FF', endColorstr='#CADCEB',GradientType=0 ); /* IE6-9 */ + background-color: #e6f7ff; + background-image: -webkit-gradient(linear, left top, left bottom, from(#e6f7ff), to(#c9dee8)); + background-image: linear-gradient(to bottom, #e6f7ff 0%, #c9dee8 100%); } .dropdown .pointer { - border-color: #B9B9B9 transparent; + border-color: #bdbdbd transparent; } .dropdown .pointer-inner { - border-color: #FFF transparent; + border-color: #ffffff transparent; } -.dropdown-extended .pointer-inner { - border-color: #F1F8FF transparent; +.dropdown-extended-pointer .pointer-inner { + border-color: #e6f7ff transparent; } .dropdown .dropdown-contents { - background: #fff; - border-color: #B9B9B9; + background: #ffffff; + border-color: #bdbdbd; + -webkit-box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2); box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2); } .dropdown-up .dropdown-contents { + -webkit-box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2); box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2); } -.dropdown li, .dropdown li li { - border-color: #DCDCDC; +.dropdown li, +.dropdown li li { + border-color: #dedede; } .dropdown li.separator { - border-color: #DCDCDC; + border-color: #dedede; } -/* Notifications ----------------------------------------- */ - -.notification_list p.notification-time { - color: #4C5D77; +/* notifications */ +.notification-time { + color: #47536b; } -li.notification-reported strong, li.notification-disapproved strong { - color: #D31141; +.notification-reported strong, +.notification-disapproved strong { + color: #d41142; } .badge { - background-color: #D31141; + background-color: #d41142; color: #ffffff; } diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index eb04c66223..54048d500b 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -1,64 +1,69 @@ -/* General Markup Styles ----------------------------------------- */ +/* -------------------------------------------------------------- /* + $Common +/* -------------------------------------------------------------- */ +/* stylelint-disable selector-max-compound-selectors */ +/* stylelint-disable selector-no-qualifying-type */ + 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; + font-size: 16px; line-height: normal; + word-wrap: break-word; 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-size: 20px; font-weight: bold; - font-size: 2em; + margin-top: 15px; + margin-right: 200px; } h2 { /* Forum header titles */ font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; + font-size: 20px; font-weight: normal; - font-size: 2em; - margin: 0.8em 0 0.2em 0; + margin: 0.8em 0 0.2em; } h2.solo { - margin-bottom: 1em; + margin-bottom: 20px; } h3 { /* Sub-headers (also used as post headers, but defined later) */ font-family: Arial, Helvetica, sans-serif; + font-size: 12px; font-weight: bold; text-transform: uppercase; border-bottom: 1px solid transparent; + margin-top: 20px; 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; + font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; + font-size: 13px; } p { - line-height: 1.3em; - font-size: 1.1em; - margin-bottom: 1.5em; + font-size: 11px; + line-height: 14px; + margin-bottom: 16px; } img { @@ -68,10 +73,10 @@ img { hr { border: 0 solid transparent; border-top-width: 1px; - height: 1px; - margin: 5px 0; display: block; clear: both; + height: 1px; + margin: 5px 0; } hr.dashed { @@ -88,12 +93,13 @@ p.right { } p.jumpbox-return { + float: left; margin-top: 10px; margin-bottom: 0; - float: left; } -b, strong { +b, +strong { font-weight: bold; } @@ -101,7 +107,8 @@ b, strong { font-weight: bold; } -i, em { +i, +em { font-style: italic; } @@ -125,36 +132,36 @@ li { display: list-item; } -ul ul, ol ul { +ul ul, +ol ul { list-style-type: circle; } -ol ol ul, ol ul ul, ul ol ul, ul ul ul { +ol ol ul, +ol ul ul, +ul ol ul, +ul ul ul { list-style-type: square; } -a:hover { text-decoration: underline; } +a:hover { + text-decoration: underline; +} /* Main blocks ---------------------------------------- */ .wrap { border: 1px solid transparent; border-radius: 8px; - margin: 0 auto; - max-width: 1152px; min-width: 625px; + max-width: 1152px; + margin: 0 auto; 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; + margin: 4px 0; } .page-footer { @@ -195,51 +202,51 @@ a:hover { text-decoration: underline; } /* Round cornered boxes and backgrounds ---------------------------------------- */ .headerbar { + border-radius: 7px; margin-bottom: 4px; padding: 5px; - border-radius: 7px; } .navbar { - padding: 3px 10px; border-radius: 7px; + padding: 3px 10px; } .forabg { + border-radius: 7px; + clear: both; margin-bottom: 4px; padding: 5px; - clear: both; - border-radius: 7px; } .forumbg { + border-radius: 7px; + clear: both; margin-bottom: 4px; padding: 5px; - clear: both; - border-radius: 7px; } .panel { + border-radius: 7px; 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; + margin-bottom: 4px; + padding: 5px 10px; } .rowbg { - margin: 5px 5px 2px 5px; + margin: 5px 5px 2px; } /* Horizontal lists -----------------------------------------*/ +---------------------------------------- */ .navbar ul.linklist { padding: 2px 0; list-style-type: none; @@ -255,20 +262,22 @@ ul.linklist { } ul.linklist > li { + font-size: 11px; + line-height: 24px; float: left; - font-size: 1.1em; - line-height: 2.2em; - list-style-type: none; + width: auto; margin-right: 7px; padding-top: 1px; - width: auto; + list-style-type: none; } -ul.linklist > li.rightside, p.rightside, a.rightside { +ul.linklist > li.rightside, +p.rightside, +a.rightside { + text-align: right; float: right; margin-right: 0; margin-left: 7px; - text-align: right; } ul.navlinks { @@ -276,17 +285,17 @@ ul.navlinks { } ul.leftside { + text-align: left; float: left; - margin-left: 0; margin-right: 5px; - text-align: left; + margin-left: 0; } ul.rightside { + text-align: right; float: right; - margin-left: 5px; margin-right: -5px; - text-align: right; + margin-left: 5px; } ul.linklist li.responsive-menu { @@ -294,7 +303,8 @@ ul.linklist li.responsive-menu { margin: 0 5px 0 0; } -.hasjs ul.linklist.leftside, .hasjs ul.linklist.rightside { +.hasjs ul.linklist.leftside, +.hasjs ul.linklist.rightside { max-width: 48%; } @@ -315,18 +325,18 @@ ul.linklist .dropdown { } ul.linklist .dropdown-up .dropdown { - bottom: 18px; top: auto; + bottom: 18px; } /* Bulletin icons for list items -----------------------------------------*/ +---------------------------------------- */ ul.linklist.bulletin > li:before { - display: inline-block; - content: "\2022"; font-size: inherit; line-height: inherit; + display: inline-block; padding-right: 4px; + content: "\2022"; } ul.linklist.bulletin > li:first-child:before, @@ -344,8 +354,8 @@ ul.linklist.bulletin > li.no-bulletin:before { /* Profile in overall_header.html */ .header-profile { - display: inline-block; vertical-align: top; + display: inline-block; } a.header-avatar, @@ -354,23 +364,23 @@ a.header-avatar:hover { } a.header-avatar img { - margin-bottom: 2px; - max-height: 20px; vertical-align: middle; width: auto; + max-height: 20px; + margin-bottom: 2px; } 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; + display: inline-block; + padding-top: 2px; + padding-left: 6px; + content: "\f0dd"; } /* Dropdown menu -----------------------------------------*/ +---------------------------------------- */ .dropdown-container { position: relative; } @@ -388,15 +398,15 @@ a.header-avatar span:after { } .dropdown { - display: none; - position: absolute; - left: 0; - top: 1.2em; - z-index: 2; border: 1px solid transparent; border-radius: 5px; - padding: 9px 0 0; + position: absolute; + z-index: 2; + top: 1.2em; + left: 0; + display: none; margin-right: -500px; + padding: 9px 0 0; } .dropdown.live-search { @@ -413,11 +423,12 @@ a.header-avatar span:after { padding: 0 0 9px; } -.dropdown-left .dropdown, .nojs .rightside .dropdown { - left: auto; +.dropdown-left .dropdown, +.nojs .rightside .dropdown { right: 0; - margin-left: -500px; + left: auto; margin-right: 0; + margin-left: -500px; } .dropdown-button-control .dropdown { @@ -429,38 +440,42 @@ a.header-avatar span:after { bottom: 24px; } -.dropdown .pointer, .dropdown .pointer-inner { - position: absolute; - width: 0; - height: 0; +.dropdown .pointer, +.dropdown .pointer-inner { border-top-width: 0; + border-right: 10px dashed transparent; border-bottom: 10px solid transparent; border-left: 10px dashed transparent; - border-right: 10px dashed transparent; - -webkit-transform: rotate(360deg); /* better anti-aliasing in webkit */ + position: absolute; display: block; + width: 0; + height: 0; + -webkit-transform: rotate(360deg); /* better anti-aliasing in webkit */ + transform: rotate(360deg); } -.dropdown-up .pointer, .dropdown-up .pointer-inner { - border-bottom-width: 0; +.dropdown-up .pointer, +.dropdown-up .pointer-inner { border-top: 10px solid transparent; + border-bottom-width: 0; } .dropdown .pointer { + z-index: 3; + top: -1px; right: auto; left: 10px; - top: -1px; - z-index: 3; } .dropdown-up .pointer { - bottom: -1px; top: auto; + bottom: -1px; } -.dropdown-left .dropdown .pointer, .nojs .rightside .dropdown .pointer { - left: auto; +.dropdown-left .dropdown .pointer, +.nojs .rightside .dropdown .pointer { right: 10px; + left: auto; } .dropdown .pointer-inner { @@ -470,19 +485,19 @@ a.header-avatar span:after { } .dropdown-up .pointer-inner { - bottom: auto; top: -11px; + bottom: auto; } .dropdown .dropdown-contents { - z-index: 2; - overflow: hidden; - overflow-y: auto; border: 1px solid transparent; border-radius: 5px; - padding: 5px; position: relative; + z-index: 2; + overflow: hidden; + overflow-y: auto; max-height: 300px; + padding: 5px; } .dropdown-contents a { @@ -498,13 +513,9 @@ a.header-avatar span:after { border-top: 1px solid transparent; } -.jumpbox .dropdown-select { - margin: 0; -} - .jumpbox .dropdown-contents { - padding: 0; text-decoration: none; + padding: 0; } .jumpbox .dropdown-contents li { @@ -512,44 +523,35 @@ a.header-avatar span:after { } .jumpbox .dropdown-contents a { - margin-right: 20px; - padding: 5px 10px; text-decoration: none; width: 100%; + margin-right: 20px; + padding: 5px 10px; } .jumpbox .spacer { display: inline-block; - width: 0px; + width: 0; } .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; + font-size: 11px !important; + line-height: normal !important; + text-align: left; + white-space: nowrap; border-top: 1px dotted transparent; + display: list-item; float: none !important; - line-height: normal !important; - font-size: 1em !important; - list-style: none; margin: 0; - white-space: nowrap; - text-align: left; + list-style: none; } .dropdown-contents > li { @@ -560,7 +562,9 @@ a.header-avatar span:after { padding-right: 0; } -.dropdown li:first-child, .dropdown li.separator + li, .dropdown li li { +.dropdown li:first-child, +.dropdown li.separator + li, +.dropdown li li { border-top: 0; } @@ -577,7 +581,9 @@ a.header-avatar span:after { padding-left: 18px; } -.wrap .dropdown li, .dropdown.wrap li, .dropdown-extended li { +.wrap .dropdown li, +.dropdown.wrap li, +.dropdown-extended li { white-space: normal; } @@ -586,22 +592,23 @@ a.header-avatar span:after { padding: 0; } -.dropdown li.separator:first-child, .dropdown li.separator:last-child { +.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; + float: left; } .breadcrumbs .crumb:before { - content: '\2039'; font-weight: bold; padding: 0 0.5em; + content: "\2039"; } .breadcrumbs .crumb:first-child:before { @@ -609,24 +616,46 @@ a.header-avatar span:after { } .breadcrumbs .crumb a { + vertical-align: bottom; 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.wrapped .crumb a { + letter-spacing: -0.019em; +} -.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; } +.breadcrumbs.wrapped .crumb.wrapped-medium a { + letter-spacing: -0.025em; +} + +.breadcrumbs.wrapped .crumb.wrapped-tiny a { + letter-spacing: -0.031em; +} + +.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%; } @@ -636,10 +665,10 @@ table.table1 { } table.table1 thead th { + font-size: 10px; font-weight: normal; + line-height: 13px; text-transform: uppercase; - line-height: 1.3em; - font-size: 1em; padding: 0 0 4px 3px; } @@ -652,32 +681,72 @@ table.table1 tbody tr { } table.table1 td { - font-size: 1.1em; + font-size: 11px; } table.table1 tbody td { - padding: 5px; border-top: 1px solid transparent; + padding: 5px; } table.table1 tbody th { - padding: 5px; - border-bottom: 1px solid transparent; text-align: left; + border-bottom: 1px solid transparent; + padding: 5px; } /* 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 .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 { + white-space: normal; + overflow: hidden; + width: 100%; +} + +table.table1 .autocol { + line-height: 22px; + white-space: nowrap; +} + +table.table1 thead .autocol { + padding-left: 10px; +} table.table1 span.rank-img { float: right; @@ -689,10 +758,10 @@ table.info td { } table.info tbody th { - padding: 3px; + font-weight: normal; text-align: right; vertical-align: top; - font-weight: normal; + padding: 3px; } .forumbg table.table1 { @@ -704,12 +773,13 @@ table.info tbody th { } .color_palette_placeholder table { - border-collapse: separate; border-spacing: 1px; + border-collapse: separate; } /* Misc layout styles ---------------------------------------- */ + /* column[1-2] styles are containers for two column layouts */ .column1 { float: left; @@ -725,9 +795,9 @@ table.info tbody th { /* General classes for placing floating blocks */ .left-box { + text-align: left; float: left; width: auto; - text-align: left; max-width: 100%; } @@ -736,53 +806,56 @@ table.info tbody th { } .right-box { + text-align: right; float: right; width: auto; - text-align: right; max-width: 100%; } dl.details { - /*font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;*/ - font-size: 1.1em; + font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; + font-size: 11px; } dl.details dt { + text-align: right; + display: block; float: left; clear: left; width: 30%; - text-align: right; - display: block; } dl.details dd { - margin-left: 0; - padding-left: 5px; - margin-bottom: 5px; + text-overflow: ellipsis; float: left; - width: 65%; overflow: hidden; - text-overflow: ellipsis; + width: 65%; + margin-bottom: 5px; + margin-left: 0; + padding-left: 5px; } -.clearfix, fieldset dl, ul.topiclist dl, dl.polls { +.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; + max-height: 150px; + list-style-type: none; } fieldset.fields1 dd.recipients { clear: left; - margin-left: 1em; + margin-left: 11px; } -fieldset.fields1 ul.recipients input.button2{ - font-size: 0.8em; +fieldset.fields1 ul.recipients input.button2 { + font-size: 12px; margin-right: 0; padding: 0; } @@ -803,12 +876,12 @@ fieldset.fields1 dl.pmlist dd.recipients { } .forabg + .action-bar { - margin-top: 2em; + margin-top: 12px; } .action-bar .button { - margin-right: 5px; float: left; + margin-right: 5px; } .action-bar .button-search { @@ -818,8 +891,8 @@ fieldset.fields1 dl.pmlist dd.recipients { /* Pagination ---------------------------------------- */ .pagination { - float: right; text-align: right; + float: right; width: auto; } @@ -828,39 +901,40 @@ fieldset.fields1 dl.pmlist dd.recipients { } .action-bar .pagination .button { - margin-right: 0; float: none; + margin-right: 0; } .pagination > ul { display: inline-block; - list-style: none !important; margin-left: 5px; + list-style: none; } .pagination > ul > li { - display: inline-block !important; - padding: 0; font-size: 100%; line-height: normal; vertical-align: middle; + display: inline-block; + padding: 0; } -.pagination li a, .pagination li span { +.pagination li a, +.pagination li span { border-radius: 2px; padding: 2px 5px; } .pagination li.active span { - display: inline-block; + font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica; 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; + white-space: nowrap; border: 1px solid transparent; + display: inline-block; } .pagination li.ellipsis span { @@ -878,6 +952,7 @@ fieldset.fields1 dl.pmlist dd.recipients { .pagination li.page-jump a i { font-size: 21px; + line-height: 21px; } .pagination .arrow a { @@ -895,38 +970,32 @@ fieldset.fields1 dl.pmlist dd.recipients { margin: 0; } -.row .pagination li a, .row .pagination li span { +.row .pagination li a, +.row .pagination li span { + font-size: 9px; 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; + top: 150px; + right: 0; + left: 0; + display: none; width: 620px; margin: 0 auto; -} - -@media only screen and (max-height: 500px), only screen and (max-device-width: 500px) -{ - .phpbb_alert { - top: 25px; - } + padding: 0 25px 20px; } .phpbb_alert .alert_close { float: right; - margin-right: -36px; margin-top: -8px; + margin-right: -36px; } .phpbb_alert p { @@ -945,40 +1014,118 @@ fieldset.fields1 dl.pmlist dd.recipients { .phpbb_alert div.alert_text > select, .phpbb_alert div.alert_text > textarea, .phpbb_alert div.alert_text > input { - font-size: 1.1em; + font-size: 11px; } .darkenwrapper { - display: none; position: relative; z-index: 44; + display: none; } .darken { + opacity: 0.5; position: fixed; - left: 0; + z-index: 45; top: 0; + left: 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; + top: 50%; + left: 50%; + display: none; +} + +.loader { + width: 48px; + height: 48px; + padding: 12px; +} + +.spinner { + -webkit-animation: rotator 1s linear infinite; + animation: rotator 1s linear infinite; } +/* stylelint-disable no-unknown-animations */ +.spinner-path { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-animation: dash 1s ease-in-out infinite, colors 4s ease-in-out infinite; + animation: dash 1s ease-in-out infinite, colors 4s ease-in-out infinite; + stroke-dasharray: 187; + stroke-dashoffset: 0; +} +/* stylelint-enable no-unknown-animations */ + +/* stylelint-disable at-rule-no-vendor-prefix */ +@-webkit-keyframes rotator { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + } +} + +@keyframes rotator { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + } +} + +@-webkit-keyframes dash { + 0% { + stroke-dashoffset: 187; + } + + 50% { + -webkit-transform: rotate(135deg); + transform: rotate(135deg); + stroke-dashoffset: 46.75; + } + + 100% { + -webkit-transform: rotate(450deg); + transform: rotate(450deg); + stroke-dashoffset: 187; + } +} + +@keyframes dash { + 0% { + stroke-dashoffset: 187; + } + + 50% { + -webkit-transform: rotate(135deg); + transform: rotate(135deg); + stroke-dashoffset: 46.75; + } + + 100% { + -webkit-transform: rotate(450deg); + transform: rotate(450deg); + stroke-dashoffset: 187; + } +} +/* stylelint-enable at-rule-no-vendor-prefix */ + + /* Miscellaneous styles ---------------------------------------- */ .copyright { @@ -994,7 +1141,7 @@ fieldset.fields1 dl.pmlist dd.recipients { } .small { - font-size: 0.9em !important; + font-size: 90% !important; } .titlespace { @@ -1006,26 +1153,27 @@ fieldset.fields1 dl.pmlist dd.recipients { } .error { + font-size: 10px; font-weight: bold; - font-size: 1em; } div.rules { + font-size: 11px; + border-radius: 7px; margin: 10px 0; - font-size: 1.1em; padding: 5px 10px; - border-radius: 7px; } -div.rules ul, div.rules ol { +div.rules ul, +div.rules ol { margin-left: 20px; } p.post-notice { position: relative; - padding: 5px; min-height: 14px; - margin-bottom: 1em; + margin-bottom: 11px; + padding: 5px; } form > p.post-notice strong { @@ -1037,39 +1185,41 @@ form > p.post-notice strong { } .top-anchor { - display: block; position: absolute; top: -20px; + display: block; } .clear { - display: block; - clear: both; font-size: 1px; line-height: 1px; background: transparent; + display: block; + clear: both; } /* Inner box-model clearing */ .inner:after, ul.linklist:after, .action-bar:after, -.notification_text:after, +.notification-text:after, .tabs-container:after, .tabs > ul:after, .minitabs > ul:after, .postprofile .avatar-container:after { - clear: both; - content: ''; display: block; + clear: both; + content: ""; } +/* stylelint-disable declaration-property-unit-whitelist */ .emoji { - min-height: 18px; + width: 1em; min-width: 18px; height: 1em; - width: 1em; + min-height: 18px; } +/* stylelint-enable declaration-property-unit-whitelist */ .smilies { vertical-align: text-bottom; @@ -1086,45 +1236,44 @@ ul.linklist:after, } .member-search strong { - font-size: 0.95em; + font-size: 11px; } .dropdown-extended { - display: none; z-index: 1; + display: none; } -.dropdown-extended ul { - max-height: 350px; - overflow-y: auto; - overflow-x: hidden; +.dropdown-extended .dropdown-extended-list { clear: both; + overflow-x: hidden; + overflow-y: auto; + max-height: 350px; } -.dropdown-extended ul li { - padding: 0; - margin: 0 !important; - float: none; +.dropdown-extended .dropdown-extended-item { border-top: 1px solid; - list-style-type: none; - font-size: 0.95em; - clear: both; position: relative; + float: none; + clear: both; + margin: 0 !important; + padding: 0; + list-style-type: none; } -.dropdown-extended ul li:first-child { +.dropdown-extended .dropdown-extended-item:first-child { border-top: none; } -.dropdown-extended ul li.no_notifications { +.dropdown-extended .dropdown-extended-item.no-notifications { padding: 10px; } .dropdown-extended .dropdown-contents { - max-height: none; - padding: 0; position: absolute; width: 340px; + max-height: none; + padding: 0; } .nojs .dropdown-extended .dropdown-contents { @@ -1132,40 +1281,43 @@ ul.linklist:after, } .dropdown-extended .header { - padding: 0 10px; font-family: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; + line-height: 33px; 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; + + /* needs moved to colurs.css */ + text-shadow: 1px 1px 1px #ffffff; + padding: 0 10px; } -.dropdown-extended .header .header_settings { - float: right; +.dropdown-extended .header .header-settings { font-weight: normal; text-transform: none; + float: right; } -.dropdown-extended .header .header_settings a { +.dropdown-extended .header .header-settings a { display: inline-block; padding: 0 5px; } .dropdown-extended .header:after { - content: ''; display: table; clear: both; + content: ""; } .dropdown-extended .footer { + font-size: 12px; text-align: center; - font-size: 1.1em; } -.dropdown-extended ul li a, .dropdown-extended ul li.no-url { +.dropdown-extended .notification-block, +.dropdown-extended .dropdown-extended-item.no-url { padding: 8px; } @@ -1173,78 +1325,79 @@ ul.linklist:after, padding: 5px 0; } -.dropdown-extended ul li a, .notification_list dt > a, .dropdown-extended .footer > a { - display: block; +.dropdown-extended .dropdown-extended-item a, +.notification-menu dt > a, +.dropdown-extended .footer > a { text-decoration: none; + display: block; } -.notification_list ul li img { +.notification-avatar, +.notification-menu .notification-list .notification-item .avatar, +.notification-menu .notification-list .notification-item .gravatar { float: left; - max-height: 50px; - max-width: 50px; width: auto !important; + max-width: 50px; height: auto !important; + max-height: 50px; margin-right: 5px; } -.notification_list ul li p { +.notification-item 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; +.notification-reference, +.notification-location, +.notification-reason { white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } -.notification_list p.notification-time { - font-size: 0.9em; - margin: 0; +.notification-time { + font-size: 10px; text-align: right; + margin: 0; } -.notification_list div.notifications { +.notification-menu .notifications { margin-left: 50px; padding: 5px; } -.notification_list div.notifications a { +.notification-menu .notifications a { display: block; } -.notification_list p.notifications_title { +.notifications-title { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; - font-size: 1.2em !important; + font-size: 13px !important; } -.notification_list p.notifications_title strong { +.notifications-title strong { font-weight: bold; } -.notification_list p.notifications_time { - font-size: 0.9em !important; +.notifications-time { + font-size: 10px !important; } -.notification_text { +.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; + text-align: center; + white-space: nowrap; + border-radius: 10px; + opacity: 0.8; position: relative; top: 3px; + float: right; + margin-left: 3px; padding: 4px 6px; } @@ -1253,7 +1406,7 @@ ul.linklist:after, } /* Navbar specific list items -----------------------------------------*/ +---------------------------------------- */ .linklist .quick-links { margin: 0 7px 0 0; @@ -1275,7 +1428,7 @@ ul.linklist:after, width: 50px; } -.dropdown .clone.hidden { +.dropdown .clone.hidden { display: none; } @@ -1286,3 +1439,6 @@ ul.linklist:after, .dropdown .clone.hidden + li { border-top: none; } + +/* stylelint-enable selector-max-compound-selectors */ +/* stylelint-enable selector-no-qualifying-type */ diff --git a/phpBB/styles/prosilver/theme/content.css b/phpBB/styles/prosilver/theme/content.css index 807633864c..90c0b2b54b 100644 --- a/phpBB/styles/prosilver/theme/content.css +++ b/phpBB/styles/prosilver/theme/content.css @@ -1,16 +1,25 @@ -/* Content Styles ----------------------------------------- */ +/* -------------------------------------------------------------- /* + $Content +/* -------------------------------------------------------------- */ + +/* stylelint-disable selector-max-compound-selectors */ +/* stylelint-disable selector-no-qualifying-type */ + +ul.forums, +ul.topics { + border-radius: 4px; +} ul.topiclist { display: block; - list-style-type: none; margin: 0; + list-style-type: none; } -ul.topiclist li { +ul.topiclist > li { display: block; - list-style-type: none; margin: 0; + list-style-type: none; } ul.topiclist dl { @@ -21,15 +30,16 @@ ul.topiclist li.row dl { margin: 2px 0; } -ul.topiclist dt, ul.topiclist dd { +ul.topiclist dt, +ul.topiclist dd { display: block; float: left; } ul.topiclist dt { + font-size: 11px; width: 100%; margin-right: -440px; - font-size: 1.1em; } ul.topiclist.missing-column dt { @@ -46,8 +56,8 @@ ul.topiclist.two-columns dt { ul.topiclist dt .list-inner { margin-right: 440px; - padding-left: 5px; padding-right: 5px; + padding-left: 5px; } ul.topiclist.missing-column dt .list-inner { @@ -64,15 +74,14 @@ ul.topiclist.two-columns dt .list-inner { ul.topiclist dd { border-left: 1px solid transparent; - padding: 4px 0; -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; + padding: 4px 0; } ul.topiclist li.row dd { - padding: 4px 0 999px 0; margin-bottom: -995px; + padding: 4px 0 999px; } ul.topiclist dfn { @@ -84,8 +93,20 @@ ul.topiclist dfn { .forum-image { float: left; - padding-top: 5px; margin-right: 5px; + padding-top: 5px; +} + +.forum-desc { + display: block; +} + +.forum-mods { + display: block; +} + +.forum-subs { + display: block; } li.row { @@ -93,19 +114,34 @@ li.row { border-bottom: 1px solid transparent; } +li.row:first-child { + border-top: 0; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + padding-top: 1px; +} + +li.row:last-child { + border-bottom: 0; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + margin-bottom: 1px; +} + li.row strong { font-weight: normal; } -li.header dt, li.header dd { - line-height: 1em; +li.header dt, +li.header dd { + font-family: Arial, Helvetica, sans-serif; + font-size: 10px; + line-height: 10px; + text-transform: uppercase; border-left-width: 0; - margin: 2px 0 4px 0; + margin: 2px 0 4px; padding-top: 2px; padding-bottom: 2px; - font-size: 1em; - font-family: Arial, Helvetica, sans-serif; - text-transform: uppercase; } li.header dt { @@ -119,28 +155,29 @@ li.header dt .list-inner { } li.header dd { - padding-left: 1px; -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; + padding-left: 1px; } -li.header dl.row-item dt, li.header dl.row-item dd { +li.header dl.row-item dt, +li.header dl.row-item dd { min-height: 0; } li.header dl.row-item dt .list-inner { + padding-right: 50px; + /* Tweak for headers alignment when folder icon used */ padding-left: 0; - padding-right: 50px; } /* Forum list column styles */ .row .list-inner { padding: 4px 0; } dl.row-item { - background-position: 10px 50%; /* Position of folder icon */ background-repeat: no-repeat; + background-position: 10px 50%; /* Position of folder icon */ background-size: 32px; } @@ -154,7 +191,8 @@ dl.row-item dt .list-inner { padding-left: 52px; /* Space for folder icon */ } -dl.row-item dt, dl.row-item dd { +dl.row-item dt, +dl.row-item dd { min-height: 35px; } @@ -162,100 +200,117 @@ dl.row-item dt a { display: inline; } -dl a.row-item-link { /* topic row icon links */ - display: block; - width: 30px; - height: 30px; - padding: 0; +/* topic row icon links */ +dl a.row-item-link { position: absolute; top: 50%; left: 0; + display: block; + width: 30px; + height: 30px; margin-top: -15px; margin-left: 9px; + padding: 0; } -dd.posts, dd.topics, dd.views, dd.extra, dd.mark { - width: 80px; +dd.posts, +dd.topics, +dd.views, +dd.extra, +dd.mark { + font-size: 12px; + line-height: 26px; text-align: center; - line-height: 2.2em; - font-size: 1.2em; + width: 80px; } -dd.posts, dd.topics, dd.views { +dd.posts, +dd.topics, +dd.views { width: 95px; } /* List in forum description */ dl.row-item dt ol, dl.row-item dt ul { + margin-left: 10px; list-style-position: inside; - margin-left: 1em; } -dl.row-item dt li { +dl.row-item dt > ul li { display: list-item; list-style-type: inherit; } -dd.lastpost, dd.redirect, dd.moderation, dd.time, dd.info { +dd.lastpost, +dd.redirect, +dd.moderation, +dd.time, +dd.info { + font-size: 11px; width: 250px; - font-size: 1.1em; } dd.redirect { - line-height: 2.5em; + line-height: 26px; } dd.time { - line-height: 200%; + line-height: 22px; } -dd.lastpost > span, ul.topiclist dd.info > span, ul.topiclist dd.time > span, dd.redirect > span, dd.moderation > span { +dd.lastpost > span, +ul.topiclist dd.info > span, +ul.topiclist dd.time > span, +dd.redirect > span, +dd.moderation > span { display: block; padding-left: 5px; } -dd.extra, dd.mark { - line-height: 200%; +dd.extra, +dd.mark { + line-height: 24px; } dd.option { - width: 125px; - line-height: 200%; + font-size: 11px; + line-height: 22px; text-align: center; - font-size: 1.1em; + width: 125px; } /* Post body styles -----------------------------------------*/ +---------------------------------------- */ .postbody { - padding: 0; - line-height: 1.48em; - width: 76%; - float: left; + line-height: 16px; position: relative; + float: left; + width: 76%; + padding: 0; } .postbody .ignore { - font-size: 1.1em; + font-size: 11px; } .postbody h3.first { /* The first post on the page uses this */ - font-size: 1.7em; + font-size: 17px; } .postbody h3 { + font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; + font-size: 15px; + line-height: 19px; + text-transform: none; + border: none; + /* Postbody requires a different h3 format - so change it here */ float: left; - font-size: 1.5em; - padding: 2px 0 0 0; margin-top: 0 !important; - margin-bottom: 0.3em !important; - text-transform: none; - border: none; - font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; - line-height: 125%; + margin-bottom: 4px !important; + padding: 2px 0 0; } .postbody h3 img { @@ -269,38 +324,37 @@ dd.option { } .postbody .content { - font-size: 1.3em; + font-size: 13px; overflow-x: auto; } .postbody img.postimage { - max-width: 100%; -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; + max-width: 100%; } .search .postbody { - width: 68% + width: 68%; } /* Topic review panel -----------------------------------------*/ +---------------------------------------- */ .panel .review { - margin-top: 2em; + margin-top: 20px; } .topicreview { - padding-right: 5px; overflow: auto; height: 300px; + padding-right: 5px; } .topicreview .postbody { - width: auto; float: none; - margin: 0; + width: auto; height: auto; + margin: 0; } .topicreview .post { @@ -316,7 +370,7 @@ dd.option { } /* MCP Post details -----------------------------------------*/ +---------------------------------------- */ .post_details { /* This will only work in IE7+, plus the others */ overflow: auto; @@ -324,24 +378,25 @@ dd.option { } /* Content container styles -----------------------------------------*/ +---------------------------------------- */ .content { + font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; + font-size: 13px; + line-height: 18px; clear: both; - min-height: 3em; overflow: hidden; - line-height: 1.4em; - font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; - font-size: 1em; + min-height: 30px; padding-bottom: 1px; } -.content h2, .panel h2 { +.content h2, +.panel h2 { + font-size: 16px; font-weight: normal; border-bottom: 1px solid transparent; - font-size: 1.6em; - margin-top: 0.5em; - margin-bottom: 0.5em; - padding-bottom: 0.5em; + margin-top: 8px; + margin-bottom: 8px; + padding-bottom: 8px; } .panel h3 { @@ -349,24 +404,21 @@ dd.option { } .panel p { - font-size: 1.2em; - margin-bottom: 1em; - line-height: 1.4em; + font-size: 12px; + line-height: 16px; + margin-bottom: 12px; } .content p { font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; - font-size: 1.2em; - margin-bottom: 1em; - line-height: 1.4em; } dl.faq { font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; - font-size: 1.1em; - margin-top: 1em; - margin-bottom: 2em; - line-height: 1.4em; + font-size: 11px; + line-height: 15px; + margin-top: 11px; + margin-bottom: 22px; } dl.faq dt { @@ -374,42 +426,43 @@ dl.faq dt { } .content dl.faq { - font-size: 1.2em; - margin-bottom: 0.5em; + font-size: 12px; + margin-bottom: 6px; } .content li { list-style-type: inherit; } -.content ul, .content ol { +.content ul, +.content ol { margin: 0.8em 0 0.9em 3em; } .posthilit { - padding: 0 2px 1px 2px; + padding: 0 2px 1px; } /* Post author */ p.author { - margin-bottom: 0.6em; - padding: 0 0 5px 0; font-family: Verdana, Helvetica, Arial, sans-serif; - font-size: 1em; - line-height: 1.2em; + font-size: 10px; + line-height: 12px; clear: both; + margin-bottom: 8px; + padding: 0 0 5px; } /* Post signature */ .signature { - margin-top: 1.5em; - padding-top: 0.2em; - font-size: 1.1em; + font-size: 11px; + line-height: 16px; border-top: 1px solid transparent; clear: left; - line-height: 140%; overflow: hidden; width: 100%; + margin-top: 16px; + padding-top: 2px; } .signature.standalone { @@ -418,75 +471,72 @@ p.author { } dd .signature { + border: none; + clear: none; margin: 0; padding: 0; - clear: none; - border: none; } .signature li { list-style-type: inherit; } -.signature ul, .signature ol { - margin: 0.8em 0 0.9em 3em; +.signature ul, +.signature ol { + margin: 10px 0 10px 33px; } /* Post noticies */ .notice { font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; - width: auto; - margin-top: 1.5em; - padding-top: 0.2em; - font-size: 1em; + font-size: 10px; + line-height: 13px; border-top: 1px dashed transparent; clear: left; - line-height: 130%; + width: auto; + margin-top: 15px; + padding-top: 2px; } /* Jump to post link for now */ ul.searchresults { - list-style: none; text-align: right; clear: both; + list-style: none; } /* BB Code styles -----------------------------------------*/ +---------------------------------------- */ + /* Quote block */ blockquote { border: 1px solid transparent; - font-size: 0.95em; - margin: 1em 1px 1em 25px; overflow: hidden; + margin: 10px 1px 10px 25px; padding: 5px; } blockquote blockquote { /* Nested quotes */ - font-size: 1em; - margin: 1em 1px 1em 15px; + margin: 10px 1px 10px 15px; } blockquote cite { + font-weight: bold; + /* Username/source of quoter */ font-style: normal; - font-weight: bold; display: block; - font-size: 0.9em; -} - -blockquote cite cite { - font-size: 1em; } -blockquote cite:before, .uncited:before { +blockquote cite:before, +.uncited:before { padding-right: 5px; } blockquote cite > div { - float: right; font-weight: normal; + float: right; } .postbody .content li blockquote { @@ -496,20 +546,20 @@ blockquote cite > div { /* Code block */ .codebox { - border: 1px solid transparent; - font-size: 1em; - margin: 1em 0 1.2em 0; + font-size: 13px; word-wrap: normal; + border: 1px solid transparent; + margin: 13px 0 16px; } .codebox p { + font-size: 10px !important; + font-weight: bold; text-transform: uppercase; border-bottom: 1px solid transparent; + display: block; margin-bottom: 0; padding: 3px; - font-size: 0.8em !important; - font-weight: bold; - display: block; } blockquote .codebox { @@ -517,29 +567,28 @@ blockquote .codebox { } .codebox code { - overflow: auto; + font: 12px Monaco, "Andale Mono", "Courier New", Courier, monospace; + line-height: 15px; display: block; + overflow: auto; height: auto; max-height: 200px; padding: 5px 3px; - font: 0.9em Monaco, "Andale Mono","Courier New", Courier, monospace; - line-height: 1.3em; } /* Attachments -----------------------------------------*/ +---------------------------------------- */ .attachbox { font-size: 13px; + border: 1px dashed transparent; float: left; + clear: left; + -webkit-box-sizing: border-box; + box-sizing: border-box; width: auto; max-width: 100%; margin: 5px 5px 5px 0; padding: 6px; - border: 1px dashed transparent; - clear: left; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; } .attachbox dt { @@ -548,11 +597,11 @@ blockquote .codebox { } .attachbox dd { - margin-top: 4px; - padding-top: 4px; - clear: left; border-top: 1px solid transparent; + clear: left; overflow-x: auto; + margin-top: 4px; + padding-top: 4px; } .attachbox dd dd { @@ -560,31 +609,32 @@ blockquote .codebox { } .attachbox p { - line-height: 110%; font-weight: normal; + line-height: 12px; clear: left; } -.attachbox p.stats -{ - line-height: 110%; +.attachbox p.stats { font-weight: normal; + line-height: 12px; clear: left; } .attach-image { - margin: 3px 0; max-width: 100%; + margin: 3px 0; } .attach-image img { border: 1px solid transparent; -/* cursor: move; */ + + /* cursor: move; */ cursor: default; } /* Inline image thumbnails */ -div.inline-attachment dl.thumbnail, div.inline-attachment dl.file { +div.inline-attachment dl.thumbnail, +div.inline-attachment dl.file { display: block; margin-bottom: 4px; } @@ -599,11 +649,11 @@ dl.file { } dl.file dt { + font-family: Verdana, Arial, Helvetica, sans-serif; + font-weight: bold; text-transform: none; margin: 0; padding: 0; - font-weight: bold; - font-family: Verdana, Arial, Helvetica, sans-serif; } dl.file dd { @@ -612,14 +662,15 @@ dl.file dd { } dl.thumbnail img { - padding: 3px; border: 1px solid transparent; + -webkit-box-sizing: border-box; box-sizing: border-box; + padding: 3px; } dl.thumbnail dd { - font-style: italic; font-family: Verdana, Arial, Helvetica, sans-serif; + font-style: italic; } .attachbox dl.thumbnail dd { @@ -631,16 +682,16 @@ dl.thumbnail dt a:hover img { } /* Post poll styles -----------------------------------------*/ +---------------------------------------- */ fieldset.polls { font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; } fieldset.polls dl { - margin-top: 5px; + line-height: 13px; border-top: 1px solid transparent; - padding: 5px 0 0 0; - line-height: 120%; + margin-top: 5px; + padding: 5px 0 0; } fieldset.polls dl.voted { @@ -648,23 +699,23 @@ fieldset.polls dl.voted { } fieldset.polls dt { + font-size: 11px; text-align: left; - float: left; + border-right: none; display: block; + float: left; width: 30%; - border-right: none; - padding: 0; margin: 0; - font-size: 1.1em; + padding: 0; } fieldset.polls dd { + font-size: 11px; + border-left: none; float: left; width: 10%; - border-left: none; - padding: 0 5px; margin-left: 0; - font-size: 1.1em; + padding: 0 5px; } fieldset.polls dd.resultbar { @@ -676,59 +727,66 @@ fieldset.polls dd input { } fieldset.polls dd div { - text-align: right; font-family: Arial, Helvetica, sans-serif; font-weight: bold; - padding: 2px 2px 0 2px; + text-align: right; overflow: visible; min-width: 8px; + padding: 2px 2px 0; } -.pollbar1, .pollbar2, .pollbar3, .pollbar4, .pollbar5 { - border-bottom: 1px solid transparent; +.pollbar1, +.pollbar2, +.pollbar3, +.pollbar4, +.pollbar5 { border-right: 1px solid transparent; + border-bottom: 1px solid transparent; } .vote-submitted { - font-size: 1.2em; + font-size: 12px; font-weight: bold; text-align: center; } /* Poster profile block -----------------------------------------*/ +---------------------------------------- */ .postprofile { - margin: 5px 0 10px 0; - min-height: 80px; border: 1px solid transparent; border-width: 0 0 0 1px; - width: 22%; float: right; - display: inline; + width: 22%; + min-height: 80px; + margin: 5px 0 10px; } -.postprofile dd, .postprofile dt { - line-height: 1.2em; +.postprofile dd, +.postprofile dt { + font-size: 10px; + line-height: 12px; margin-left: 8px; } .postprofile dd { - overflow: hidden; text-overflow: ellipsis; + overflow: hidden; } .postprofile strong { font-weight: normal; } -.postprofile dt.no-profile-rank, .postprofile dd.profile-rank, .postprofile .search-result-date { +.postprofile dt.no-profile-rank, +.postprofile dd.profile-rank, +.postprofile .search-result-date { margin-bottom: 10px; } /* Post-profile avatars */ .postprofile .has-avatar .avatar-container { - margin-bottom: 3px; overflow: hidden; + margin-bottom: 3px; } .postprofile .avatar { @@ -739,8 +797,8 @@ fieldset.polls dd div { .postprofile .avatar img { display: block; - height: auto !important; max-width: 100%; + height: auto !important; } .postprofile .profile-posts a { @@ -767,13 +825,7 @@ dd.profile-contact { margin-right: -14px; } -.online { - background-image: none; - background-position: 100% 0; - background-repeat: no-repeat; -} - -/* Poster profile used by search*/ +/* Poster profile used by search */ .search .postprofile { width: 30%; } @@ -793,8 +845,8 @@ dl.pmlist dt textarea { } dl.pmlist dd { - margin-left: 61% !important; margin-bottom: 2px; + margin-left: 61% !important; } .action-bar div.dl_links { @@ -802,8 +854,8 @@ dl.pmlist dd { } div.dl_links { - display: inline-block; text-transform: none; + display: inline-block; } .dl_links strong { @@ -811,9 +863,9 @@ div.dl_links { } .dl_links ul { - list-style-type: none; - margin: 0; display: inline-block; + margin: 0; + list-style-type: none; } .dl_links li { @@ -825,10 +877,10 @@ div.dl_links { } .ellipsis-text { + white-space: nowrap; + text-overflow: ellipsis; display: inline-block; overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } table.fixed-width-table { @@ -836,20 +888,37 @@ table.fixed-width-table { } /* Show scrollbars for items with overflow on iOS devices -----------------------------------------*/ -.postbody .content::-webkit-scrollbar, .topicreview::-webkit-scrollbar, .post_details::-webkit-scrollbar, .codebox code::-webkit-scrollbar, .attachbox dd::-webkit-scrollbar, .attach-image::-webkit-scrollbar, .dropdown-extended ul::-webkit-scrollbar { +---------------------------------------- */ +.postbody .content::-webkit-scrollbar, +.topicreview::-webkit-scrollbar, +.post_details::-webkit-scrollbar, +.codebox code::-webkit-scrollbar, +.attachbox dd::-webkit-scrollbar, +.attach-image::-webkit-scrollbar, +.dropdown-extended ul::-webkit-scrollbar { + border-radius: 3px; width: 8px; height: 8px; -webkit-appearance: none; - background: rgba(0, 0, 0, .1); - border-radius: 3px; } -.postbody .content::-webkit-scrollbar-thumb, .topicreview::-webkit-scrollbar-thumb, .post_details::-webkit-scrollbar-thumb, .codebox code::-webkit-scrollbar-thumb, .attachbox dd::-webkit-scrollbar-thumb, .attach-image::-webkit-scrollbar-thumb, .dropdown-extended ul::-webkit-scrollbar-thumb { - background: rgba(0, 0, 0, .3); +.postbody .content::-webkit-scrollbar-thumb, +.topicreview::-webkit-scrollbar-thumb, +.post_details::-webkit-scrollbar-thumb, +.codebox code::-webkit-scrollbar-thumb, +.attachbox dd::-webkit-scrollbar-thumb, +.attach-image::-webkit-scrollbar-thumb, +.dropdown-extended ul::-webkit-scrollbar-thumb { border-radius: 3px; } -#memberlist tr.inactive, #team tr.inactive { +/* Factor out this ID */ +/* stylelint-disable selector-no-id */ +.memberlist tr.inactive, +.team tr.inactive { font-style: italic; } +/* stylelint-enable selector-no-id */ + +/* stylelint-enable selector-max-compound-selectors */ +/* stylelint-enable selector-no-qualifying-type */ diff --git a/phpBB/styles/prosilver/theme/cp.css b/phpBB/styles/prosilver/theme/cp.css index 0041417022..eb80e6040e 100644 --- a/phpBB/styles/prosilver/theme/cp.css +++ b/phpBB/styles/prosilver/theme/cp.css @@ -1,13 +1,16 @@ -/* Control Panel Styles ----------------------------------------- */ +/* -------------------------------------------------------------- /* + $Contorl Panel +/* -------------------------------------------------------------- */ +/* stylelint-disable selector-max-compound-selectors */ +/* stylelint-disable selector-no-qualifying-type */ /* Main CP box -----------------------------------------*/ +---------------------------------------- */ .cp-menu { - float:left; + float: left; width: 19%; - margin-top: 1em; + margin-top: 10px; margin-bottom: 5px; } @@ -21,30 +24,31 @@ } .panel-container .panel p { - font-size: 1.1em; + font-size: 11px; } .panel-container .panel ol { - margin-left: 2em; - font-size: 1.1em; + font-size: 11px; + margin-left: 22px; } .panel-container .panel li.row { - border-bottom: 1px solid transparent; border-top: 1px solid transparent; + border-bottom: 1px solid transparent; } ul.cplist { - margin-bottom: 5px; border-top: 1px solid transparent; + margin-bottom: 5px; } -.panel-container .panel li.header dd, .panel-container .panel li.header dt { +.panel-container .panel li.header dd, +.panel-container .panel li.header dt { margin-bottom: 2px; } .panel-container table.table1 { - margin-bottom: 1em; + margin-bottom: 10px; } .panel-container table.table1 thead th { @@ -61,21 +65,22 @@ ul.cplist { .cp-main .pm-message { border: 1px solid transparent; - margin: 10px 0; - width: auto; float: none; + width: auto; + margin: 10px 0; } .pm-message h2 { padding-bottom: 5px; } -.cp-main .postbody h3, .cp-main .box2 h3 { +.cp-main .postbody h3, +.cp-main .box2 h3 { margin-top: 0; } .panel-container .postbody p.author { - font-size: 1.1em; + font-size: 11px; } .cp-main .buttons { @@ -93,41 +98,45 @@ ul.cplist { .tabs-container h2 { float: left; - margin-bottom: 0px; + margin-bottom: 0; } /* CP tabs shared -----------------------------------------*/ -.tabs, .minitabs { +---------------------------------------- */ +.tabs, +.minitabs { line-height: normal; } -.tabs > ul, .minitabs > ul { - list-style: none; +.tabs > ul, +.minitabs > ul { + position: relative; margin: 0; padding: 0; - position: relative; + list-style: none; } -.tabs .tab, .minitabs .tab { +.tabs .tab, +.minitabs .tab { + font-size: 10px; + font-weight: bold; + line-height: 14px; display: block; float: left; - font-size: 1em; - font-weight: bold; - line-height: 1.4em; } -.tabs .tab > a, .minitabs .tab > a { +.tabs .tab > a, +.minitabs .tab > a { + white-space: nowrap; + text-decoration: none; + position: relative; display: block; padding: 5px 9px; - position: relative; - text-decoration: none; - white-space: nowrap; cursor: pointer; } /* CP tabbed menu -----------------------------------------*/ +---------------------------------------- */ .tabs { margin: 20px 0 0 7px; } @@ -144,11 +153,11 @@ ul.cplist { } /* Mini tabbed menu used in MCP -----------------------------------------*/ +---------------------------------------- */ .minitabs { float: right; - margin: 15px 7px 0 0; max-width: 50%; + margin: 15px 7px 0 0; } .minitabs .tab { @@ -165,45 +174,47 @@ ul.cplist { } /* Responsive tabs -----------------------------------------*/ +---------------------------------------- */ .responsive-tab { position: relative; } .responsive-tab > a.responsive-tab-link { - display: block; - font-size: 1.6em; + font-size: 16px; + line-height: 14px; + text-decoration: none; position: relative; + display: block; width: 16px; - line-height: 0.9em; - text-decoration: none; } .responsive-tab .responsive-tab-link:before { - content: ''; + border-top: 6px double rgba(0, 0, 0, 0); + border-bottom: 2px solid rgba(0, 0, 0, 0); position: absolute; - left: 10px; top: 7px; - height: .125em; + left: 10px; width: 14px; - border-bottom: 0.125em solid transparent; - border-top: 0.375em double transparent; + height: 2px; + content: ""; } -.tabs .dropdown, .minitabs .dropdown { +.tabs .dropdown, +.minitabs .dropdown { + font-size: 11px; + font-weight: normal; top: 20px; margin-right: -2px; - font-size: 1.1em; - font-weight: normal; } .minitabs .dropdown { margin-right: -4px; } -.tabs .dropdown-up .dropdown, .minitabs .dropdown-up .dropdown { - bottom: 20px; +.tabs .dropdown-up .dropdown, +.minitabs .dropdown-up .dropdown { top: auto; + bottom: 20px; } .tabs .dropdown li { @@ -215,7 +226,8 @@ ul.cplist { } /* UCP navigation menu -----------------------------------------*/ +---------------------------------------- */ + /* Container for sub-navigation list */ .navigation { width: 100%; @@ -228,18 +240,19 @@ ul.cplist { /* Default list state */ .navigation li { - display: inline; font-weight: bold; + display: inline; margin: 1px 0; padding: 0; } /* Link styles for the sub-section links */ .navigation a { + font-size: 10px; + text-decoration: none; display: block; - padding: 5px; margin: 1px 0; - text-decoration: none; + padding: 5px; } .navigation a:hover { @@ -247,20 +260,21 @@ ul.cplist { } /* Preferences pane layout -----------------------------------------*/ +---------------------------------------- */ .cp-main h2 { border-bottom: none; - padding: 0; margin-left: 10px; + padding: 0; } /* Friends list */ .cp-mini { - margin: 10px 15px 10px 5px; - max-height: 200px; + font-size: 10px; + border-radius: 7px; overflow-y: auto; + max-height: 200px; + margin: 10px 15px 10px 5px; padding: 5px 10px; - border-radius: 7px; } dl.mini dt { @@ -280,14 +294,15 @@ dl.mini dd { } /* PM Styles -----------------------------------------*/ +---------------------------------------- */ + /* Defined rules list for PM options */ ol.def-rules { padding-left: 0; } ol.def-rules li { - line-height: 180%; + line-height: 18px; padding: 1px; } @@ -301,75 +316,62 @@ ol.def-rules li { } /* DEPRECATED 3.2.6 -.pmlist li.pm_message_reported_colour, .pm_message_reported_colour { - border-left-color: transparent; +.pmlist li.pm_message_reported_colour, +.pm_message_reported_colour { border-right-color: transparent; + border-left-color: transparent; } */ -.pmlist li.pm_message_reported_colour, .pm_message_reported_colour, -.pmlist li.pm_marked_colour, .pm_marked_colour, -.pmlist li.pm_replied_colour, .pm_replied_colour, -.pmlist li.pm_friend_colour, .pm_friend_colour, -.pmlist li.pm_foe_colour, .pm_foe_colour { - padding: 0; +.pmlist li.pm_message_reported_colour, +.pm_message_reported_colour, +.pmlist li.pm_marked_colour, +.pm_marked_colour, +.pmlist li.pm_replied_colour, +.pm_replied_colour, +.pmlist li.pm_friend_colour, +.pm_friend_colour, +.pmlist li.pm_foe_colour, +.pm_foe_colour { border: solid 3px transparent; border-width: 0 3px; + padding: 0; } .pm-legend { + border-right-width: 0; border-left-width: 10px; border-left-style: solid; - border-right-width: 0; margin-bottom: 3px; padding-left: 3px; } /* Avatar gallery */ .gallery label { + text-align: center; + border: 1px solid transparent; position: relative; float: left; + width: auto; margin: 10px; padding: 5px; - width: auto; - border: 1px solid transparent; - text-align: center; } -/* Responsive *CP navigation -----------------------------------------*/ -@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) -{ - .nojs .tabs a span, .nojs .minitabs a span { - max-width: 40px; - overflow: hidden; - text-overflow: ellipsis; - letter-spacing: -.5px; - } - - .cp-menu, .navigation, .cp-main { - float: none; - width: auto; - margin: 0; - } - - .navigation { - padding: 0; - margin: 0 auto; - max-width: 320px; - } - - .navigation a { - background-image: none; - } - - .navigation li:first-child a { - border-top-left-radius: 5px; - border-top-right-radius: 5px; - } - - .navigation li:last-child a { - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - } +.cplist .topictitle { + line-height: 30px; } + +p.notification-title, +p.notification-forum, +p.notification-reason, +p.notification-time { + line-height: 14px; + margin-bottom: 4px; +} + +p.notification-time { + margin-bottom: 0; +} + +/* stylelint-enable selector-max-compound-selectors */ +/* stylelint-enable selector-no-qualifying-type */ diff --git a/phpBB/styles/prosilver/theme/en/icon_user_online.gif b/phpBB/styles/prosilver/theme/en/icon_user_online.gif Binary files differdeleted file mode 100644 index 6b571ffce0..0000000000 --- a/phpBB/styles/prosilver/theme/en/icon_user_online.gif +++ /dev/null diff --git a/phpBB/styles/prosilver/theme/en/stylesheet.css b/phpBB/styles/prosilver/theme/en/stylesheet.css index 604b299488..ae0d2f152d 100644 --- a/phpBB/styles/prosilver/theme/en/stylesheet.css +++ b/phpBB/styles/prosilver/theme/en/stylesheet.css @@ -1,2 +1 @@ -/* Online image */ -.online { background-image: url("./icon_user_online.gif"); } +/* language specific styles go here */ diff --git a/phpBB/styles/prosilver/theme/forms.css b/phpBB/styles/prosilver/theme/forms.css index 99c898f41e..ceafd5b21f 100644 --- a/phpBB/styles/prosilver/theme/forms.css +++ b/phpBB/styles/prosilver/theme/forms.css @@ -1,30 +1,34 @@ -/* Form Styles ----------------------------------------- */ +/* -------------------------------------------------------------- /* + $Forms +/* -------------------------------------------------------------- */ + +/* stylelint-disable selector-max-compound-selectors */ +/* stylelint-disable selector-no-qualifying-type */ /* General form styles -----------------------------------------*/ +---------------------------------------- */ fieldset { - border-width: 0; font-family: Verdana, Helvetica, Arial, sans-serif; - font-size: 1.1em; + font-size: 11px; + border-width: 0; } input { + font-family: Verdana, Helvetica, Arial, sans-serif; + font-size: 11px; font-weight: normal; vertical-align: middle; padding: 0 3px; - font-size: 1em; - font-family: Verdana, Helvetica, Arial, sans-serif; } select { font-family: Verdana, Helvetica, Arial, sans-serif; + font-size: 11px; font-weight: normal; - cursor: pointer; vertical-align: middle; border: 1px solid transparent; padding: 1px; - font-size: 1em; + cursor: pointer; } select:focus { @@ -32,25 +36,25 @@ select:focus { } option { - padding-right: 1em; + padding-right: 11px; } select optgroup option { - padding-right: 1em; font-family: Verdana, Helvetica, Arial, sans-serif; + padding-right: 11px; } textarea { font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; + font-size: 11px; + line-height: 18px; width: 60%; padding: 2px; - font-size: 1em; - line-height: 1.4em; } label { - cursor: default; padding-right: 5px; + cursor: default; } label input { @@ -68,27 +72,16 @@ fieldset dl { } fieldset dt { - float: left; - width: 40%; text-align: left; display: block; + float: left; + width: 40%; } fieldset dd { - margin-left: 41%; vertical-align: top; margin-bottom: 3px; -} - -/* Specific layout 1 */ -fieldset.fields1 dt { - width: 15em; - border-right-width: 0; -} - -fieldset.fields1 dd { - margin-left: 15em; - border-left-width: 0; + margin-left: 41%; } fieldset.fields1 div { @@ -100,15 +93,21 @@ fieldset.fields1 .live-search div { margin-bottom: 0; } -/* Specific layout 2 */ -fieldset.fields2 dt { - width: 15em; +/* Specific layouts */ +fieldset.fields2 dt, +fieldset.fields1 dt { border-right-width: 0; + width: 165px; } fieldset.fields2 dd { - margin-left: 16em; border-left-width: 0; + margin-left: 176px; +} + +fieldset.fields1 dd { + border-left-width: 0; + margin-left: 165px; } /* Form elements */ @@ -121,7 +120,8 @@ dd label { white-space: nowrap; } -dd input, dd textarea { +dd input, +dd textarea { margin-right: 3px; } @@ -144,8 +144,8 @@ dd textarea { /* Browser-specific tweaks */ button::-moz-focus-inner { + border: 0; padding: 0; - border: 0 } /* Quick-login on index page */ @@ -158,8 +158,8 @@ fieldset.quick-login input { } fieldset.quick-login input.inputbox { - width: 15%; vertical-align: middle; + width: 15%; margin-right: 5px; } @@ -171,7 +171,7 @@ fieldset.quick-login label { /* Display options on viewtopic/viewforum pages */ fieldset.display-options { text-align: center; - margin: 3px 0 5px 0; + margin: 3px 0 5px; } fieldset.display-options label { @@ -184,17 +184,17 @@ fieldset.display-options a { } .dropdown fieldset.display-options { - font-size: 1em; + font-size: 11px; margin: 0; padding: 0; } .dropdown fieldset.display-options label { + text-align: right; + white-space: nowrap; display: block; margin: 4px; padding: 0; - text-align: right; - white-space: nowrap; } .dropdown fieldset.display-options select { @@ -203,10 +203,10 @@ fieldset.display-options a { /* Display actions for ucp and mcp pages */ fieldset.display-actions { + line-height: 22px; text-align: right; - line-height: 2em; white-space: nowrap; - padding-right: 1em; + padding-right: 11px; } fieldset.display-actions label { @@ -214,19 +214,20 @@ fieldset.display-actions label { padding-right: 2px; } +/* Not used anywhere */ fieldset.sort-options { - line-height: 2em; + line-height: 22px; } -/* MCP forum selection*/ +/* MCP forum selection */ fieldset.forum-selection { - margin: 5px 0 3px 0; float: right; + margin: 5px 0 3px; } fieldset.forum-selection2 { - margin: 13px 0 3px 0; float: right; + margin: 13px 0 3px; } /* Submit button fieldset */ @@ -241,15 +242,17 @@ fieldset.submit-buttons input { } /* Posting page styles -----------------------------------------*/ +---------------------------------------- */ /* Buttons used in the editor */ .format-buttons { - margin: 15px 0 2px 0; + margin: 15px 0 2px; } -.format-buttons input, .format-buttons select { +.format-buttons input, +.format-buttons select { vertical-align: middle; + margin-bottom: 3px; } /* Main message box */ @@ -259,25 +262,22 @@ fieldset.submit-buttons input { .message-box textarea { font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; + font-size: 13px; + outline: 3px dashed transparent; + outline-offset: -4px; width: 450px; - height: 270px; min-width: 100%; max-width: 100%; - font-size: 1.2em; + height: 270px; resize: vertical; - outline: 3px dashed transparent; - outline-offset: -4px; - -webkit-transition: all .5s ease, height 1ms linear; - -moz-transition: all .5s ease, height 1ms linear; - -ms-transition: all .5s ease, height 1ms linear; - -o-transition: all .5s ease, height 1ms linear; - transition: all .5s ease, height 1ms linear; + -webkit-transition: all 0.5s ease, height 1ms linear; + transition: all 0.5s ease, height 1ms linear; } /* Emoticons panel */ .smiley-box { - width: 18%; float: right; + width: 18%; } .smiley-box img { @@ -291,15 +291,27 @@ fieldset.submit-buttons input { padding: 2px; } -.inputbox:hover, .inputbox:focus { +.inputbox:hover, +.inputbox:focus { border: 1px solid transparent; outline-style: none; } -input.inputbox { width: 85%; } -input.medium { width: 50%; } -input.narrow { width: 25%; } -input.tiny { width: 150px; } +input.inputbox { + width: 85%; +} + +input.medium { + width: 50%; +} + +input.narrow { + width: 25%; +} + +input.tiny { + width: 150px; +} textarea.inputbox { width: 85%; @@ -314,11 +326,14 @@ input[type="number"] { } input[type="search"] { - -webkit-appearance: textfield; -webkit-box-sizing: content-box; + box-sizing: content-box; + -webkit-appearance: textfield; } -input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { display: none; } @@ -326,65 +341,19 @@ input[type="search"]::-webkit-search-cancel-button { cursor: pointer; } -/* Form button styles ----------------------------------------- */ -input.button1, input.button2 { - font-size: 1em; -} - -a.button1, input.button1, input.button3, a.button2, input.button2 { - width: auto !important; - padding-top: 1px; - padding-bottom: 1px; - font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; - background: transparent none repeat-x top left; - line-height: 1.5; -} - -a.button1, input.button1 { - font-weight: bold; - border: 1px solid transparent; -} - -input.button3 { - padding: 0; - margin: 0; - line-height: 5px; - height: 12px; - background-image: none; - font-variant: small-caps; -} - -input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"], input[type="radio"], .search-results li { +input[type="button"], +input[type="submit"], +input[type="reset"], +input[type="checkbox"], +input[type="radio"], +.search-results li { cursor: pointer; } -/* Alternative button */ -a.button2, input.button2, input.button3 { - border: 1px solid transparent; -} - -/* <a> button in the style of the form buttons */ -a.button1, a.button2 { - text-decoration: none; - padding: 0 3px; - vertical-align: text-bottom; -} - -/* Hover states */ -a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, input.button3:hover { - border: 1px solid transparent; -} - input.disabled { font-weight: normal; } -/* Focus states */ -input.button1:focus, input.button2:focus, input.button3:focus { - outline-style: none; -} - /* Topic and forum Search */ .search-box { float: left; @@ -395,11 +364,10 @@ input.button1:focus, input.button2:focus, input.button3:focus { border-right-width: 0; border-radius: 4px 0 0 4px; float: left; - height: 24px; - padding: 3px; -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; + height: 24px; + padding: 3px; } /* Search box (header) @@ -408,13 +376,17 @@ input.button1:focus, input.button2:focus, input.button3:focus { border-radius: 4px; display: block; float: right; - margin-right: 5px; margin-top: 30px; + margin-right: 5px; } -.search-header .inputbox { border: 0; } +.search-header .inputbox { + border: 0; +} -.navbar .linklist > li.responsive-search { display: none; } +.navbar .linklist > li.responsive-search { + display: none; +} input.search { background-image: none; @@ -423,7 +395,21 @@ input.search { padding-left: 17px; } -.full { width: 95%; } -.medium { width: 50%;} -.narrow { width: 25%;} -.tiny { width: 10%;} +.full { + width: 95%; +} + +.medium { + width: 50%; +} + +.narrow { + width: 25%; +} + +.tiny { + width: 10%; +} + +/* stylelint-enable selector-max-compound-selectors */ +/* stylelint-enable selector-no-qualifying-type */ diff --git a/phpBB/styles/prosilver/theme/icons.css b/phpBB/styles/prosilver/theme/icons.css index 3ac598486c..1268627d51 100644 --- a/phpBB/styles/prosilver/theme/icons.css +++ b/phpBB/styles/prosilver/theme/icons.css @@ -1,28 +1,35 @@ -/* -------------------------------------------------------------- +/* -------------------------------------------------------------- /* $Icons --------------------------------------------------------------- */ +/* -------------------------------------------------------------- */ /* Global module setup ---------------------------------*/ +---------------------------------------- */ /* Renamed version of .fa class for agnostic usage of icon fonts. * Just change the name of the font after the 14/1 to the name of * the font you wish to use. */ -.icon, .button .icon, blockquote cite:before, .uncited:before { +.icon, +.button .icon, +blockquote cite:before, +.uncited:before { + font-family: FontAwesome; + font-size: 14px; + font-weight: normal; + font-style: normal; + font-variant: normal; + line-height: 1; display: inline-block; - font-weight: normal; - font-style: normal; - font-variant: normal; - font-family: FontAwesome; - font-size: 14px; - line-height: 1; - text-rendering: auto; /* optimizelegibility throws things off #1094 */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + /* stylelint-disable order/properties-order */ + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + /* stylelint-enable order/properties-order */ + text-rendering: auto; /* optimizelegibility throws things off #1094 */ } -.icon:before { padding-right: 2px; } +.icon:before { + padding-right: 2px; +} .button .icon:before { padding-right: 0; @@ -48,49 +55,50 @@ /* icon modifiers */ .icon-tiny { + font-size: 16px; + vertical-align: text-bottom; width: 12px; + -webkit-transform: scale(0.65, 0.75); transform: scale(0.65, 0.75); - vertical-align: text-bottom; - font-size: 16px; } -.arrow-left .icon { - float: left; +.arrow-right .icon { + float: right; } .arrow-left:hover .icon { - margin-left: -5px; margin-right: 5px; + margin-left: -5px; } -.arrow-right .icon { - float: right; +.arrow-left .icon { + float: left; } .arrow-right:hover .icon { - margin-left: 5px; margin-right: -5px; + margin-left: 5px; } .post-buttons .dropdown-contents .icon { - float: right; - margin-left: 5px; + float: right; + margin-left: 5px; } .alert_close .icon:before { + border-radius: 50%; + display: block; + width: 11px; + height: 12px; padding: 0; - border-radius: 50%; - width: 11px; - display: block; - line-height: .9; - height: 12px; } -blockquote cite:before, .uncited:before { - content: '\f10d'; /* Font Awesome quote-left */ +blockquote cite:before, +.uncited:before { + content: "\f10d"; /* Font Awesome quote-left */ } -.rtl blockquote cite:before, .rtl .uncited:before { - content: '\f10e'; /* Font Awesome quote-right */ +.rtl blockquote cite:before, +.rtl .uncited:before { + content: "\f10e"; /* Font Awesome quote-right */ } - diff --git a/phpBB/styles/prosilver/theme/images/loading.gif b/phpBB/styles/prosilver/theme/images/loading.gif Binary files differdeleted file mode 100644 index e1ed0883e0..0000000000 --- a/phpBB/styles/prosilver/theme/images/loading.gif +++ /dev/null diff --git a/phpBB/styles/prosilver/theme/links.css b/phpBB/styles/prosilver/theme/links.css index 6a61e9a262..3a8407e2a6 100644 --- a/phpBB/styles/prosilver/theme/links.css +++ b/phpBB/styles/prosilver/theme/links.css @@ -1,15 +1,16 @@ -/* Link Styles ----------------------------------------- */ +/* -------------------------------------------------------------- /* + $Links +/* -------------------------------------------------------------- */ /* Links adjustment to correctly display an order of rtl/ltr mixed content */ a { - direction: ltr; - unicode-bidi: embed; text-decoration: none; + /* we use links inline more often then not so to address several bugs with IE and some other browsers we render all links as inlineblock by default */ display: inline-block; - + direction: ltr; + unicode-bidi: embed; } /* Coloured usernames */ @@ -20,28 +21,33 @@ a { } /* Links on gradient backgrounds */ -.forumbg .header a, .forabg .header a, th a { +.forumbg .header a, +.forabg .header a, +th a { text-decoration: none; } -.forumbg .header a:hover, .forabg .header a:hover, th a:hover { +.forumbg .header a:hover, +.forabg .header a:hover, +th a:hover { text-decoration: underline; } +/* stylelint-disable selector-no-qualifying-type */ + /* Notification mark read link */ .dropdown-extended a.mark_read { - background-position: center center; background-repeat: no-repeat; + background-position: center center; border-radius: 3px 0 0 3px; - display: none; - margin-top: -20px; position: absolute; z-index: 2; - right: 0; top: 50%; + right: 0; + display: none; -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; + margin-top: -20px; } .dropdown-extended li:hover a.mark_read { @@ -53,13 +59,16 @@ a { } .jumpbox-cat-link, -.jumpbox-forum-link { font-weight: bold; } +.jumpbox-forum-link { + font-weight: bold; +} /* Links for forum/topic lists */ -a.forumtitle { - font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif; - font-size: 1.2em; +a.forumtitle, +a.topictitle { + font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; + font-size: 13px; font-weight: bold; text-decoration: none; } @@ -69,10 +78,6 @@ a.forumtitle:hover { } a.topictitle { - font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif; - font-size: 1.2em; - font-weight: bold; - text-decoration: none; display: inline; } @@ -90,7 +95,7 @@ a.lastsubject:hover { } .row-item a:hover { - text-decoration: none + text-decoration: none; } .row-item .topictitle:hover, @@ -111,25 +116,28 @@ a.lastsubject:hover { text-decoration: none; } -.signature a, .signature a:hover { - border: none; +.signature a, +.signature a:hover { text-decoration: underline; + border: none; } /* Profile links */ -.postprofile a, .postprofile dt.author a { +.postprofile a, +.postprofile dt.author a { font-weight: bold; text-decoration: none; } -.postprofile a:hover, .postprofile dt.author a:hover { +.postprofile a:hover, +.postprofile dt.author a:hover { text-decoration: underline; } /* Profile searchresults */ .search .postprofile a { - text-decoration: none; font-weight: normal; + text-decoration: none; } .search .postprofile a:hover { @@ -149,20 +157,20 @@ a.lastsubject:hover { .back2top .top { float: right; - margin-right: -10px; margin-top: 0; + margin-right: -10px; } /* Arrow links */ .arrow-up { - padding-left: 10px; text-decoration: none; border-bottom-width: 0; + padding-left: 10px; } .arrow-up:hover { - + /* add hover styles here */ } .arrow-down { @@ -170,7 +178,7 @@ a.lastsubject:hover { } .arrow-down:hover { - + /* add hover styles here */ } .arrow-left:hover { diff --git a/phpBB/styles/prosilver/theme/normalize.css b/phpBB/styles/prosilver/theme/normalize.css index 23d84492c8..16857d5499 100644 --- a/phpBB/styles/prosilver/theme/normalize.css +++ b/phpBB/styles/prosilver/theme/normalize.css @@ -1,424 +1,465 @@ -/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ +/* stylelint-disable */ + +/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Change the default font family in all browsers (opinionated). + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. */ +/* Document + ========================================================================== */ + html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ + font-family: sans-serif; /* 1 */ + line-height: 1.15; /* 2 */ + -ms-text-size-adjust: 100%; /* 3 */ + -webkit-text-size-adjust: 100%; /* 3 */ } +/* Sections + ========================================================================== */ + /** - * Remove default margin. + * Remove the margin in all browsers (opinionated). */ body { - margin: 0; + margin: 0; } -/* HTML5 display definitions - ========================================================================== */ - /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Add the correct display in IE 9-. */ article, aside, -details, -figcaption, -figure, footer, header, -hgroup, -main, -menu, nav, -section, -summary { - display: block; +section { + display: block; } /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ -audio, -canvas, -progress, -video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ +h1 { + font-size: 2em; + margin: 0.67em 0; } +/* Grouping content + ========================================================================== */ + /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. */ -audio:not([controls]) { - display: none; - height: 0; +figcaption, +figure, +main { /* 1 */ + display: block; } /** - * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * Add the correct margin in IE 8. */ -[hidden], -template { - display: none; +figure { + margin: 1em 40px; } -/* Links - ========================================================================== */ +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} /** - * Remove the gray background color from active links in IE 10. + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { - background-color: transparent; + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ } /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). */ a:active, a:hover { - outline: 0; + outline-width: 0; } -/* Text-level semantics - ========================================================================== */ - /** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: 1px dotted; + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ } /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: bold; + font-weight: inherit; } /** - * Address styling not present in Safari and Chrome. + * Add the correct font weight in Chrome, Edge, and Safari. */ -dfn { - font-style: italic; +b, +strong { + font-weight: bolder; } /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. */ -h1 { - font-size: 2em; - margin: 0.67em 0; +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ } /** - * Address styling not present in IE 8/9. + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. */ mark { - background: #ff0; - color: #000; + background-color: #ff0; + color: #000; } /** - * Address inconsistent and variable font size in all browsers. + * Add the correct font size in all browsers. */ small { - font-size: 80%; + font-size: 80%; } /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } -sup { - top: -0.5em; +sub { + bottom: -0.25em; } -sub { - bottom: -0.25em; +sup { + top: -0.5em; } /* Embedded content - ========================================================================== */ + ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9/10. + * Add the correct display in IE 9-. */ -img { - border: 0; +audio, +video { + display: inline-block; } /** - * Correct overflow not hidden in IE 9/10/11. + * Add the correct display in iOS 4-7. */ -svg:not(:root) { - overflow: hidden; +audio:not([controls]) { + display: none; + height: 0; } -/* Grouping content - ========================================================================== */ - /** - * Address margin not present in IE 8/9 and Safari. + * Remove the border on images inside links in IE 10-. */ -figure { - margin: 1em 40px; +img { + border-style: none; } /** - * Address differences between Firefox and other browsers. + * Hide the overflow in IE. */ -hr { - box-sizing: content-box; - height: 0; +svg:not(:root) { + overflow: hidden; } +/* Forms + ========================================================================== */ + /** - * Contain overflow in all browsers. + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. */ -pre { - overflow: auto; +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ } /** - * Address odd `em`-unit font size rendering in all browsers. + * Show the overflow in IE. + * 1. Show the overflow in Edge. */ -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; +button, +input { /* 1 */ + overflow: visible; } -/* Forms - ========================================================================== */ - /** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ +button, +select { /* 1 */ + text-transform: none; +} + /** - * 1. Correct color not being inherited. - * Known issue: affects color of disabled elements. - * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, -input, -optgroup, -select, -textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Remove the inner border and padding in Firefox. */ -button { - overflow: visible; +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } /** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Restore the focus styles unset by the previous rule. */ -button, -select { - text-transform: none; +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. + * Change the border, margin, and padding in all browsers (opinionated). */ -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } /** - * Re-set default cursor for disabled elements. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. */ -button[disabled], -html input[disabled] { - cursor: default; +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ } /** - * Remove inner padding and border in Firefox 4+. + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Remove the default vertical scrollbar in IE. */ -input { - line-height: normal; +textarea { + overflow: auto; } /** - * It's recommended that you don't attempt to style these elements. - * Firefox's implementation doesn't respect box-sizing, padding, or width. - * - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. */ -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ } /** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; /* 2 */ +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ } /** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } /** - * Define consistent border, margin, and padding. + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. */ -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ } -/** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. */ -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; } +/* Scripting + ========================================================================== */ + /** - * Remove default vertical scrollbar in IE 8/9/10/11. + * Add the correct display in IE 9-. */ -textarea { - overflow: auto; +canvas { + display: inline-block; } /** - * Don't inherit the `font-weight` (applied by a rule above). - * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + * Add the correct display in IE. */ -optgroup { - font-weight: bold; +template { + display: none; } -/* Tables - ========================================================================== */ +/* Hidden + ========================================================================== */ /** - * Remove most spacing between table cells. + * Add the correct display in IE 10-. */ -table { - border-collapse: collapse; - border-spacing: 0; +[hidden] { + display: none; } -td, -th { - padding: 0; -} +/* stylelint-enable */ diff --git a/phpBB/styles/prosilver/theme/plupload.css b/phpBB/styles/prosilver/theme/plupload.css index b1f3ae2da8..118d63d397 100644 --- a/phpBB/styles/prosilver/theme/plupload.css +++ b/phpBB/styles/prosilver/theme/plupload.css @@ -1,6 +1,10 @@ +/* -------------------------------------------------------------- /* + $Plupload +/* -------------------------------------------------------------- */ + .attach-panel-multi { display: none; - margin-bottom: 1em; + margin-bottom: 10px; } .attach-row-tpl { @@ -20,8 +24,8 @@ } .attach-comment .inputbox { - resize: vertical; width: 100%; + resize: vertical; } .attach-filesize { @@ -32,12 +36,12 @@ width: 5%; } -.attach-filesize, .attach-status { +.attach-filesize, +.attach-status { text-align: center; } .attach-controls { - display: inline-block; float: right; } @@ -46,45 +50,46 @@ } .file-total-progress { - height: 2px; - display: block; position: relative; - margin: 4px -10px -6px -10px; + display: block; + height: 2px; + margin: 4px -10px -6px; } .file-progress { - background-color: #CCCCCC; - display:inline-block; - height: 8px; + background-color: #cccccc; + display: inline-block; width: 50px; + height: 8px; } -.file-progress-bar, .file-total-progress-bar { - background-color: green; +.file-progress-bar, +.file-total-progress-bar { + background-color: #008000; display: block; - height: 100%; width: 0; + height: 100%; } .file-status.file-working { - background: url('./images/plupload/throbber.gif'); + background: url("./images/plupload/throbber.gif"); } .file-status.file-uploaded { - background: url('./images/plupload/done.gif'); + background: url("./images/plupload/done.gif"); } .file-status.file-error { - background: url('./images/plupload/error.gif'); + background: url("./images/plupload/error.gif"); } .file-status { display: inline-block; - height: 16px; width: 16px; + height: 16px; } .file-name { - max-width: 65%; vertical-align: bottom; + max-width: 65%; } diff --git a/phpBB/styles/prosilver/theme/print.css b/phpBB/styles/prosilver/theme/print.css index ee916dce51..a846ed34de 100644 --- a/phpBB/styles/prosilver/theme/print.css +++ b/phpBB/styles/prosilver/theme/print.css @@ -1,25 +1,47 @@ -/* Print Style Sheet ----------------------------------------- */ +/* -------------------------------------------------------------- /* + $Print +/* -------------------------------------------------------------- */ +/* stylelint-disable selector-max-compound-selectors */ /* Lots still TODO here! */ /* General markup styles */ * { - padding: 0; margin: 0; + padding: 0; } body { - font: 11pt Verdana, Arial, Helvetica, sans-serif; - color:#000000; + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: 14px; + color: #000000; } -a:link { color: #000000; text-decoration: none; } -a:visited { color: #000000; text-decoration: none; } -a:active { color: #000000; text-decoration: none; } +a:link { + text-decoration: none; + color: #000000; +} + +a:visited { + text-decoration: none; + color: #000000; +} + +a:active { + text-decoration: none; + color: #000000; +} + +img, +.noprint, +.navbar, +.box1, +.divider, +.signature { + display: none; +} -img, .noprint, .navbar, .box1, .divider, .signature { display: none; } /* Display smilies (Bug #47265) */ .content img { display: inline; @@ -27,124 +49,184 @@ img, .noprint, .navbar, .box1, .divider, .signature { display: none; } /* Container for the main body */ .wrap { - margin: 0 2em; + margin: 0 30px; } -p { font-size: 85%; } -.copyright { font-size: 75%; } -.page-number { float:right; width: auto; text-align: right; font-size: 75%; } +p { + font-size: 85%; +} -h1, h2, h3, h1 a, h2 a, h3 a { - font-family: "Trebuchet MS",georgia,Verdana,Sans-serif; - color: #000000; - background: none; - text-decoration: none; +.copyright { + font-size: 75%; +} + +.page-number { + font-size: 75%; + text-align: right; + float: right; + width: auto; +} + +h1, +h2, +h3, +h1 a, +h2 a, +h3 a { + font-family: "Trebuchet MS", georgia, Verdana, sans-serif; font-weight: bold; + text-decoration: none; + background: none; + color: #000000; } -h1 { font-size: 20pt; } -h2 { font-size: 16pt; margin-top: 1em; } -h3 { font-size: 14pt; margin-top: 1em; } +h1 { + font-size: 26px; +} + +h2 { + font-size: 21px; + margin-top: 20px; +} + +h3 { + font-size: 18px; + margin-top: 20px; +} .content { - font-size: 11pt; - line-height: 14pt; - margin-bottom: 1em; font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; + font-size: 14px; + line-height: 18px; overflow: hidden; + margin-bottom: 14px; +} + +.postbody .content { + font-size: 14px; } /* CSS2 Print tip from: http://www.alistapart.com/articles/goingtoprint/ */ -.postbody a:link, .postbody a:visited, .postbody a:hover, .postbody a:active { - text-decoration: underline; - padding: 0.1em 0.2em; - margin: -0.1em -0.2em; - color: #666; - background: none; +.postbody a:link, +.postbody a:visited, +.postbody a:hover, +.postbody a:active { font-size: 100%; + background: none; + color: #666666; + padding: 2px 4px; } -html>body .postbody a:link:after, html>body .postbody a:visited:after { - content: " (" attr(href) ") "; +html > body .postbody a:link:after, +html > body .postbody a:visited:after { font-size: 90%; text-decoration: none; + content: " (" attr(href) ") "; } hr { - height: 1px; background-color: #999999; border-width: 0; + height: 1px; } .author { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 75%; - margin-bottom: 0.6em; } .date { font-family: Verdana, Arial, Helvetica, sans-serif; - float: right; - position: relative; - text-align: right; font-size: 75%; + text-align: right; + position: relative; + float: right; } /* Don't want to print url for names or titles in content area */ -.postbody .author a:link, .postbody .author a:visited, -html>body .postbody .author a:link:after, -html>body .postbody .author a:visited:after, -.postquote .quote-by a:link, .postquote .quote-by a:visited, -html>body .postquote .quote-by a:link:after, -html>body .postquote .quote-by a:visited:after, -html>body .postbody h1 a:link:after, html>body .postbody h2 a:link:after { +.postbody .author a:link, +.postbody .author a:visited, +html > body .postbody .author a:link:after, +html > body .postbody .author a:visited:after, +.postquote .quote-by a:link, +.postquote .quote-by a:visited, +html > body .postquote .quote-by a:link:after, +html > body .postquote .quote-by a:visited:after, +html > body .postbody h1 a:link:after, +html > body .postbody h2 a:link:after, +.post-buttons a:after { text-decoration: none; - content: ""; + content: "" !important; } /* Poster profile */ -.postprofile { display: none; } -.grip-show { display:none; } +.postprofile { + display: none; +} + +.grip-show { + display: none; +} /* Quote */ -.postquote, blockquote { +.postquote, +blockquote { font-size: 85%; - margin: 1em 18% 1em 4%; - padding: 0.5em; - position: relative; - line-height: 1.5em; + line-height: 18px; border: 1px #999999 solid; + position: relative; + margin: 12px 154px 12px 34px; + padding: 6px; +} + +.postquote img { + display: none; +} + +.postquote span { + display: block; +} + +.postquote span .postquote { + font-size: 100%; } -.postquote img { display: none; } -.postquote span { display: block; } -.postquote span .postquote { font-size: 100%; } -.quote-by, blockquote cite { - color: black; - display : block; +.quote-by, +blockquote cite { font-weight: bold; + color: #000000; + display: block; } /* List */ -ol, ul { - margin-left: 15pt +ol, +ul { + margin-left: 20px; } /* Misc page elements */ -div.spacer { clear: both; } +.spacer { + clear: both; +} code { display: block; } /* Accessibility tweaks: Mozilla.org */ -.skip_link { display: none; } +.skip_link { + display: none; +} -.codebox p { display: none; } +.codebox p { + display: none; +} /* stylelint-disable declaration-property-unit-whitelist */ .emoji { - min-height: 18px; + width: 1em; min-width: 18px; height: 1em; - width: 1em; + min-height: 18px; } /* stylelint-enable declaration-property-unit-whitelist */ + +/* stylelint-enable selector-max-compound-selectors */ diff --git a/phpBB/styles/prosilver/theme/responsive.css b/phpBB/styles/prosilver/theme/responsive.css index ca4054c27f..deccb00503 100644 --- a/phpBB/styles/prosilver/theme/responsive.css +++ b/phpBB/styles/prosilver/theme/responsive.css @@ -1,14 +1,19 @@ -/* Responsive Design ----------------------------------------- */ +/* -------------------------------------------------------------- /* + $Responsive +/* -------------------------------------------------------------- */ +/* stylelint-disable selector-max-compound-selectors */ +/* stylelint-disable selector-no-qualifying-type */ @media (max-width: 320px) { - select, .inputbox { + select, + .inputbox { max-width: 240px; } } /* Notifications list -----------------------------------------*/ +---------------------------------------------------------------- */ + @media (max-width: 350px) { .dropdown-extended .dropdown-contents { width: auto; @@ -25,16 +30,16 @@ } .action-bar .search-box .inputbox ::-moz-placeholder { - content: "Search..."; - } + content: "Search..."; + } - .action-bar .search-box .inputbox :-ms-input-placeholder { - content: "Search..."; - } + .action-bar .search-box .inputbox :-ms-input-placeholder { + content: "Search..."; + } - .action-bar .search-box .inputbox ::-webkit-input-placeholder { - content: "Search..."; - } + .action-bar .search-box .inputbox ::-webkit-input-placeholder { + content: "Search..."; + } } @media (max-width: 500px) { @@ -42,7 +47,8 @@ white-space: normal; } - select, .inputbox { + select, + .inputbox { max-width: 260px; } @@ -54,10 +60,11 @@ width: 100%; } - dl.details dt, dl.details dd { - width: auto; - float: none; + dl.details dt, + dl.details dd { text-align: left; + float: none; + width: auto; } dl.details dd { @@ -65,20 +72,24 @@ } p.responsive-center { - float: none; text-align: center; + float: none; margin-bottom: 5px; } + .phpbb_alert { + top: 25px; + } + .action-bar > div { margin-bottom: 5px; - } + } .action-bar > .pagination { + text-align: center; float: none; clear: both; padding-bottom: 1px; - text-align: center; } .action-bar > .pagination li.page-jump { @@ -95,13 +106,28 @@ } .attach-controls { - margin-top: 5px; width: 100%; + margin-top: 5px; } .quick-links .dropdown-trigger span { display: none; } + + .rtl dl.details dt, + .rtl dl.details dd { + text-align: right; + float: none; + } + + .rtl dl.details dd { + margin-right: 20px; + margin-left: 0; + } + + .rtl .captcha-panel dd.captcha { + margin-right: 0; + } } @media (max-width: 550px) { @@ -116,16 +142,39 @@ ul.topiclist.forums dd.lastpost { display: none; } + + /* RTL */ + + /* .topiclist lists + ---------------------------------------- */ + .rtl ul.topiclist.forums dt { + margin-left: 0; + } + + .rtl ul.topiclist.forums dt .list-inner { + margin-left: 0; + } } @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; } + .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; } @@ -137,29 +186,37 @@ .wrap { border: none; border-radius: 0; - margin: 0; min-width: 290px; + margin: 0; padding: 0 5px; } /* Common block wrappers - ----------------------------------------*/ - .headerbar, .navbar, .forabg, .forumbg, .post, .panel { + ---------------------------------------------------------------- */ + .headerbar, + .navbar, + .forabg, + .forumbg, + .post, + .panel { border-radius: 0; - margin-left: -5px; margin-right: -5px; + margin-left: -5px; } - .cp-main .forabg, .cp-main .forumdb, .cp-main .post, .cp-main .panel { + .cp-main .forabg, + .cp-main .forumdb, + .cp-main .post, + .cp-main .panel { border-radius: 7px; } /* Logo block - ----------------------------------------*/ + ---------------------------------------------------------------- */ .site-description { + text-align: center; float: none; width: auto; - text-align: center; } .logo { @@ -169,40 +226,45 @@ padding: 10px; } - .site-description h1, .site-description p { + .site-description h1, + .site-description p { + line-height: 24px; text-align: inherit; + text-overflow: ellipsis; float: none; - margin: 5px; - line-height: 1.2em; overflow: hidden; - text-overflow: ellipsis; + margin: 5px; } - .site-description p, .search-header { + .site-description p, + .search-header { display: none; } /* Navigation - ----------------------------------------*/ + ---------------------------------------------------------------- */ .headerbar + .navbar { margin-top: -5px; } /* Search - ----------------------------------------*/ - .responsive-search { display: block !important; } + ---------------------------------------------------------------- */ + .responsive-search { + display: block !important; + } - /* .topiclist lists - ----------------------------------------*/ + /* Forums and topicslists + ---------------------------------------------------------------- */ li.header dt { + font-size: 12px; + line-height: 12px; 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 { + ul.topiclist li.header dt, + ul.topiclist li.header dt .list-inner { margin-right: 0 !important; padding-right: 0; } @@ -211,10 +273,14 @@ 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 { + 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; } @@ -233,33 +299,28 @@ 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; + text-align: left; position: absolute; - right: 5px; top: 0; - margin: 0; + right: 5px; + display: block; width: auto; min-width: 0; - text-align: left; + margin: 0; } - ul.topiclist.forums dd.topics dfn, ul.topiclist.topics dd.posts dfn { + ul.topiclist.forums dd.topics dfn, + ul.topiclist.topics dd.posts dfn { + font-weight: normal; position: relative; left: 0; - width: auto; display: inline; - font-weight: normal; } li.row .responsive-show strong { @@ -269,13 +330,13 @@ ul.topiclist li.row dt a.subforum { vertical-align: bottom; - overflow: hidden; text-overflow: ellipsis; + overflow: hidden; max-width: 100px; } /* Pagination - ----------------------------------------*/ + ---------------------------------------------------------------- */ .pagination > ul { margin: 5px 0 0; } @@ -285,19 +346,24 @@ } /* Responsive tables - ----------------------------------------*/ - table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { + ---------------------------------------------------------------- */ + table.responsive, + table.responsive tbody, + table.responsive tr, + table.responsive td { display: block; } - table.responsive thead, table.responsive th { + table.responsive thead, + table.responsive th { display: none; } - table.responsive.show-header thead, table.responsive.show-header th:first-child { + table.responsive.show-header thead, + table.responsive.show-header th:first-child { + text-align: left !important; display: block; width: auto !important; - text-align: left !important; } table.responsive.show-header th:first-child span.rank-img { @@ -309,8 +375,8 @@ } table.responsive td { - width: auto !important; text-align: left !important; + width: auto !important; padding: 4px; } @@ -323,8 +389,8 @@ } table.responsive td > dfn:after { - content: ':'; padding-right: 5px; + content: ":"; } table.responsive span.rank-img { @@ -337,20 +403,26 @@ } /* Forms - ----------------------------------------*/ - fieldset dt, fieldset.fields1 dt, fieldset.fields2 dt { - width: auto; + ---------------------------------------------------------------- */ + fieldset dt, + fieldset.fields1 dt, + fieldset.fields2 dt { float: none; + width: auto; } - fieldset dd, fieldset.fields1 dd, fieldset.fields2 dd { - margin-left: 0px; + fieldset dd, + fieldset.fields1 dd, + fieldset.fields2 dd { + margin-left: 0; } - textarea, dd textarea, .message-box textarea { - width: 100%; - -moz-box-sizing: border-box; + textarea, + dd textarea, + .message-box textarea { + -webkit-box-sizing: border-box; box-sizing: border-box; + width: 100%; } dl.pmlist dt { @@ -367,7 +439,8 @@ padding-left: 20px; } - .smiley-box, .message-box { + .smiley-box, + .message-box { float: none; width: auto; } @@ -380,7 +453,9 @@ display: none; } - .colour-palette, .colour-palette tbody, .colour-palette tr { + .colour-palette, + .colour-palette tbody, + .colour-palette tr { display: block; } @@ -389,14 +464,15 @@ margin-right: 2px; } - .horizontal-palette td:nth-child(2n), .vertical-palette tr:nth-child(2n) { + .horizontal-palette td:nth-child(2n), + .vertical-palette tr:nth-child(2n) { display: none; } fieldset.quick-login label { + white-space: normal; display: block; margin-bottom: 5px; - white-space: normal; } fieldset.quick-login label > span { @@ -411,21 +487,23 @@ } fieldset.quick-login label[for="autologin"] { - display: inline-block; text-align: right; + display: inline-block; min-width: 50%; } /* User profile - ----------------------------------------*/ - .column1, .column2, .left-box.profile-details { + ---------------------------------------------------------------- */ + .column1, + .column2, + .left-box.profile-details { float: none; - width: auto; clear: both; + width: auto; } /* Polls - ----------------------------------------*/ + ---------------------------------------------------------------- */ fieldset.polls dt { width: 90%; } @@ -438,46 +516,51 @@ width: 20%; } - fieldset.polls dd.resultbar, fieldset.polls dd.poll_option_percent { + fieldset.polls dd.resultbar, + fieldset.polls dd.poll_option_percent { margin-top: 5px; } /* Post - ----------------------------------------*/ + ---------------------------------------------------------------- */ .postbody { position: inherit; } - .postprofile, .postbody, .search .postbody { + .postprofile, + .postbody, + .search .postbody { display: block; - width: auto; float: none; - padding: 0; + width: auto; min-height: 0; + padding: 0; } .post .postprofile { + border-width: 0 0 1px; + overflow: hidden; width: auto; - border-width: 0 0 1px 0; - padding-bottom: 5px; + min-height: 40px; margin: 0; margin-bottom: 5px; - min-height: 40px; - overflow: hidden; + padding-bottom: 5px; } .postprofile dd { display: none; } - .postprofile dt, .postprofile dd.profile-rank, .search .postprofile dd { + .postprofile dt, + .postprofile dd.profile-rank, + .search .postprofile dd { display: block; margin: 0; } .postprofile .has-avatar .avatar-container { - margin: 0; overflow: inherit; + margin: 0; } .postprofile .avatar-container:after { @@ -495,28 +578,23 @@ } .has-profile .postbody h3 { - margin-left: 0 !important; margin-right: 0 !important; + margin-left: 0 !important; } .has-profile .post-buttons { - right: 30px; - top: 15px; - } - - .online { - background-size: 40px; + margin: 5px; } /* Misc stuff - ----------------------------------------*/ + ---------------------------------------------------------------- */ h2 { - margin-top: .5em; + margin-top: 12px; } p { - margin-bottom: .5em; overflow: hidden; + margin-bottom: 8px; } p.rightside { @@ -551,33 +629,206 @@ .attach-comment dfn { width: 100%; } + + /* RTL */ + + /* .topiclist lists + ---------------------------------------- */ + .rtl ul.topiclist li.header dt, + .rtl ul.topiclist li.header dt .list-inner { + margin-left: 0 !important; + padding-left: 0; + } + + .rtl ul.topiclist dt, + .rtl ul.topiclist dt .list-inner, + .rtl ul.topiclist.missing-column dt, + .rtl ul.topiclist.missing-column dt .list-inner, + .rtl ul.topiclist.two-long-columns dt, + .rtl ul.topiclist.two-long-columns dt .list-inner, + .rtl ul.topiclist.two-columns dt, + .rtl ul.topiclist.two-columns dt .list-inner { + margin-left: 0; + } + + .rtl ul.topiclist dt .list-inner.with-mark { + padding-left: 34px; + } + + /* Forums and topics lists + ---------------------------------------- */ + .rtl ul.topiclist.forums dt { + margin-left: -250px; + } + + .rtl ul.topiclist.forums dt .list-inner { + margin-left: 250px; + } + + .rtl ul.topiclist dd.mark { + text-align: right; + right: auto; + left: 5px; + } + + .rtl table.responsive.show-header thead, + .rtl table.responsive.show-header th:first-child { + text-align: right !important; + } + + .rtl table.responsive td { + text-align: right !important; + } + + /* User profile + ---------------------------------------- */ + .rtl .column1, + .rtl .column2, + .rtl .left-box.profile-details { + float: none; + } + + /* Post + ---------------------------------------- */ + .rtl .postprofile, + .rtl .postbody, + .rtl .search .postbody { + float: none; + } + + .rtl .post .postprofile { + border-width: 0 0 1px; + } + + .rtl .postprofile dt, + .rtl .postprofile dd.profile-rank, + .rtl .search .postprofile dd { + margin: 0; + } + + .rtl .postprofile .avatar { + margin-right: 0; + margin-left: 5px; + } + + .rtl .has-profile .post-buttons { + left: 20px; + } + + /* Forms + ---------------------------------------- */ + .rtl fieldset dt, + .rtl fieldset.fields1 dt, + .rtl fieldset.fields2 dt { + float: none; + } + + .rtl fieldset dd, + .rtl fieldset.fields1 dd, + .rtl fieldset.fields2 dd { + margin-right: 20px; + } } @media (min-width: 700px) { - .postbody { width: 70%; } + .postbody { + width: 70%; + } } @media (min-width: 850px) { - .postbody { width: 76%; } + .postbody { + width: 76%; + } } @media (max-width: 850px) { - .postprofile { width: 28%; } - - + .postprofile { + width: 28%; + } } @media (min-width: 701px) and (max-width: 950px) { - ul.topiclist dt { - margin-right: -410px; + margin-right: -410px; } ul.topiclist dt .list-inner { - margin-right: 410px; + margin-right: 410px; + } + + dd.posts, + dd.topics, + dd.views { + width: 80px; + } +} + +/* Responsive *CP navigation +---------------------------------------- */ +@media (max-width: 900px) { + .nojs .tabs a span, + .nojs .minitabs a span { + letter-spacing: -0.03em; + text-overflow: ellipsis; + overflow: hidden; + max-width: 40px; + } + + .cp-menu, + .navigation, + .cp-main { + float: none; + width: auto; + margin: 0; } - dd.posts, dd.topics, dd.views { - width: 80px; + .navigation { + max-width: 320px; + margin: 0 auto; + padding: 0; + } + + .navigation a { + background-image: none; + } + + .navigation li:first-child a { + border-top-left-radius: 5px; + border-top-right-radius: 5px; + } + + .navigation li:last-child a { + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; + } + + .rtl .cp-menu, + .rtl .navigation, + .rtl .cp-main { + float: none; + } + + .navigation a, + .rtl .navigation a { + background: #b2c2cf; + } +} + +@media (max-width: 992px) { + .row .pagination { + text-align: left; + float: left; + margin-top: 4px; + margin-bottom: 4px; + } +} + +@media (max-width: 1220px) { + .wrap { + margin: 0 12px; } } + +/* stylelint-enable selector-max-compound-selectors */ +/* stylelint-enable selector-no-qualifying-type */ diff --git a/phpBB/styles/prosilver/theme/stylesheet.css b/phpBB/styles/prosilver/theme/stylesheet.css index c402d563c6..a436c1668a 100644 --- a/phpBB/styles/prosilver/theme/stylesheet.css +++ b/phpBB/styles/prosilver/theme/stylesheet.css @@ -7,15 +7,17 @@ -------------------------------------------------------------- */ -@import url("normalize.css?v=3.3"); -@import url("base.css?v=3.3"); -@import url("utilities.css?v=3.3"); -@import url("common.css?v=3.3"); -@import url("links.css?v=3.3"); -@import url("content.css?v=3.3"); -@import url("buttons.css?v=3.3"); -@import url("cp.css?v=3.3"); -@import url("forms.css?v=3.3"); -@import url("icons.css?v=3.3"); -@import url("colours.css?v=3.3"); -@import url("responsive.css?v=3.3"); +@import url("normalize.css?v=4.0"); +@import url("base.css?v=4.0"); +@import url("utilities.css?v=4.0"); +@import url("common.css?v=4.0"); +@import url("links.css?v=4.0"); +@import url("content.css?v=4.0"); +@import url("buttons.css?v=4.0"); +@import url("cp.css?v=4.0"); +@import url("forms.css?v=4.0"); +@import url("icons.css?v=4.0"); +@import url("colours.css?v=4.0"); +@import url("responsive.css?v=4.0"); +@import url("bidi.css?v=4.0"); +@import url("tweaks.css?v=4.0"); diff --git a/phpBB/styles/prosilver/theme/tweaks.css b/phpBB/styles/prosilver/theme/tweaks.css index ba82551f85..4b3b7afd24 100644 --- a/phpBB/styles/prosilver/theme/tweaks.css +++ b/phpBB/styles/prosilver/theme/tweaks.css @@ -1,41 +1,4 @@ -/* Style Sheet Tweaks - -These style definitions are IE 8 & 9 only. -They are required due to the poor CSS support in IE browsers. -------------------------------------------------------------------------------*/ - -/* IE 8 Tweaks (value)\9 equates to IE <= 8 -------------------------------------------------------------------------------*/ - -/* Clear float fix */ -.inner, ul.linklist { zoom: 1\9; } - -/* Align checkboxes/radio buttons nicely */ -dd label input { vertical-align: text-bottom\9; } - -/* Fixes header-avatar aspect-ratio */ -.header-avatar img { height: 20px\9; } - -/* IE8 often can't handle max-width in %, so we use px instead */ -.postprofile .avatar img { max-width: 150px\9; } - - -/* IE 9 Tweaks -------------------------------------------------------------------------------*/ - -/* Border-radius bleed fix in IE9 */ -.search-header, .search-header .inputbox, .search-header a.button { - border-radius: 0; -} - -.headerbar, .forumbg { - background-image: url("./images/bg_header.gif"); -} - -.forabg { - background-image: url("./images/bg_list.gif"); -} - -.tabs .tab > a { - border-radius: 0; -} +/* -------------------------------------------------------------- /* + $Tweaks +/* -------------------------------------------------------------- /* +/* -------------------------------------------------------------- */ diff --git a/phpBB/styles/prosilver/theme/utilities.css b/phpBB/styles/prosilver/theme/utilities.css index cbb8127d1c..ab47754d5d 100644 --- a/phpBB/styles/prosilver/theme/utilities.css +++ b/phpBB/styles/prosilver/theme/utilities.css @@ -1,26 +1,26 @@ -/* -------------------------------------------------------------- +/* -------------------------------------------------------------- /* $Utilities --------------------------------------------------------------- */ +/* -------------------------------------------------------------- */ .sr-only { + border: 0; position: absolute; + overflow: hidden; + clip: rect(0, 0, 0, 0); width: 1px; height: 1px; margin: -1px; padding: 0; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; } .sr-only-focusable:active, .sr-only-focusable:focus { - position: static; - width: auto; - height: auto; - margin: 0; - overflow: visible; - clip: auto; + position: static; + overflow: visible; + clip: auto; + width: auto; + height: auto; + margin: 0; } .clearfix:before, @@ -31,36 +31,55 @@ .container-fluid:after, .row:before, .row:after { - content: " "; display: table; + content: " "; } + .clearfix:after, .container:after, .container-fluid:after, -.row:after { clear: both } +.row:after { + clear: both; +} .center-block { display: block; - margin-left: auto; margin-right: auto; + margin-left: auto; } -.pull-right { float: right !important } -.pull-left { float: left !important } -.hide { display: none !important } -.show { display: block !important } -.invisible { visibility: hidden } +.pull-right { + float: right !important; +} + +.pull-left { + float: left !important; +} + +.hide { + display: none !important; +} + +.show { + display: block !important; +} + +.invisible { + visibility: hidden; +} .text-hide { font: 0/0 a; - color: transparent; - text-shadow: none; background-color: transparent; border: 0; + text-shadow: none; + color: transparent; } .hidden { - display: none ; + display: none; } -.affix { position: fixed } +.affix { + position: fixed; +} |
