From b193114dafa023f685688f7ae9416d2db997ea4e Mon Sep 17 00:00:00 2001 From: Yasara Date: Wed, 29 Mar 2017 01:11:11 +0530 Subject: [PATCH 1/2] ticket/PHPBB3-15109 - Saving somed screen space by placing all smilies in a dropdown box in full screen editor. In here I have added a smiley dropdown to editor to save screen space. Here I have mainly modified posting_editor.html file to remove side smiley box container. Then I have added a new file called smiley_dropdown.html to display a smiley dropdown.This file is included to posting_editor.html file. After that I did necessary modifications to styles in colour.css, common.css and forms.css. All the modifications are commented in the necessary locations. --- .../prosilver/template/posting_editor.html | 43 +- .../prosilver/template/smiley_dropdown.html | 41 + phpBB/styles/prosilver/theme/colours.css | 1199 ++++++++++------- phpBB/styles/prosilver/theme/common.css | 588 ++++---- phpBB/styles/prosilver/theme/forms.css | 202 ++- 5 files changed, 1266 insertions(+), 807 deletions(-) create mode 100644 phpBB/styles/prosilver/template/smiley_dropdown.html diff --git a/phpBB/styles/prosilver/template/posting_editor.html b/phpBB/styles/prosilver/template/posting_editor.html index d963c98e08c..9088dd4519b 100644 --- a/phpBB/styles/prosilver/template/posting_editor.html +++ b/phpBB/styles/prosilver/template/posting_editor.html @@ -39,42 +39,19 @@ -
- - - {L_SMILIES}
- - {smiley.SMILEY_CODE} - - - -
{L_MORE_SMILIES} - - - -
-
- {BBCODE_STATUS}
- - {IMG_STATUS}
- {FLASH_STATUS}
- {URL_STATUS}
- - {SMILIES_STATUS} -
- - - -
- {L_BACK_TO_DRAFTS} - {L_TOPIC_REVIEW} - -
-
- +
+ + +
+ + + + +
+
diff --git a/phpBB/styles/prosilver/template/smiley_dropdown.html b/phpBB/styles/prosilver/template/smiley_dropdown.html new file mode 100644 index 00000000000..66cad77518e --- /dev/null +++ b/phpBB/styles/prosilver/template/smiley_dropdown.html @@ -0,0 +1,41 @@ + + diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index 35490c9338d..f76c6609e95 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -1,115 +1,126 @@ -/* --------------------------------------------------------------- -Colours and backgrounds for common.css --------------------------------------------------------------- */ - -html, body { +/* -------------------------------------------------------------- /* + $Colours +/* -------------------------------------------------------------- */ +/* stylelint-disable selector-max-compound-selectors */ +/* stylelint-disable selector-no-qualifying-type */ +/* stylelint-disable no-indistinguishable-colors */ + +/* colours and backgrounds for common.css + ------------------------------------------------------------- */ +html, +body { + background-color: #f5f7fa; color: #536482; - background-color: #F5F7FA; } h1 { - color: #FFFFFF; + color: #ffffff; } h2 { - color: #28313F; + color: #28313f; } h3 { - border-bottom-color: #CCCCCC; + border-bottom-color: #cccccc; color: #115098; } hr { - border-color: #FFFFFF; - border-top-color: #CCCCCC; + border-color: #ffffff; + border-top-color: #cccccc; } -/* --------------------------------------------------------------- -Colours and backgrounds for links.css --------------------------------------------------------------- */ +/* colours and backgrounds for links.css + ------------------------------------------------------------- */ +a { + color: #105289; +} -a { color: #105289; } -a:hover { color: #D31141; } +a:hover { + color: #d31141; +} -/* Links on gradient backgrounds */ -.forumbg .header a, .forabg .header a, th a { - color: #FFFFFF; +/* links on gradient backgrounds */ +.forumbg .header a, +.forabg .header a, +th a { + color: #ffffff; } -.forumbg .header a:hover, .forabg .header a:hover, th a:hover { - color: #A8D8FF; +.forumbg .header a:hover, +.forabg .header a:hover, +th a:hover { + color: #a8d8ff; } -/* Notification mark read link */ +/* notification mark read link */ .dropdown-extended a.mark_read { - background-color: #FFFFFF; + background-color: #ffffff; } -/* Post body links */ +/* post body links */ .postlink { - border-bottom-color: #368AD2; - color: #368AD2; + border-bottom-color: #368ad2; + color: #368ad2; } .postlink:visited { - border-bottom-color: #5D8FBD; - color: #5D8FBD; + border-bottom-color: #5d8fbd; + color: #5d8fbd; } .postlink:hover { - background-color: #D0E4F6; - color: #0D4473; + background-color: #d0e4f6; + color: #0d4473; } -.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; } -/* Arrow links */ -.arrow-left:hover, .arrow-right:hover { - color: #368AD2; +/* arrow links */ +.arrow-left:hover, +.arrow-right:hover { + color: #368ad2; } -/* Round cornered boxes and backgrounds ----------------------------------------- */ +/* round cornered boxes and backgrounds */ .wrap { - background-color: #FFF; - border-color: #E6E9ED; + background-color: #ffffff; + border-color: #e6e9ed; } .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: #12a3eb; + background-image: linear-gradient(to bottom, #6aceff 0%, #0076b1 2px, #12a3eb 92px, #12a3eb 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: #0076b1; + background-image: linear-gradient(to bottom, #6aceff 0%, #12a3eb 2px, #0076b1 92px, #0076b1 100%); background-repeat: repeat-x; } .navbar { - background-color: #CADCEB; + background-color: #cadceb; } .panel { - background-color: #ECF1F3; - color: #28313F; + background-color: #ecf1f3; + color: #28313f; } .post:target .content { @@ -121,57 +132,58 @@ a:hover { color: #D31141; } } .bg1 { - background-color: #ECF3F7; + background-color: #ecf3f7; } -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: #ecf3f7; } .bg2 { - background-color: #E1EBF2; + background-color: #e1ebf2; } -table.zebra-list tr:nth-child(even) td, ul.zebra-list li:nth-child(even) { - 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; +.bg3 { + background-color: #cadceb; } .ucprowbg { - background-color: #DCDEE2; + background-color: #dcdee2; } .fieldsbg { - background-color: #E7E8EA; + background-color: #e7e8ea; } .site_logo { - background-image: url("./images/site_logo.gif"); + background-image: url('./images/site_logo.gif'); } -/* 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: #bfc1cf; } -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: #cfe1f6; + color: #000000; } table.table1 td { @@ -179,21 +191,20 @@ table.table1 td { } 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; } table.info tbody th { color: #000000; } -/* Misc layout styles ----------------------------------------- */ +/* misc layout styles */ dl.details dt { color: #000000; } @@ -203,144 +214,149 @@ dl.details dd { } .sep { - color: #1198D9; + color: #1198d9; } -/* Icon styles ----------------------------------------- */ -.icon.icon-blue, a:hover .icon.icon-blue { +/* icon styles */ +.icon.icon-blue, +a:hover .icon.icon-blue { color: #196db5; } -.icon.icon-green, a:hover .icon.icon-green{ - color: #1b9A1B; +.icon.icon-green, +a:hover .icon.icon-green { + color: #1b9a1b; } -.icon.icon-red, a:hover .icon.icon-red{ - color: #BC2A4D; +.icon.icon-red, +a:hover .icon.icon-red { + color: #bc2a4d; } -.icon.icon-orange, a:hover .icon.icon-orange{ - color: #FF6600; +.icon.icon-orange, +a:hover .icon.icon-orange { + color: #ff6600; } -.icon.icon-bluegray, a:hover .icon.icon-bluegray{ +.icon.icon-bluegray, +a:hover .icon.icon-bluegray { color: #536482; } -.icon.icon-gray, a:hover .icon.icon-gray{ +.icon.icon-gray, +a:hover .icon.icon-gray { color: #777777; } -.icon.icon-lightgray, a:hover .icon.icon-lightgray{ +.icon.icon-lightgray, +a:hover .icon.icon-lightgray { color: #999999; } -.icon.icon-black, a:hover .icon.icon-black{ +.icon.icon-black, +a:hover .icon.icon-black { color: #333333; } .alert_close .icon:before { - background-color: #FFFFFF; + background-color: #ffffff; } -/* Jumpbox */ +/* jumpbox */ .jumpbox .dropdown li { - border-top-color: #CCCCCC; + border-top-color: #cccccc; } .jumpbox-cat-link { background-color: #0076b1; - border-top-color: #0076B1; - color: #FFFFFF; + border-top-color: #0076b1; + color: #ffffff; } .jumpbox-cat-link:hover { - background-color: #12A3EB; - border-top-color: #12A3EB; - color: #FFFFFF; + background-color: #12a3eb; + border-top-color: #12a3eb; + color: #ffffff; } .jumpbox-forum-link { - background-color: #E1EBF2; + background-color: #e1ebf2; } .jumpbox-forum-link:hover { - background-color: #F6F4D0; + background-color: #f6f4d0; } .jumpbox .dropdown .pointer-inner { - border-color: #E1EBF2 transparent; + border-color: #e1ebf2 transparent; } .jumpbox-sub-link { - background-color: #E1EBF2; + background-color: #e1ebf2; } .jumpbox-sub-link:hover { - background-color: #F1F8FF; + background-color: #f1f8ff; } -/* Miscellaneous styles ----------------------------------------- */ +/* miscellaneous styles */ .copyright { color: #555555; } .error { - color: #BC2A4D; + color: #bc2a4d; } .reported { - background-color: #F7ECEF; + background-color: #f7ecef; } li.reported:hover { - background-color: #ECD5D8 !important; + background-color: #ecd5d8 !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: #ecd5d8; + color: #bc2a4d; } p.post-notice { - background-color: #ECD5D8; + background-color: #ecd5d8; 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: #eef5f9; /* old browsers */ /* ff3.6+ */ + background-image: linear-gradient(to bottom, #d2e0eb 0%, #eef5f9 100%); /* w3c */ + filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#d2e0eb', endcolorstr='#eef5f9', gradienttype=0); /* ie6-9 */ } ul.topiclist li { - color: #4C5D77; + color: #4c5d77; } 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: #00608f; } li.row strong { @@ -348,37 +364,37 @@ li.row strong { } li.row:hover { - background-color: #F6F4D0; + background-color: #f6f4d0; } li.row:hover dd { - border-left-color: #CCCCCC; + border-left-color: #cccccc; } .rtl li.row:hover dd { - border-right-color: #CCCCCC; + border-right-color: #cccccc; 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; } -/* Content container styles -----------------------------------------*/ +/* content container styles */ .content { color: #333333; } -.content h2, .panel h2 { +.content h2, +.panel h2 { + border-bottom-color: #cccccc; color: #115098; - border-bottom-color: #CCCCCC; } dl.faq dt { @@ -386,74 +402,98 @@ dl.faq dt { } .posthilit { - background-color: #F3BFCC; - color: #BC2A4D; + background-color: #f3bfcc; + color: #bc2a4d; } -.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: #cccccc; } -/* Post noticies */ +/* post noticies */ .notice { - border-top-color: #CCCCCC; + border-top-color: #cccccc; } -/* BB Code styles -----------------------------------------*/ -/* Quote block */ +/* bb code styles */ + +/* quote block */ blockquote { - background-color: #EBEADD; - background-image: url("./images/quote.gif"); - border-color:#DBDBCE; + background-color: #ebeadd; + background-image: url('./images/quote.gif'); + border-color: #dbdbce; } .rtl blockquote { - background-image: url("./images/quote_rtl.gif"); + background-image: url('./images/quote_rtl.gif'); } blockquote blockquote { - /* Nested quotes */ - background-color:#EFEED9; + /* nested quotes */ + background-color: #efeed9; } blockquote blockquote blockquote { - /* Nested quotes */ - background-color: #EBEADD; + /* nested quotes */ + background-color: #ebeadd; } -/* Code block */ +/* code block */ .codebox { - background-color: #FFFFFF; - border-color: #C9D2D8; + background-color: #ffffff; + border-color: #c9d2d8; } .codebox p { - border-bottom-color: #CCCCCC; + border-bottom-color: #cccccc; } .codebox code { - color: #2E8B57; + color: #2e8b57; +} + +.syntaxbg { + color: #ffffff; +} + +.syntaxcomment { + color: #ff8000; +} + +.syntaxdefault { + color: #0000bb; } -/* Attachments -----------------------------------------*/ +.syntaxhtml { + color: #000000; +} + +.syntaxkeyword { + color: #007700; +} + +.syntaxstring { + color: #dd0000; +} + +/* attachments */ .attachbox { - background-color: #FFFFFF; - border-color: #C9D2D8; + background-color: #ffffff; + border-color: #c9d2d8; } .pm-message .attachbox { - background-color: #F2F3F3; + background-color: #f2f3f3; } .attachbox dd { - border-top-color: #C9D2D8; + border-top-color: #c9d2d8; } .attachbox p { @@ -468,15 +508,15 @@ blockquote blockquote blockquote { border-color: #999999; } -/* Inline image thumbnails */ +/* inline image thumbnails */ dl.file dd { color: #666666; } dl.thumbnail img { + background-color: #ffffff; border-color: #666666; - background-color: #FFFFFF; } dl.thumbnail dd { @@ -484,18 +524,17 @@ dl.thumbnail dd { } dl.thumbnail dt a:hover { - background-color: #EEEEEE; + background-color: #eeeeee; } dl.thumbnail dt a:hover img { - border-color: #368AD2; + border-color: #368ad2; } -/* Post poll styles -----------------------------------------*/ +/* post poll styles */ fieldset.polls dl { - border-top-color: #DCDEE2; + border-top-color: #dcdee2; color: #666666; } @@ -504,72 +543,75 @@ 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: #aa2346; + border-right-color: #74162c; + border-bottom-color: #74162c; } .rtl .pollbar1 { - border-left-color: #74162C; + border-left-color: #74162c; } .pollbar2 { - background-color: #BE1E4A; - border-bottom-color: #8C1C38; - border-right-color: #8C1C38; + background-color: #be1e4a; + border-right-color: #8c1c38; + border-bottom-color: #8c1c38; } .rtl .pollbar2 { - border-left-color: #8C1C38; + border-left-color: #8c1c38; } .pollbar3 { - background-color: #D11A4E; - border-bottom-color: #AA2346; - border-right-color: #AA2346; + background-color: #d11a4e; + border-right-color: #aa2346; + border-bottom-color: #aa2346; } .rtl .pollbar3 { - border-left-color: #AA2346; + border-left-color: #aa2346; } .pollbar4 { - background-color: #E41653; - border-bottom-color: #BE1E4A; - border-right-color: #BE1E4A; + background-color: #e41653; + border-right-color: #be1e4a; + border-bottom-color: #be1e4a; } .rtl .pollbar4 { - border-left-color: #BE1E4A; + border-left-color: #be1e4a; } .pollbar5 { - background-color: #F81157; - border-bottom-color: #D11A4E; - border-right-color: #D11A4E; + background-color: #f81157; + border-right-color: #d11a4e; + border-bottom-color: #d11a4e; } .rtl .pollbar5 { - border-left-color: #D11A4E; + border-left-color: #d11a4e; } -/* Poster profile block -----------------------------------------*/ +/* poster profile block */ .postprofile { + border-color: #ffffff; color: #666666; - border-color: #FFFFFF; } .pm .postprofile { - border-color: #DDDDDD; + border-color: #dddddd; } .postprofile strong { @@ -577,39 +619,56 @@ fieldset.polls dd div { } .online { - background-image: url("./en/icon_user_online.gif"); + background-image: url('./en/icon_user_online.gif'); } dd.profile-warnings { - color: #BC2A4D; + color: #bc2a4d; } -/* --------------------------------------------------------------- -Colours and backgrounds for buttons.css --------------------------------------------------------------- */ +/* 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 + ------------------------------------------------------------- */ .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: #e9e9e9; /* old browsers */ /* ff3.6+ */ + background-image: linear-gradient(to bottom, #ffffff 0%, #e9e9e9 100%); /* w3c */ + border-color: #c7c3bf; + -webkit-box-shadow: 0 0 0 1px #ffffff inset; + box-shadow: 0 0 0 1px #ffffff inset; + color: #d31141; + filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#ffffff', endcolorstr='#e9e9e9', gradienttype=0); /* ie6-9 */ } .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-color: #ffffff; /* old browsers */ /* ff3.6+ */ + background-image: linear-gradient(to bottom, #e9e9e9 0%, #ffffff 100%); /* w3c */ + border-color: #0a8ed0; + text-shadow: 1px 1px 0 #ffffff, -1px -1px 0 #ffffff, -1px -1px 0 rgba(188, 42, 77, 0.2); + filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#e9e9e9', endcolorstr='#ffffff', gradienttype=0); /* ie6-9 */ } - .button .icon, .button-secondary { color: #8f8f8f; @@ -619,336 +678,512 @@ Colours and backgrounds for buttons.css .button-secondary:hover, .button:focus .icon, .button:hover .icon { - color: #0A8ED0; + color: #0a8ed0; } .button-search:hover, .button-search-end:hover { - border-color: #C7C3BF; + border-color: #c7c3bf; +} + +.caret { + border-color: #c7c3bf; } -.caret { border-color: #DADADA; } -.caret { border-color: #C7C3BF; } +.contact-icons a { + border-color: #dcdcdc; +} -.contact-icons a { border-color: #DCDCDC; } -.contact-icons a:hover { background-color: #F2F6F9; } +.contact-icons a:hover { + background-color: #f2f6f9; +} -/* Pagination ----------------------------------------- */ +/* pagination */ .pagination li a { - background: #ECEDEE; - filter: none; - border-color: #B4BAC0; - box-shadow: none; + background: #ecedee; + border-color: #b4bac0; -webkit-box-shadow: none; - color: #5C758C; + box-shadow: none; + color: #5c758c; + -webkit-filter: none; + filter: none; } .pagination li.ellipsis span { background: transparent; - color: #000000; + color: #000000; } .pagination li.active span { - background: #4692BF; - border-color: #4692BF; - color: #FFFFFF; + background: #4692bf; + border-color: #4692bf; + 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: #368ad2; + border-color: #368ad2; + color: #ffffff; text-shadow: none; + -webkit-filter: none; + filter: none; } -/* Search box ---------------------------------------------- */ +/* search box */ .search-box .inputbox, .search-box .inputbox:hover, .search-box .inputbox:focus { - border-color: #C7C3BF; + border-color: #c7c3bf; } .search-header { - box-shadow: 0 0 10px #0075B0; + box-shadow: 0 0 10px #0075b0; } -/* Icon images ----------------------------------------- */ +/* 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'); +} -.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"); } +.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"); } +.topic_unread { + background-image: url('./images/topic_unread.gif'); +} +.topic_unread_mine { + background-image: url('./images/topic_unread_mine.gif'); +} -/* --------------------------------------------------------------- -Colours and backgrounds for cp.css --------------------------------------------------------------- */ +.topic_unread_hot { + background-image: url('./images/topic_unread_hot.gif'); +} -/* Main CP box -----------------------------------------*/ +.topic_unread_hot_mine { + background-image: url('./images/topic_unread_hot_mine.gif'); +} -.panel-container h3, .panel-container hr, .cp-menu hr { - border-color: #A4B3BF; +.topic_unread_locked { + background-image: url('./images/topic_unread_locked.gif'); +} + +.topic_unread_locked_mine { + background-image: url('./images/topic_unread_locked_mine.gif'); +} + + +/* colours and backgrounds for cp.css + ------------------------------------------------------------- */ + +/* main cp box */ + +.panel-container h3, +.panel-container hr, +.cp-menu hr { + border-color: #a4b3bf; } .panel-container .panel li.row { - border-bottom-color: #B5C1CB; - border-top-color: #F9F9F9; + border-top-color: #f9f9f9; + border-bottom-color: #b5c1cb; } ul.cplist { - border-top-color: #B5C1CB; + border-top-color: #b5c1cb; } -.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; + color: #333333; } .cp-main .pm-message { - border-color: #DBDEE2; - background-color: #FFFFFF; + background-color: #ffffff; + border-color: #dbdee2; } -/* CP tabbed menu -----------------------------------------*/ +/* cp tabbed menu */ .tabs .tab > a { - background: #BACCD9; + background: #baccd9; color: #536482; } .tabs .tab > a:hover { - background: #DDEDFB; - color: #D31141; + background: #ddedfb; + color: #d31141; } .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; + background-color: #cadceb; /* old browsers */ /* ff3.6+ */ + background-image: linear-gradient(to bottom, #e2f2ff 0%, #cadceb 100%); /* w3c */ + border-color: #cadceb; + box-shadow: 0 1px 1px #f2f9ff inset; color: #333333; + filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#e2f2ff', endcolorstr='#cadceb', gradienttype=0); /* ie6-9 */ } .tabs .activetab > a:hover { color: #000000; } -/* Mini tabbed menu used in MCP -----------------------------------------*/ +/* mini tabbed menu used in mcp */ .minitabs .tab > a { - background-color: #E1EBF2; + background-color: #e1ebf2; } .minitabs .activetab > a, .minitabs .activetab > a:hover { - background-color: #F9F9F9; + background-color: #f9f9f9; color: #333333; } -/* Responsive tabs -----------------------------------------*/ +/* responsive tabs */ .responsive-tab .responsive-tab-link:before { border-color: #536482; } .responsive-tab .responsive-tab-link:hover:before { - border-color: #D31141; + border-color: #d31141; } -/* UCP navigation menu -----------------------------------------*/ +/* 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: #cadceb; /* old browsers */ /* ff3.6+ */ + background-image: linear-gradient(to right, #b4c4d1 50%, #cadceb 100%); /* w3c */ + color: #333333; + filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#b4c4d1', endcolorstr='#cadceb', gradienttype=1); /* ie6-9 */ } .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: #b4c4d1; /* old browsers */ /* ff3.6+ */ + background-image: linear-gradient(to right, #cadceb 50%, #b4c4d1 100%); /* w3c */ + filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#cadceb', endcolorstr='#b4c4d1', gradienttype=1); /* ie6-9 */ } .navigation a:hover { - background: #AABAC6; - color: #BC2A4D; - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + background: #aabac6; + color: #bc2a4d; + filter: progid:dximagetransform.microsoft.gradient(enabled = false); } .navigation .active-subsection a { - background: #F9F9F9; - color: #D31141; - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + background: #f9f9f9; + color: #d31141; + filter: progid:dximagetransform.microsoft.gradient(enabled = false); } .navigation .active-subsection a:hover { - color: #D31141; + color: #d31141; } -@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) -{ - #navigation a, .rtl #navigation a { - background: #B2C2CF; +/* This ID needs factored out */ +@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) { + /* stylelint-disable selector-no-id */ + #navigation a, + .rtl #navigation a { + background: #b2c2cf; } + /* stylelint-enable */ } -/* Preferences pane layout -----------------------------------------*/ +/* stylelint-disable selector-max-compound-selectors */ +/* stylelint-disable selector-no-qualifying-type */ +/* stylelint-disable no-indistinguishable-colors */ + +/* preferences pane layout */ .panel-container h2 { color: #333333; } .panel-container .panel { - background-color: #F9F9F9; + background-color: #f9f9f9; } .cp-main .pm { - background-color: #FFFFFF; + background-color: #ffffff; } -/* Friends list */ +/* friends list */ .cp-mini { - background-color: #EEF5F9; + background-color: #eef5f9; } dl.mini dt { color: #425067; } -/* 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: #bc2a4d; + border-left-color: #bc2a4d; } -.pmlist li.pm_marked_colour, .pm_marked_colour { - border-color: #FF6600; +.pmlist li.pm_marked_colour, +.pm_marked_colour { + border-color: #ff6600; } -.pmlist li.pm_replied_colour, .pm_replied_colour { - border-color: #A9B8C2; +.pmlist li.pm_replied_colour, +.pm_replied_colour { + border-color: #a9b8c2; } -.pmlist li.pm_friend_colour, .pm_friend_colour { - border-color: #5D8FBD; +.pmlist li.pm_friend_colour, +.pm_friend_colour { + border-color: #5d8fbd; } -.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: #cccccc; } .gallery label:hover { - background-color: #EEE; + background-color: #eeeeee; } -/* --------------------------------------------------------------- -Colours and backgrounds for forms.css --------------------------------------------------------------- */ +/* colours and backgrounds for forms.css + ------------------------------------------------------------- */ -/* General form styles -----------------------------------------*/ +/* general form styles */ select { + background-color: #fafafa; border-color: #666666; - background-color: #FAFAFA; - color: #000; + color: #000000; } label { @@ -959,17 +1194,16 @@ option.disabled-option { color: graytext; } -/* Definition list layout for forms ----------------------------------------- */ +/* definition list layout for forms */ dd label { - color: #333; + color: #333333; } fieldset.fields1 { background-color: transparent; } -/* Hover effects */ +/* hover effects */ fieldset dl:hover dt label { color: #000000; } @@ -978,13 +1212,12 @@ fieldset.fields2 dl:hover dt label { color: inherit; } -/* Quick-login on index page */ +/* quick-login on index page */ fieldset.quick-login input.inputbox { - background-color: #F2F3F3; + background-color: #f2f3f3; } -/* Posting page styles -----------------------------------------*/ +/* posting page styles */ .message-box textarea { color: #333333; @@ -998,11 +1231,10 @@ fieldset.quick-login input.inputbox { outline-color: rgba(17, 163, 234, 0.5); } -/* Input field styles ----------------------------------------- */ +/* input field styles */ .inputbox { - background-color: #FFFFFF; - border-color: #B4BAC0; + background-color: #ffffff; + border-color: #b4bac0; color: #333333; } @@ -1015,11 +1247,11 @@ fieldset.quick-login input.inputbox { } .inputbox:hover { - border-color: #11A3EA; + border-color: #11a3ea; } .inputbox:focus { - border-color: #11A3EA; + border-color: #11a3ea; } .inputbox:focus:-moz-placeholder { @@ -1031,18 +1263,21 @@ fieldset.quick-login input.inputbox { } -/* Form button styles ----------------------------------------- */ +/* form button styles */ -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 */ +a.button1, +input.button1, +input.button3, +a.button2, +input.button2 { + background-color: #efefef; /* old browsers */ /* ff3.6+ */ + background-image: linear-gradient(to bottom, #d2d2d2 0%, #efefef 100%); /* w3c */ + color: #000000; + filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#d2d2d2', endcolorstr='#efefef', gradienttype=0); /* ie6-9 */ } -a.button1, input.button1 { +a.button1, +input.button1 { border-color: #666666; } @@ -1050,62 +1285,71 @@ input.button3 { background-image: none; } -/* Alternative button */ -a.button2, input.button2, input.button3 { +/* alternative button */ +a.button2, +input.button2, +input.button3 { border-color: #666666; } /* button in the style of the form buttons */ -a.button1, a.button2 { +a.button1, +a.button2 { color: #000000; } -/* 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 */ +/* hover states */ +a.button1:hover, +input.button1:hover, +a.button2:hover, +input.button2:hover, +input.button3:hover { + background-color: #d2d2d2; /* old browsers */ /* ff3.6+ */ + background-image: linear-gradient(to bottom, #efefef 0%, #d2d2d2 100%); /* w3c */ + border-color: #d31141; + color: #d31141; + 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; +/* focus states */ +input.button1:focus, +input.button2:focus, +input.button3:focus { + border-color: #11a3ea; + color: #0f4987; } input.disabled { color: #666666; } -/* jQuery popups ----------------------------------------- */ +/* jquery popups */ .phpbb_alert { - background-color: #FFFFFF; + background-color: #ffffff; border-color: #999999; } + .darken { background-color: #000000; } .loading_indicator { background-color: #000000; - background-image: url("./images/loading.gif"); + background-image: url('./images/loading.gif'); } .dropdown-extended ul li { - border-top-color: #B9B9B9; + border-top-color: #b9b9b9; } .dropdown-extended ul li:hover { - background-color: #CFE1F6; + background-color: #cfe1f6; color: #000000; } -.dropdown-extended .header, .dropdown-extended .footer { - border-color: #B9B9B9; +.dropdown-extended .header, +.dropdown-extended .footer { + border-color: #b9b9b9; color: #000000; } @@ -1115,27 +1359,26 @@ input.disabled { } .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: #f1f8ff; /* old browsers */ /* ff3.6+ */ + background-image: linear-gradient(to bottom, #f1f8ff 0%, #cadceb 100%); /* w3c */ + filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#f1f8ff', endcolorstr='#cadceb', gradienttype=0); /* ie6-9 */ } .dropdown .pointer { - border-color: #B9B9B9 transparent; + border-color: #b9b9b9 transparent; } .dropdown .pointer-inner { - border-color: #FFF transparent; + border-color: #ffffff transparent; } .dropdown-extended .pointer-inner { - border-color: #F1F8FF transparent; + border-color: #f1f8ff transparent; } .dropdown .dropdown-contents { - background: #fff; - border-color: #B9B9B9; + background: #ffffff; + border-color: #b9b9b9; box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2); } @@ -1143,26 +1386,46 @@ input.disabled { 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: #dcdcdc; } .dropdown li.separator { - border-color: #DCDCDC; + border-color: #dcdcdc; } -/* Notifications ----------------------------------------- */ +/*smiley dropbox + -----------------------------------------*/ + +.dropdown .smiley-content { + background: #fff; + border-color: #B9B9B9; + box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2); +} + +.smiley-box .smiley-list{ + background-color:white; +} + +.smiley-box .smiley-list a{ + background-color:white; +} + +/* notifications */ .notification_list p.notification-time { - color: #4C5D77; + color: #4c5d77; } -li.notification-reported strong, li.notification-disapproved strong { - color: #D31141; +li.notification-reported strong, +li.notification-disapproved strong { + color: #d31141; } .badge { - background-color: #D31141; + background-color: #d31141; color: #ffffff; } +/* stylelint-enable */ + diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index ed2cc369b1e..b120f001e4a 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -1,7 +1,12 @@ -/* 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%; } @@ -10,27 +15,27 @@ body { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 10px; 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-weight: bold; + font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 2em; + font-weight: bold; + margin-top: 15px; + margin-right: 200px; } h2 { /* Forum header titles */ - font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; - font-weight: normal; + font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 2em; - margin: 0.8em 0 0.2em 0; + font-weight: normal; + margin: 0.8em 0 0.2em; } h2.solo { @@ -40,24 +45,24 @@ h2.solo { h3 { /* Sub-headers (also used as post headers, but defined later) */ font-family: Arial, Helvetica, sans-serif; + font-size: 1.05em; 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-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif; font-size: 1.3em; } p { - line-height: 1.3em; font-size: 1.1em; + line-height: 1.3em; margin-bottom: 1.5em; } @@ -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 { @@ -93,19 +98,13 @@ p.jumpbox-return { float: left; } -b, strong { - font-weight: bold; -} - -.text-strong { +b, +strong { font-weight: bold; } -i, em { - font-style: italic; -} - -.text-italics { +i, +em { font-style: italic; } @@ -125,24 +124,30 @@ 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; } @@ -152,9 +157,11 @@ a:hover { text-decoration: underline; } } } + + .page-body { - margin: 4px 0; clear: both; + margin: 4px 0; } .page-footer { @@ -194,51 +201,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; + background-repeat: no-repeat; 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; @@ -254,20 +261,22 @@ ul.linklist { } ul.linklist > li { - float: left; font-size: 1.1em; line-height: 2.2em; - list-style-type: none; + float: left; + 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 { @@ -275,17 +284,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 { @@ -293,7 +302,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%; } @@ -314,18 +324,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, @@ -343,8 +353,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, @@ -353,23 +363,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; } @@ -387,15 +397,15 @@ a.header-avatar span:after { } .dropdown { - display: none; + border: 1px solid transparent; + border-radius: 5px; position: absolute; - left: 0; top: 1.2em; + left: 0; z-index: 2; - border: 1px solid transparent; - border-radius: 5px; - padding: 9px 0 0; + display: none; margin-right: -500px; + padding: 9px 0 0; } .dropdown.live-search { @@ -412,11 +422,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 { @@ -428,38 +439,41 @@ 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 */ } -.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 { + 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 { @@ -469,19 +483,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 { @@ -497,13 +511,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 { @@ -511,44 +521,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: 1em !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 { @@ -559,7 +560,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; } @@ -576,7 +579,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; } @@ -585,22 +590,66 @@ 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 +/* Smiley Dropdown +----------------------------------------*/ + +.dropdown .smiley-content{ + display: inline-block; + width:200px; + z-index: 2; + overflow: hidden; + overflow-y: auto; + border: 1px solid transparent; + border-radius: 5px; + padding: 5px; + position: relative; + max-height: 300px; +} + + + +.smiley-box ul{ + display: inline; + margin:0; +} + +.smiley-box .smiley-list{ + display: inline-block; + border:none; +} + +.smiley-box .smiley-list a{ + padding:0; + text-decoration:none; +} + +/*Smiley Dropdown menu ----------------------------------------*/ +.dropdown-container.smiley-container { + position:absolute; + right:0; + top:5px; + cursor:pointer; + margin-right:-18px; +} + +/* 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 { @@ -608,24 +657,46 @@ a.header-avatar span:after { } .breadcrumbs .crumb a { - white-space: nowrap; text-overflow: ellipsis; vertical-align: bottom; + white-space: nowrap; 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.3px; +} -.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.4px; +} + +.breadcrumbs.wrapped .crumb.wrapped-tiny a { + letter-spacing: -0.5px; +} + +.breadcrumbs .crumb.wrapped-max a { + max-width: 120px; +} + +.breadcrumbs .crumb.wrapped-wide a { + max-width: 100px; +} + +.breadcrumbs .crumb.wrapped-medium a { + max-width: 80px; +} + +.breadcrumbs .crumb.wrapped-small a { + max-width: 60px; +} + +.breadcrumbs .crumb.wrapped-tiny a { + max-width: 40px; +} /* Table styles -----------------------------------------*/ +---------------------------------------- */ table.table1 { width: 100%; } @@ -635,10 +706,10 @@ table.table1 { } table.table1 thead th { + font-size: 1em; font-weight: normal; - text-transform: uppercase; line-height: 1.3em; - font-size: 1em; + text-transform: uppercase; padding: 0 0 4px 3px; } @@ -655,28 +726,68 @@ table.table1 td { } 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: 2em; + white-space: nowrap; +} + +table.table1 thead .autocol { + padding-left: 1em; +} table.table1 span.rank-img { float: right; @@ -688,10 +799,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 { @@ -709,6 +820,7 @@ table.info tbody th { /* Misc layout styles ---------------------------------------- */ + /* column[1-2] styles are containers for two column layouts */ .column1 { float: left; @@ -724,9 +836,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%; } @@ -735,44 +847,47 @@ 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-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif; */ font-size: 1.1em; } 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 { @@ -780,7 +895,7 @@ fieldset.fields1 dd.recipients { margin-left: 1em; } -fieldset.fields1 ul.recipients input.button2{ +fieldset.fields1 ul.recipients input.button2 { font-size: 0.8em; margin-right: 0; padding: 0; @@ -806,8 +921,8 @@ fieldset.fields1 dl.pmlist dd.recipients { } .action-bar .button { - margin-right: 5px; float: left; + margin-right: 5px; } .action-bar .button-search { @@ -817,8 +932,8 @@ fieldset.fields1 dl.pmlist dd.recipients { /* Pagination ---------------------------------------- */ .pagination { - float: right; text-align: right; + float: right; width: auto; } @@ -827,39 +942,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 !important; } .pagination > ul > li { - display: inline-block !important; - padding: 0; font-size: 100%; line-height: normal; vertical-align: middle; + display: inline-block !important; + 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 { @@ -893,38 +1009,42 @@ 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; + right: 0; + left: 0; z-index: 50; + display: none; width: 620px; margin: 0 auto; + padding: 0 25px 20px; } -@media only screen and (max-height: 500px), only screen and (max-device-width: 500px) -{ +@media only screen and (max-height: 500px), only screen and (max-device-width: 500px) { .phpbb_alert { top: 25px; } } + + + + .phpbb_alert .alert_close { float: right; - margin-right: -36px; margin-top: -8px; + margin-right: -36px; } .phpbb_alert p { @@ -947,41 +1067,41 @@ fieldset.fields1 dl.pmlist dd.recipients { } .darkenwrapper { - display: none; position: relative; z-index: 44; + display: none; } .darken { + opacity: 0.5; position: fixed; - left: 0; top: 0; + left: 0; + z-index: 45; 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%; + left: 50%; z-index: 51; + display: none; + width: 50px; + height: 50px; + margin-top: -50px; + margin-left: -50px; } /* Miscellaneous styles ---------------------------------------- */ .copyright { - padding: 5px; text-align: center; + padding: 5px; } .small { @@ -997,26 +1117,27 @@ fieldset.fields1 dl.pmlist dd.recipients { } .error { - font-weight: bold; font-size: 1em; + font-weight: bold; } div.rules { - margin: 10px 0; font-size: 1.1em; - padding: 5px 10px; border-radius: 7px; + margin: 10px 0; + padding: 5px 10px; } -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; + padding: 5px; } form > p.post-notice strong { @@ -1028,17 +1149,17 @@ 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 */ @@ -1050,9 +1171,9 @@ ul.linklist:after, .tabs > ul:after, .minitabs > ul:after, .postprofile .avatar-container:after { + display: block; clear: both; content: ''; - display: block; } .emoji { @@ -1081,26 +1202,26 @@ ul.linklist:after, } .dropdown-extended { - display: none; z-index: 1; + display: none; } .dropdown-extended ul { - max-height: 350px; - overflow-y: auto; - overflow-x: hidden; clear: both; + overflow-x: hidden; + overflow-y: auto; + max-height: 350px; } .dropdown-extended ul li { - padding: 0; - margin: 0 !important; - float: none; - border-top: 1px solid; - list-style-type: none; font-size: 0.95em; - clear: both; + border-top: 1px solid; position: relative; + float: none; + clear: both; + margin: 0 !important; + padding: 0; + list-style-type: none; } .dropdown-extended ul li:first-child { @@ -1112,10 +1233,10 @@ ul.linklist:after, } .dropdown-extended .dropdown-contents { - max-height: none; - padding: 0; position: absolute; width: 340px; + max-height: none; + padding: 0; } .nojs .dropdown-extended .dropdown-contents { @@ -1123,21 +1244,21 @@ ul.linklist:after, } .dropdown-extended .header { - padding: 0 10px; - font-family: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: Arial, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; + line-height: 3em; 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; + border-bottom: 1px solid; + text-shadow: 1px 1px 1px #ffffff; + padding: 0 10px; } .dropdown-extended .header .header_settings { - float: right; font-weight: normal; text-transform: none; + float: right; } .dropdown-extended .header .header_settings a { @@ -1146,17 +1267,18 @@ ul.linklist:after, } .dropdown-extended .header:after { - content: ''; display: table; clear: both; + content: ''; } .dropdown-extended .footer { - text-align: center; font-size: 1.1em; + text-align: center; } -.dropdown-extended ul li a, .dropdown-extended ul li.no-url { +.dropdown-extended ul li a, +.dropdown-extended ul li.no-url { padding: 8px; } @@ -1164,37 +1286,39 @@ ul.linklist:after, padding: 5px 0; } -.dropdown-extended ul li a, .notification_list dt > a, .dropdown-extended .footer > a { - display: block; +.dropdown-extended ul li a, +.notification_list dt > a, +.dropdown-extended .footer > a { text-decoration: none; + display: block; } .notification_list ul li img { 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 { - margin-bottom: 4px; font-size: 1em; + margin-bottom: 4px; } .notification_list p.notification-reference, .notification_list p.notification-location, .notification_list li a p.notification-reason { - overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + overflow: hidden; } .notification_list p.notification-time { font-size: 0.9em; - margin: 0; text-align: right; + margin: 0; } .notification_list div.notifications { @@ -1207,7 +1331,7 @@ ul.linklist:after, } .notification_list p.notifications_title { - font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; + font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 1.2em !important; } @@ -1244,13 +1368,13 @@ ul.linklist:after, } /* Navbar specific list items -----------------------------------------*/ +---------------------------------------- */ .linklist .quick-links { margin: 0 7px 0 0; } -.linklist.compact .rightside > a > span { +.linklist.compact .rightside > a > span span { display: none; } diff --git a/phpBB/styles/prosilver/theme/forms.css b/phpBB/styles/prosilver/theme/forms.css index e8efbc6045e..a0bc8bb0dab 100644 --- a/phpBB/styles/prosilver/theme/forms.css +++ b/phpBB/styles/prosilver/theme/forms.css @@ -1,30 +1,33 @@ -/* 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; + border-width: 0; } input { + font-family: Verdana, Helvetica, Arial, sans-serif; + font-size: 1em; 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: 1em; font-weight: normal; - cursor: pointer; vertical-align: middle; border: 1px solid transparent; padding: 1px; - font-size: 1em; + cursor: pointer; } select:focus { @@ -36,21 +39,21 @@ option { } select optgroup option { - padding-right: 1em; font-family: Verdana, Helvetica, Arial, sans-serif; + padding-right: 1em; } textarea { - font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; - width: 60%; - padding: 2px; + font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif; font-size: 1em; line-height: 1.4em; + width: 60%; + padding: 2px; } label { - cursor: default; padding-right: 5px; + cursor: default; } label input { @@ -68,27 +71,27 @@ 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; + margin-left: 41%; } /* Specific layout 1 */ fieldset.fields1 dt { - width: 15em; border-right-width: 0; + width: 15em; } fieldset.fields1 dd { - margin-left: 15em; border-left-width: 0; + margin-left: 15em; } fieldset.fields1 div { @@ -102,13 +105,13 @@ fieldset.fields1 .live-search div { /* Specific layout 2 */ fieldset.fields2 dt { - width: 15em; border-right-width: 0; + width: 15em; } fieldset.fields2 dd { - margin-left: 16em; border-left-width: 0; + margin-left: 16em; } /* Form elements */ @@ -121,7 +124,8 @@ dd label { white-space: nowrap; } -dd input, dd textarea { +dd input, +dd textarea { margin-right: 3px; } @@ -144,8 +148,8 @@ dd textarea { /* Browser-specific tweaks */ button::-moz-focus-inner { + border: 0; padding: 0; - border: 0 } /* Quick-login on index page */ @@ -158,8 +162,8 @@ fieldset.quick-login input { } fieldset.quick-login input.inputbox { - width: 15%; vertical-align: middle; + width: 15%; margin-right: 5px; } @@ -171,7 +175,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 { @@ -190,11 +194,11 @@ fieldset.display-options a { } .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,8 +207,8 @@ fieldset.display-options a { /* Display actions for ucp and mcp pages */ fieldset.display-actions { - text-align: right; line-height: 2em; + text-align: right; white-space: nowrap; padding-right: 1em; } @@ -218,15 +222,15 @@ fieldset.sort-options { line-height: 2em; } -/* 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,26 +245,29 @@ 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; } -/* Main message box */ +/* Main message box - Edited to add smiley dropdown */ .message-box { - width: 80%; + width:98%; + position:relative; } .message-box textarea { font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; width: 450px; height: 270px; + padding-right:20px; min-width: 100%; max-width: 100%; font-size: 1.2em; @@ -276,8 +283,8 @@ fieldset.submit-buttons input { /* Emoticons panel */ .smiley-box { - width: 18%; float: right; + width: 100%; } .smiley-box img { @@ -291,15 +298,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%; @@ -309,70 +328,89 @@ textarea.inputbox { width: auto !important; } -input[type="number"] { +input[type='number'] { -moz-padding-end: inherit; } -input[type="search"] { - -webkit-appearance: textfield; +input[type='search'] { -webkit-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; } -input[type="search"]::-webkit-search-cancel-button { +input[type='search']::-webkit-search-cancel-button { cursor: pointer; } /* Form button styles ---------------------------------------- */ -input.button1, input.button2 { +input.button1, +input.button2 { font-size: 1em; } -a.button1, input.button1, input.button3, a.button2, input.button2 { +a.button1, +input.button1, +input.button3, +a.button2, +input.button2 { + font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif; + line-height: 1.5; + background: transparent none repeat-x top left; 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 { +a.button1, +input.button1 { font-weight: bold; border: 1px solid transparent; } input.button3 { - padding: 0; - margin: 0; + font-variant: small-caps; line-height: 5px; - height: 12px; background-image: none; - font-variant: small-caps; + height: 12px; + margin: 0; + padding: 0; } -input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"], input[type="radio"] { +input[type='button'], +input[type='submit'], +input[type='reset'], +input[type='checkbox'], +input[type='radio'] { cursor: pointer; } /* Alternative button */ -a.button2, input.button2, input.button3 { +a.button2, +input.button2, +input.button3 { border: 1px solid transparent; } /* button in the style of the form buttons */ -a.button1, a.button2 { +a.button1, +a.button2 { text-decoration: none; - padding: 0 3px; vertical-align: text-bottom; + padding: 0 3px; } /* Hover states */ -a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, input.button3:hover { +a.button1:hover, +input.button1:hover, +a.button2:hover, +input.button2:hover, +input.button3:hover { border: 1px solid transparent; } @@ -381,7 +419,9 @@ input.disabled { } /* Focus states */ -input.button1:focus, input.button2:focus, input.button3:focus { +input.button1:focus, +input.button2:focus, +input.button3:focus { outline-style: none; } @@ -392,14 +432,12 @@ input.button1:focus, input.button2:focus, input.button3:focus { .search-box .inputbox { background-image: none; - border-right-width: 0; border-radius: 4px 0 0 4px; + border-right-width: 0; float: left; + box-sizing: border-box; height: 24px; padding: 3px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; } /* Search box (header) @@ -408,22 +446,38 @@ 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; - background-repeat: no-repeat; background-position: left 1px; + background-repeat: no-repeat; 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 */ From f4fed12be1fc3fd1162d71b4d6c06770405d8a9e Mon Sep 17 00:00:00 2001 From: Yasara Date: Thu, 30 Mar 2017 01:04:56 +0530 Subject: [PATCH 2/2] Revert "ticket/PHPBB3-15109 - Saving somed screen space by placing all smilies in a dropdown box in full screen editor." This reverts commit b193114dafa023f685688f7ae9416d2db997ea4e. --- .../prosilver/template/posting_editor.html | 43 +- .../prosilver/template/smiley_dropdown.html | 41 - phpBB/styles/prosilver/theme/colours.css | 1199 +++++++---------- phpBB/styles/prosilver/theme/common.css | 588 ++++---- phpBB/styles/prosilver/theme/forms.css | 202 +-- 5 files changed, 807 insertions(+), 1266 deletions(-) delete mode 100644 phpBB/styles/prosilver/template/smiley_dropdown.html diff --git a/phpBB/styles/prosilver/template/posting_editor.html b/phpBB/styles/prosilver/template/posting_editor.html index 9088dd4519b..d963c98e08c 100644 --- a/phpBB/styles/prosilver/template/posting_editor.html +++ b/phpBB/styles/prosilver/template/posting_editor.html @@ -39,19 +39,42 @@ +
+ + + {L_SMILIES}
+ + {smiley.SMILEY_CODE} + + + +
{L_MORE_SMILIES} + + + +
+
+ {BBCODE_STATUS}
+ + {IMG_STATUS}
+ {FLASH_STATUS}
+ {URL_STATUS}
+ + {SMILIES_STATUS} +
+ + + +
+ {L_BACK_TO_DRAFTS} + {L_TOPIC_REVIEW} + +
+
-
- - -
- - - - -
-
+
diff --git a/phpBB/styles/prosilver/template/smiley_dropdown.html b/phpBB/styles/prosilver/template/smiley_dropdown.html deleted file mode 100644 index 66cad77518e..00000000000 --- a/phpBB/styles/prosilver/template/smiley_dropdown.html +++ /dev/null @@ -1,41 +0,0 @@ - - diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index f76c6609e95..35490c9338d 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -1,126 +1,115 @@ -/* -------------------------------------------------------------- /* - $Colours -/* -------------------------------------------------------------- */ -/* stylelint-disable selector-max-compound-selectors */ -/* stylelint-disable selector-no-qualifying-type */ -/* stylelint-disable no-indistinguishable-colors */ - -/* colours and backgrounds for common.css - ------------------------------------------------------------- */ -html, -body { - background-color: #f5f7fa; +/* +-------------------------------------------------------------- +Colours and backgrounds for common.css +-------------------------------------------------------------- */ + +html, body { color: #536482; + background-color: #F5F7FA; } h1 { - color: #ffffff; + color: #FFFFFF; } h2 { - color: #28313f; + color: #28313F; } h3 { - border-bottom-color: #cccccc; + border-bottom-color: #CCCCCC; color: #115098; } hr { - border-color: #ffffff; - border-top-color: #cccccc; + border-color: #FFFFFF; + border-top-color: #CCCCCC; } -/* colours and backgrounds for links.css - ------------------------------------------------------------- */ -a { - color: #105289; -} +/* +-------------------------------------------------------------- +Colours and backgrounds for links.css +-------------------------------------------------------------- */ -a:hover { - color: #d31141; -} +a { color: #105289; } +a:hover { color: #D31141; } -/* links on gradient backgrounds */ -.forumbg .header a, -.forabg .header a, -th a { - color: #ffffff; +/* Links on gradient backgrounds */ +.forumbg .header a, .forabg .header a, th a { + color: #FFFFFF; } -.forumbg .header a:hover, -.forabg .header a:hover, -th a:hover { - color: #a8d8ff; +.forumbg .header a:hover, .forabg .header a:hover, th a:hover { + color: #A8D8FF; } -/* notification mark read link */ +/* Notification mark read link */ .dropdown-extended a.mark_read { - background-color: #ffffff; + background-color: #FFFFFF; } -/* post body links */ +/* Post body links */ .postlink { - border-bottom-color: #368ad2; - color: #368ad2; + border-bottom-color: #368AD2; + color: #368AD2; } .postlink:visited { - border-bottom-color: #5d8fbd; - color: #5d8fbd; + border-bottom-color: #5D8FBD; + color: #5D8FBD; } .postlink:hover { - background-color: #d0e4f6; - color: #0d4473; + background-color: #D0E4F6; + color: #0D4473; } -.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; } -/* arrow links */ -.arrow-left:hover, -.arrow-right:hover { - color: #368ad2; +/* Arrow links */ +.arrow-left:hover, .arrow-right:hover { + color: #368AD2; } -/* round cornered boxes and backgrounds */ +/* Round cornered boxes and backgrounds +---------------------------------------- */ .wrap { - background-color: #ffffff; - border-color: #e6e9ed; + background-color: #FFF; + border-color: #E6E9ED; } .headerbar { - color: #ffffff; + color: #FFFFFF; } -.headerbar, -.forumbg { - background-color: #12a3eb; - background-image: linear-gradient(to bottom, #6aceff 0%, #0076b1 2px, #12a3eb 92px, #12a3eb 100%); +.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%); background-repeat: repeat-x; } .forabg { - background-color: #0076b1; - background-image: linear-gradient(to bottom, #6aceff 0%, #12a3eb 2px, #0076b1 92px, #0076b1 100%); + 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-repeat: repeat-x; } .navbar { - background-color: #cadceb; + background-color: #CADCEB; } .panel { - background-color: #ecf1f3; - color: #28313f; + background-color: #ECF1F3; + color: #28313F; } .post:target .content { @@ -132,58 +121,57 @@ th a:hover { } .bg1 { - background-color: #ecf3f7; + background-color: #ECF3F7; } -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: #ECF3F7; } .bg2 { - background-color: #e1ebf2; + background-color: #E1EBF2; } -table.zebra-list tr:nth-child(even) td, -ul.zebra-list li:nth-child(even) { - 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; +.bg3 { + background-color: #CADCEB; } .ucprowbg { - background-color: #dcdee2; + background-color: #DCDEE2; } .fieldsbg { - background-color: #e7e8ea; + background-color: #E7E8EA; } .site_logo { - background-image: url('./images/site_logo.gif'); + background-image: url("./images/site_logo.gif"); } -/* 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: #BFC1CF; } -table.table1 tbody tr:hover, -table.table1 tbody tr.hover { - background-color: #cfe1f6; - color: #000000; +table.table1 tbody tr:hover, table.table1 tbody tr.hover { + background-color: #CFE1F6; + color: #000; } table.table1 td { @@ -191,20 +179,21 @@ table.table1 td { } 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; } table.info tbody th { color: #000000; } -/* misc layout styles */ +/* Misc layout styles +---------------------------------------- */ dl.details dt { color: #000000; } @@ -214,149 +203,144 @@ dl.details dd { } .sep { - color: #1198d9; + color: #1198D9; } -/* icon styles */ -.icon.icon-blue, -a:hover .icon.icon-blue { +/* Icon styles +---------------------------------------- */ +.icon.icon-blue, a:hover .icon.icon-blue { color: #196db5; } -.icon.icon-green, -a:hover .icon.icon-green { - color: #1b9a1b; +.icon.icon-green, a:hover .icon.icon-green{ + color: #1b9A1B; } -.icon.icon-red, -a:hover .icon.icon-red { - color: #bc2a4d; +.icon.icon-red, a:hover .icon.icon-red{ + color: #BC2A4D; } -.icon.icon-orange, -a:hover .icon.icon-orange { - color: #ff6600; +.icon.icon-orange, a:hover .icon.icon-orange{ + color: #FF6600; } -.icon.icon-bluegray, -a:hover .icon.icon-bluegray { +.icon.icon-bluegray, a:hover .icon.icon-bluegray{ color: #536482; } -.icon.icon-gray, -a:hover .icon.icon-gray { +.icon.icon-gray, a:hover .icon.icon-gray{ color: #777777; } -.icon.icon-lightgray, -a:hover .icon.icon-lightgray { +.icon.icon-lightgray, a:hover .icon.icon-lightgray{ color: #999999; } -.icon.icon-black, -a:hover .icon.icon-black { +.icon.icon-black, a:hover .icon.icon-black{ color: #333333; } .alert_close .icon:before { - background-color: #ffffff; + background-color: #FFFFFF; } -/* jumpbox */ +/* Jumpbox */ .jumpbox .dropdown li { - border-top-color: #cccccc; + border-top-color: #CCCCCC; } .jumpbox-cat-link { background-color: #0076b1; - border-top-color: #0076b1; - color: #ffffff; + border-top-color: #0076B1; + color: #FFFFFF; } .jumpbox-cat-link:hover { - background-color: #12a3eb; - border-top-color: #12a3eb; - color: #ffffff; + background-color: #12A3EB; + border-top-color: #12A3EB; + color: #FFFFFF; } .jumpbox-forum-link { - background-color: #e1ebf2; + background-color: #E1EBF2; } .jumpbox-forum-link:hover { - background-color: #f6f4d0; + background-color: #F6F4D0; } .jumpbox .dropdown .pointer-inner { - border-color: #e1ebf2 transparent; + border-color: #E1EBF2 transparent; } .jumpbox-sub-link { - background-color: #e1ebf2; + background-color: #E1EBF2; } .jumpbox-sub-link:hover { - background-color: #f1f8ff; + background-color: #F1F8FF; } -/* miscellaneous styles */ +/* Miscellaneous styles +---------------------------------------- */ .copyright { color: #555555; } .error { - color: #bc2a4d; + color: #BC2A4D; } .reported { - background-color: #f7ecef; + background-color: #F7ECEF; } li.reported:hover { - background-color: #ecd5d8 !important; + background-color: #ECD5D8 !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: #ECD5D8; + color: #BC2A4D; } p.post-notice { - background-color: #ecd5d8; + background-color: #ECD5D8; 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: linear-gradient(to bottom, #d2e0eb 0%, #eef5f9 100%); /* w3c */ - filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#d2e0eb', endcolorstr='#eef5f9', gradienttype=0); /* ie6-9 */ + 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 */ } ul.topiclist li { - color: #4c5d77; + color: #4C5D77; } 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: #00608F; } li.row strong { @@ -364,37 +348,37 @@ li.row strong { } li.row:hover { - background-color: #f6f4d0; + background-color: #F6F4D0; } li.row:hover dd { - border-left-color: #cccccc; + border-left-color: #CCCCCC; } .rtl li.row:hover dd { - border-right-color: #cccccc; + border-right-color: #CCCCCC; 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; } -/* content container styles */ +/* Content container styles +----------------------------------------*/ .content { color: #333333; } -.content h2, -.panel h2 { - border-bottom-color: #cccccc; +.content h2, .panel h2 { color: #115098; + border-bottom-color: #CCCCCC; } dl.faq dt { @@ -402,98 +386,74 @@ dl.faq dt { } .posthilit { - background-color: #f3bfcc; - color: #bc2a4d; + background-color: #F3BFCC; + color: #BC2A4D; } -.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: #CCCCCC; } -/* post noticies */ +/* Post noticies */ .notice { - border-top-color: #cccccc; + border-top-color: #CCCCCC; } -/* bb code styles */ - -/* quote block */ +/* BB Code styles +----------------------------------------*/ +/* Quote block */ blockquote { - background-color: #ebeadd; - background-image: url('./images/quote.gif'); - border-color: #dbdbce; + background-color: #EBEADD; + background-image: url("./images/quote.gif"); + border-color:#DBDBCE; } .rtl blockquote { - background-image: url('./images/quote_rtl.gif'); + background-image: url("./images/quote_rtl.gif"); } blockquote blockquote { - /* nested quotes */ - background-color: #efeed9; + /* Nested quotes */ + background-color:#EFEED9; } blockquote blockquote blockquote { - /* nested quotes */ - background-color: #ebeadd; + /* Nested quotes */ + background-color: #EBEADD; } -/* code block */ +/* Code block */ .codebox { - background-color: #ffffff; - border-color: #c9d2d8; + background-color: #FFFFFF; + border-color: #C9D2D8; } .codebox p { - border-bottom-color: #cccccc; + border-bottom-color: #CCCCCC; } .codebox code { - color: #2e8b57; -} - -.syntaxbg { - color: #ffffff; -} - -.syntaxcomment { - color: #ff8000; -} - -.syntaxdefault { - color: #0000bb; + color: #2E8B57; } -.syntaxhtml { - color: #000000; -} - -.syntaxkeyword { - color: #007700; -} - -.syntaxstring { - color: #dd0000; -} - -/* attachments */ +/* Attachments +----------------------------------------*/ .attachbox { - background-color: #ffffff; - border-color: #c9d2d8; + background-color: #FFFFFF; + border-color: #C9D2D8; } .pm-message .attachbox { - background-color: #f2f3f3; + background-color: #F2F3F3; } .attachbox dd { - border-top-color: #c9d2d8; + border-top-color: #C9D2D8; } .attachbox p { @@ -508,15 +468,15 @@ blockquote blockquote blockquote { border-color: #999999; } -/* inline image thumbnails */ +/* Inline image thumbnails */ dl.file dd { color: #666666; } dl.thumbnail img { - background-color: #ffffff; border-color: #666666; + background-color: #FFFFFF; } dl.thumbnail dd { @@ -524,17 +484,18 @@ dl.thumbnail dd { } dl.thumbnail dt a:hover { - background-color: #eeeeee; + background-color: #EEEEEE; } dl.thumbnail dt a:hover img { - border-color: #368ad2; + border-color: #368AD2; } -/* post poll styles */ +/* Post poll styles +----------------------------------------*/ fieldset.polls dl { - border-top-color: #dcdee2; + border-top-color: #DCDEE2; color: #666666; } @@ -543,75 +504,72 @@ 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-right-color: #74162c; - border-bottom-color: #74162c; + background-color: #AA2346; + border-bottom-color: #74162C; + border-right-color: #74162C; } .rtl .pollbar1 { - border-left-color: #74162c; + border-left-color: #74162C; } .pollbar2 { - background-color: #be1e4a; - border-right-color: #8c1c38; - border-bottom-color: #8c1c38; + background-color: #BE1E4A; + border-bottom-color: #8C1C38; + border-right-color: #8C1C38; } .rtl .pollbar2 { - border-left-color: #8c1c38; + border-left-color: #8C1C38; } .pollbar3 { - background-color: #d11a4e; - border-right-color: #aa2346; - border-bottom-color: #aa2346; + background-color: #D11A4E; + border-bottom-color: #AA2346; + border-right-color: #AA2346; } .rtl .pollbar3 { - border-left-color: #aa2346; + border-left-color: #AA2346; } .pollbar4 { - background-color: #e41653; - border-right-color: #be1e4a; - border-bottom-color: #be1e4a; + background-color: #E41653; + border-bottom-color: #BE1E4A; + border-right-color: #BE1E4A; } .rtl .pollbar4 { - border-left-color: #be1e4a; + border-left-color: #BE1E4A; } .pollbar5 { - background-color: #f81157; - border-right-color: #d11a4e; - border-bottom-color: #d11a4e; + background-color: #F81157; + border-bottom-color: #D11A4E; + border-right-color: #D11A4E; } .rtl .pollbar5 { - border-left-color: #d11a4e; + border-left-color: #D11A4E; } -/* poster profile block */ +/* Poster profile block +----------------------------------------*/ .postprofile { - border-color: #ffffff; color: #666666; + border-color: #FFFFFF; } .pm .postprofile { - border-color: #dddddd; + border-color: #DDDDDD; } .postprofile strong { @@ -619,56 +577,39 @@ fieldset.polls dd div { } .online { - background-image: url('./en/icon_user_online.gif'); + background-image: url("./en/icon_user_online.gif"); } dd.profile-warnings { - color: #bc2a4d; + 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 { - background-color: #e9e9e9; /* old browsers */ /* ff3.6+ */ - background-image: linear-gradient(to bottom, #ffffff 0%, #e9e9e9 100%); /* w3c */ - border-color: #c7c3bf; - -webkit-box-shadow: 0 0 0 1px #ffffff inset; - box-shadow: 0 0 0 1px #ffffff inset; - color: #d31141; - filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#ffffff', endcolorstr='#e9e9e9', gradienttype=0); /* ie6-9 */ + 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; } .button:hover, .button:focus { - background-color: #ffffff; /* old browsers */ /* ff3.6+ */ - background-image: linear-gradient(to bottom, #e9e9e9 0%, #ffffff 100%); /* w3c */ - border-color: #0a8ed0; - text-shadow: 1px 1px 0 #ffffff, -1px -1px 0 #ffffff, -1px -1px 0 rgba(188, 42, 77, 0.2); - filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#e9e9e9', endcolorstr='#ffffff', gradienttype=0); /* ie6-9 */ + 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); } + .button .icon, .button-secondary { color: #8f8f8f; @@ -678,512 +619,336 @@ dd.profile-warnings { .button-secondary:hover, .button:focus .icon, .button:hover .icon { - color: #0a8ed0; + color: #0A8ED0; } .button-search:hover, .button-search-end:hover { - border-color: #c7c3bf; -} - -.caret { - border-color: #c7c3bf; + border-color: #C7C3BF; } -.contact-icons a { - border-color: #dcdcdc; -} +.caret { border-color: #DADADA; } +.caret { border-color: #C7C3BF; } -.contact-icons a:hover { - background-color: #f2f6f9; -} +.contact-icons a { border-color: #DCDCDC; } +.contact-icons a:hover { background-color: #F2F6F9; } -/* pagination */ +/* Pagination +---------------------------------------- */ .pagination li a { - background: #ecedee; - border-color: #b4bac0; - -webkit-box-shadow: none; - box-shadow: none; - color: #5c758c; - -webkit-filter: none; + background: #ECEDEE; filter: none; + border-color: #B4BAC0; + box-shadow: none; + -webkit-box-shadow: none; + color: #5C758C; } .pagination li.ellipsis span { background: transparent; - color: #000000; + color: #000000; } .pagination li.active span { - background: #4692bf; - border-color: #4692bf; - color: #ffffff; + background: #4692BF; + border-color: #4692BF; + 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; - color: #ffffff; - text-shadow: none; - -webkit-filter: none; +.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; + text-shadow: none; } -/* search box */ +/* Search box +--------------------------------------------- */ .search-box .inputbox, .search-box .inputbox:hover, .search-box .inputbox:focus { - border-color: #c7c3bf; + border-color: #C7C3BF; } .search-header { - box-shadow: 0 0 10px #0075b0; -} - -/* 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'); + box-shadow: 0 0 10px #0075B0; } -.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'); -} +/* 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'); -} - +.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 { 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"); } -.topic_unread_mine { - background-image: url('./images/topic_unread_mine.gif'); -} -.topic_unread_hot { - background-image: url('./images/topic_unread_hot.gif'); -} +/* +-------------------------------------------------------------- +Colours and backgrounds for cp.css +-------------------------------------------------------------- */ -.topic_unread_hot_mine { - background-image: url('./images/topic_unread_hot_mine.gif'); -} +/* Main CP box +----------------------------------------*/ -.topic_unread_locked { - background-image: url('./images/topic_unread_locked.gif'); -} - -.topic_unread_locked_mine { - background-image: url('./images/topic_unread_locked_mine.gif'); -} - - -/* colours and backgrounds for cp.css - ------------------------------------------------------------- */ - -/* main cp box */ - -.panel-container h3, -.panel-container hr, -.cp-menu hr { - border-color: #a4b3bf; +.panel-container h3, .panel-container hr, .cp-menu hr { + border-color: #A4B3BF; } .panel-container .panel li.row { - border-top-color: #f9f9f9; - border-bottom-color: #b5c1cb; + border-bottom-color: #B5C1CB; + border-top-color: #F9F9F9; } ul.cplist { - border-top-color: #b5c1cb; + border-top-color: #B5C1CB; } -.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 { - border-bottom-color: #333333; color: #333333; + border-bottom-color: #333333; } .cp-main .pm-message { - background-color: #ffffff; - border-color: #dbdee2; + border-color: #DBDEE2; + background-color: #FFFFFF; } -/* cp tabbed menu */ +/* CP tabbed menu +----------------------------------------*/ .tabs .tab > a { - background: #baccd9; + background: #BACCD9; color: #536482; } .tabs .tab > a:hover { - background: #ddedfb; - color: #d31141; + background: #DDEDFB; + color: #D31141; } .tabs .activetab > a, .tabs .activetab > a:hover { - background-color: #cadceb; /* old browsers */ /* ff3.6+ */ - background-image: linear-gradient(to bottom, #e2f2ff 0%, #cadceb 100%); /* w3c */ - border-color: #cadceb; - box-shadow: 0 1px 1px #f2f9ff inset; + 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; - filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#e2f2ff', endcolorstr='#cadceb', gradienttype=0); /* ie6-9 */ } .tabs .activetab > a:hover { color: #000000; } -/* mini tabbed menu used in mcp */ +/* Mini tabbed menu used in MCP +----------------------------------------*/ .minitabs .tab > a { - background-color: #e1ebf2; + background-color: #E1EBF2; } .minitabs .activetab > a, .minitabs .activetab > a:hover { - background-color: #f9f9f9; + background-color: #F9F9F9; color: #333333; } -/* responsive tabs */ +/* Responsive tabs +----------------------------------------*/ .responsive-tab .responsive-tab-link:before { border-color: #536482; } .responsive-tab .responsive-tab-link:hover:before { - border-color: #d31141; + border-color: #D31141; } -/* ucp navigation menu */ +/* UCP navigation menu +----------------------------------------*/ -/* link styles for the sub-section links */ +/* Link styles for the sub-section links */ .navigation a { - background: #cadceb; /* old browsers */ /* ff3.6+ */ - background-image: linear-gradient(to right, #b4c4d1 50%, #cadceb 100%); /* w3c */ - color: #333333; - filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#b4c4d1', endcolorstr='#cadceb', gradienttype=1); /* ie6-9 */ + 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 */ } .rtl .navigation a { - background: #b4c4d1; /* old browsers */ /* ff3.6+ */ - background-image: linear-gradient(to right, #cadceb 50%, #b4c4d1 100%); /* w3c */ - filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#cadceb', endcolorstr='#b4c4d1', gradienttype=1); /* ie6-9 */ + 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 */ } .navigation a:hover { - background: #aabac6; - color: #bc2a4d; - filter: progid:dximagetransform.microsoft.gradient(enabled = false); + background: #AABAC6; + color: #BC2A4D; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } .navigation .active-subsection a { - background: #f9f9f9; - color: #d31141; - filter: progid:dximagetransform.microsoft.gradient(enabled = false); + background: #F9F9F9; + color: #D31141; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } .navigation .active-subsection a:hover { - color: #d31141; + color: #D31141; } -/* This ID needs factored out */ -@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) { - /* stylelint-disable selector-no-id */ - #navigation a, - .rtl #navigation a { - background: #b2c2cf; +@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) +{ + #navigation a, .rtl #navigation a { + background: #B2C2CF; } - /* stylelint-enable */ } -/* stylelint-disable selector-max-compound-selectors */ -/* stylelint-disable selector-no-qualifying-type */ -/* stylelint-disable no-indistinguishable-colors */ - -/* preferences pane layout */ +/* Preferences pane layout +----------------------------------------*/ .panel-container h2 { color: #333333; } .panel-container .panel { - background-color: #f9f9f9; + background-color: #F9F9F9; } .cp-main .pm { - background-color: #ffffff; + background-color: #FFFFFF; } -/* friends list */ +/* Friends list */ .cp-mini { - background-color: #eef5f9; + background-color: #EEF5F9; } dl.mini dt { color: #425067; } -/* 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-right-color: #bc2a4d; - border-left-color: #bc2a4d; +/* PM marking colours */ +.pmlist li.pm_message_reported_colour, .pm_message_reported_colour { + border-left-color: #BC2A4D; + border-right-color: #BC2A4D; } -.pmlist li.pm_marked_colour, -.pm_marked_colour { - border-color: #ff6600; +.pmlist li.pm_marked_colour, .pm_marked_colour { + border-color: #FF6600; } -.pmlist li.pm_replied_colour, -.pm_replied_colour { - border-color: #a9b8c2; +.pmlist li.pm_replied_colour, .pm_replied_colour { + border-color: #A9B8C2; } -.pmlist li.pm_friend_colour, -.pm_friend_colour { - border-color: #5d8fbd; +.pmlist li.pm_friend_colour, .pm_friend_colour { + border-color: #5D8FBD; } -.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: #cccccc; + background: #FFFFFF; + border-color: #CCC; } .gallery label:hover { - background-color: #eeeeee; + background-color: #EEE; } -/* colours and backgrounds for forms.css - ------------------------------------------------------------- */ +/* +-------------------------------------------------------------- +Colours and backgrounds for forms.css +-------------------------------------------------------------- */ -/* general form styles */ +/* General form styles +----------------------------------------*/ select { - background-color: #fafafa; border-color: #666666; - color: #000000; + background-color: #FAFAFA; + color: #000; } label { @@ -1194,16 +959,17 @@ option.disabled-option { color: graytext; } -/* definition list layout for forms */ +/* Definition list layout for forms +---------------------------------------- */ dd label { - color: #333333; + color: #333; } fieldset.fields1 { background-color: transparent; } -/* hover effects */ +/* Hover effects */ fieldset dl:hover dt label { color: #000000; } @@ -1212,12 +978,13 @@ fieldset.fields2 dl:hover dt label { color: inherit; } -/* quick-login on index page */ +/* Quick-login on index page */ fieldset.quick-login input.inputbox { - background-color: #f2f3f3; + background-color: #F2F3F3; } -/* posting page styles */ +/* Posting page styles +----------------------------------------*/ .message-box textarea { color: #333333; @@ -1231,10 +998,11 @@ fieldset.quick-login input.inputbox { outline-color: rgba(17, 163, 234, 0.5); } -/* input field styles */ +/* Input field styles +---------------------------------------- */ .inputbox { - background-color: #ffffff; - border-color: #b4bac0; + background-color: #FFFFFF; + border-color: #B4BAC0; color: #333333; } @@ -1247,11 +1015,11 @@ fieldset.quick-login input.inputbox { } .inputbox:hover { - border-color: #11a3ea; + border-color: #11A3EA; } .inputbox:focus { - border-color: #11a3ea; + border-color: #11A3EA; } .inputbox:focus:-moz-placeholder { @@ -1263,21 +1031,18 @@ fieldset.quick-login input.inputbox { } -/* form button styles */ +/* Form button styles +---------------------------------------- */ -a.button1, -input.button1, -input.button3, -a.button2, -input.button2 { - background-color: #efefef; /* old browsers */ /* ff3.6+ */ - background-image: linear-gradient(to bottom, #d2d2d2 0%, #efefef 100%); /* w3c */ - color: #000000; - filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#d2d2d2', endcolorstr='#efefef', gradienttype=0); /* ie6-9 */ +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 */ } -a.button1, -input.button1 { +a.button1, input.button1 { border-color: #666666; } @@ -1285,71 +1050,62 @@ input.button3 { background-image: none; } -/* alternative button */ -a.button2, -input.button2, -input.button3 { +/* Alternative button */ +a.button2, input.button2, input.button3 { border-color: #666666; } /* button in the style of the form buttons */ -a.button1, -a.button2 { +a.button1, a.button2 { color: #000000; } -/* hover states */ -a.button1:hover, -input.button1:hover, -a.button2:hover, -input.button2:hover, -input.button3:hover { - background-color: #d2d2d2; /* old browsers */ /* ff3.6+ */ - background-image: linear-gradient(to bottom, #efefef 0%, #d2d2d2 100%); /* w3c */ - border-color: #d31141; - color: #d31141; - filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#efefef', endcolorstr='#d2d2d2', gradienttype=0); /* ie6-9 */ +/* 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; +/* Focus states */ +input.button1:focus, input.button2:focus, input.button3:focus { + border-color: #11A3EA; + color: #0F4987; } input.disabled { color: #666666; } -/* jquery popups */ +/* jQuery popups +---------------------------------------- */ .phpbb_alert { - background-color: #ffffff; + background-color: #FFFFFF; border-color: #999999; } - .darken { background-color: #000000; } .loading_indicator { background-color: #000000; - background-image: url('./images/loading.gif'); + background-image: url("./images/loading.gif"); } .dropdown-extended ul li { - border-top-color: #b9b9b9; + border-top-color: #B9B9B9; } .dropdown-extended ul li:hover { - background-color: #cfe1f6; + background-color: #CFE1F6; color: #000000; } -.dropdown-extended .header, -.dropdown-extended .footer { - border-color: #b9b9b9; +.dropdown-extended .header, .dropdown-extended .footer { + border-color: #B9B9B9; color: #000000; } @@ -1359,26 +1115,27 @@ input.disabled { } .dropdown-extended .header { - background-color: #f1f8ff; /* old browsers */ /* ff3.6+ */ - 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: #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 */ } .dropdown .pointer { - border-color: #b9b9b9 transparent; + border-color: #B9B9B9 transparent; } .dropdown .pointer-inner { - border-color: #ffffff transparent; + border-color: #FFF transparent; } .dropdown-extended .pointer-inner { - border-color: #f1f8ff transparent; + border-color: #F1F8FF transparent; } .dropdown .dropdown-contents { - background: #ffffff; - border-color: #b9b9b9; + background: #fff; + border-color: #B9B9B9; box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2); } @@ -1386,46 +1143,26 @@ input.disabled { 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: #DCDCDC; } .dropdown li.separator { - border-color: #dcdcdc; + border-color: #DCDCDC; } -/*smiley dropbox - -----------------------------------------*/ - -.dropdown .smiley-content { - background: #fff; - border-color: #B9B9B9; - box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2); -} - -.smiley-box .smiley-list{ - background-color:white; -} - -.smiley-box .smiley-list a{ - background-color:white; -} - -/* notifications */ +/* Notifications +---------------------------------------- */ .notification_list p.notification-time { - color: #4c5d77; + color: #4C5D77; } -li.notification-reported strong, -li.notification-disapproved strong { - color: #d31141; +li.notification-reported strong, li.notification-disapproved strong { + color: #D31141; } .badge { - background-color: #d31141; + background-color: #D31141; color: #ffffff; } -/* stylelint-enable */ - diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index b120f001e4a..ed2cc369b1e 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -1,12 +1,7 @@ -/* -------------------------------------------------------------- /* - $Common -/* -------------------------------------------------------------- */ -/* stylelint-disable selector-max-compound-selectors */ -/* stylelint-disable selector-no-qualifying-type */ - +/* General Markup Styles +---------------------------------------- */ html { font-size: 100%; - /* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */ height: 101%; } @@ -15,27 +10,27 @@ body { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 10px; 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; - font-size: 2em; - font-weight: bold; - margin-top: 15px; + font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; margin-right: 200px; + margin-top: 15px; + font-weight: bold; + font-size: 2em; } h2 { /* Forum header titles */ - font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; - font-size: 2em; + font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: normal; - margin: 0.8em 0 0.2em; + font-size: 2em; + margin: 0.8em 0 0.2em 0; } h2.solo { @@ -45,24 +40,24 @@ h2.solo { h3 { /* Sub-headers (also used as post headers, but defined later) */ font-family: Arial, Helvetica, sans-serif; - font-size: 1.05em; 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-family: "Trebuchet MS", Verdana, Helvetica, Arial, Sans-serif; font-size: 1.3em; } p { - font-size: 1.1em; line-height: 1.3em; + font-size: 1.1em; margin-bottom: 1.5em; } @@ -73,10 +68,10 @@ img { hr { border: 0 solid transparent; border-top-width: 1px; - display: block; - clear: both; height: 1px; margin: 5px 0; + display: block; + clear: both; } hr.dashed { @@ -98,13 +93,19 @@ p.jumpbox-return { float: left; } -b, -strong { +b, strong { + font-weight: bold; +} + +.text-strong { font-weight: bold; } -i, -em { +i, em { + font-style: italic; +} + +.text-italics { font-style: italic; } @@ -124,30 +125,24 @@ 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; - min-width: 625px; - max-width: 1152px; margin: 0 auto; + max-width: 1152px; + min-width: 625px; padding: 15px; } @@ -157,11 +152,9 @@ a:hover { } } - - .page-body { - clear: both; margin: 4px 0; + clear: both; } .page-footer { @@ -201,51 +194,51 @@ a:hover { /* Round cornered boxes and backgrounds ---------------------------------------- */ .headerbar { - border-radius: 7px; margin-bottom: 4px; padding: 5px; + border-radius: 7px; } .navbar { - border-radius: 7px; padding: 3px 10px; + border-radius: 7px; } .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 { - background-position: 100% 0; + 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; + margin: 5px 5px 2px 5px; } /* Horizontal lists ----------------------------------------- */ +----------------------------------------*/ .navbar ul.linklist { padding: 2px 0; list-style-type: none; @@ -261,22 +254,20 @@ ul.linklist { } ul.linklist > li { + float: left; font-size: 1.1em; line-height: 2.2em; - float: left; - width: auto; + list-style-type: none; margin-right: 7px; padding-top: 1px; - list-style-type: none; + width: auto; } -ul.linklist > li.rightside, -p.rightside, -a.rightside { - text-align: right; +ul.linklist > li.rightside, p.rightside, a.rightside { float: right; margin-right: 0; margin-left: 7px; + text-align: right; } ul.navlinks { @@ -284,17 +275,17 @@ ul.navlinks { } ul.leftside { - text-align: left; float: left; - margin-right: 5px; margin-left: 0; + margin-right: 5px; + text-align: left; } ul.rightside { - text-align: right; float: right; - margin-right: -5px; margin-left: 5px; + margin-right: -5px; + text-align: right; } ul.linklist li.responsive-menu { @@ -302,8 +293,7 @@ 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%; } @@ -324,18 +314,18 @@ ul.linklist .dropdown { } ul.linklist .dropdown-up .dropdown { - top: auto; bottom: 18px; + top: auto; } /* Bulletin icons for list items ----------------------------------------- */ +----------------------------------------*/ ul.linklist.bulletin > li:before { + display: inline-block; + content: "\2022"; font-size: inherit; line-height: inherit; - display: inline-block; padding-right: 4px; - content: '\2022'; } ul.linklist.bulletin > li:first-child:before, @@ -353,8 +343,8 @@ ul.linklist.bulletin > li.no-bulletin:before { /* Profile in overall_header.html */ .header-profile { - vertical-align: top; display: inline-block; + vertical-align: top; } a.header-avatar, @@ -363,23 +353,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 { - font: normal normal normal 14px/1 FontAwesome; - vertical-align: top; + content: '\f0dd'; display: inline-block; - padding-top: 2px; + font: normal normal normal 14px/1 FontAwesome; padding-left: 6px; - content: '\f0dd'; + padding-top: 2px; + vertical-align: top; } /* Dropdown menu ----------------------------------------- */ +----------------------------------------*/ .dropdown-container { position: relative; } @@ -397,15 +387,15 @@ a.header-avatar span:after { } .dropdown { - border: 1px solid transparent; - border-radius: 5px; + display: none; position: absolute; - top: 1.2em; left: 0; + top: 1.2em; z-index: 2; - display: none; - margin-right: -500px; + border: 1px solid transparent; + border-radius: 5px; padding: 9px 0 0; + margin-right: -500px; } .dropdown.live-search { @@ -422,12 +412,11 @@ a.header-avatar span:after { padding: 0 0 9px; } -.dropdown-left .dropdown, -.nojs .rightside .dropdown { - right: 0; +.dropdown-left .dropdown, .nojs .rightside .dropdown { left: auto; - margin-right: 0; + right: 0; margin-left: -500px; + margin-right: 0; } .dropdown-button-control .dropdown { @@ -439,41 +428,38 @@ a.header-avatar span:after { bottom: 24px; } -.dropdown .pointer, -.dropdown .pointer-inner { - border-top-width: 0; - border-right: 10px dashed transparent; - border-bottom: 10px solid transparent; - border-left: 10px dashed transparent; +.dropdown .pointer, .dropdown .pointer-inner { position: absolute; - display: block; width: 0; height: 0; + border-top-width: 0; + border-bottom: 10px solid transparent; + border-left: 10px dashed transparent; + border-right: 10px dashed transparent; -webkit-transform: rotate(360deg); /* better anti-aliasing in webkit */ + display: block; } -.dropdown-up .pointer, -.dropdown-up .pointer-inner { - border-top: 10px solid transparent; +.dropdown-up .pointer, .dropdown-up .pointer-inner { border-bottom-width: 0; + border-top: 10px solid transparent; } .dropdown .pointer { - top: -1px; right: auto; left: 10px; + top: -1px; z-index: 3; } .dropdown-up .pointer { - top: auto; bottom: -1px; + top: auto; } -.dropdown-left .dropdown .pointer, -.nojs .rightside .dropdown .pointer { - right: 10px; +.dropdown-left .dropdown .pointer, .nojs .rightside .dropdown .pointer { left: auto; + right: 10px; } .dropdown .pointer-inner { @@ -483,19 +469,19 @@ a.header-avatar span:after { } .dropdown-up .pointer-inner { - top: -11px; bottom: auto; + top: -11px; } .dropdown .dropdown-contents { - border: 1px solid transparent; - border-radius: 5px; - position: relative; z-index: 2; overflow: hidden; overflow-y: auto; - max-height: 300px; + border: 1px solid transparent; + border-radius: 5px; padding: 5px; + position: relative; + max-height: 300px; } .dropdown-contents a { @@ -511,9 +497,13 @@ a.header-avatar span:after { border-top: 1px solid transparent; } +.jumpbox .dropdown-select { + margin: 0; +} + .jumpbox .dropdown-contents { - text-decoration: none; padding: 0; + text-decoration: none; } .jumpbox .dropdown-contents li { @@ -521,35 +511,44 @@ a.header-avatar span:after { } .jumpbox .dropdown-contents a { - text-decoration: none; - width: 100%; margin-right: 20px; padding: 5px 10px; + text-decoration: none; + width: 100%; } .jumpbox .spacer { display: inline-block; - width: 0; + width: 0px; } .jumpbox .spacer + .spacer { width: 20px; } +.dropdown-contents a { + display: block; + padding: 5px; +} + .jumpbox .dropdown-select { margin: 0; } +.jumpbox .dropdown-contents a { + text-decoration: none; +} + .dropdown li { - font-size: 1em !important; - line-height: normal !important; - text-align: left; - white-space: nowrap; - border-top: 1px dotted transparent; display: list-item; + border-top: 1px dotted transparent; float: none !important; - margin: 0; + line-height: normal !important; + font-size: 1em !important; list-style: none; + margin: 0; + white-space: nowrap; + text-align: left; } .dropdown-contents > li { @@ -560,9 +559,7 @@ 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; } @@ -579,9 +576,7 @@ 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; } @@ -590,66 +585,22 @@ 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; } -/* Smiley Dropdown -----------------------------------------*/ - -.dropdown .smiley-content{ - display: inline-block; - width:200px; - z-index: 2; - overflow: hidden; - overflow-y: auto; - border: 1px solid transparent; - border-radius: 5px; - padding: 5px; - position: relative; - max-height: 300px; -} - - - -.smiley-box ul{ - display: inline; - margin:0; -} - -.smiley-box .smiley-list{ - display: inline-block; - border:none; -} - -.smiley-box .smiley-list a{ - padding:0; - text-decoration:none; -} - -/*Smiley Dropdown menu -----------------------------------------*/ -.dropdown-container.smiley-container { - position:absolute; - right:0; - top:5px; - cursor:pointer; - margin-right:-18px; -} - /* 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 { @@ -657,46 +608,24 @@ a.header-avatar span:after { } .breadcrumbs .crumb a { + white-space: nowrap; text-overflow: ellipsis; vertical-align: bottom; - white-space: nowrap; overflow: hidden; } -.breadcrumbs.wrapped .crumb a { - letter-spacing: -0.3px; -} +.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.wrapped-medium a { - letter-spacing: -0.4px; -} - -.breadcrumbs.wrapped .crumb.wrapped-tiny a { - letter-spacing: -0.5px; -} - -.breadcrumbs .crumb.wrapped-max a { - max-width: 120px; -} - -.breadcrumbs .crumb.wrapped-wide a { - max-width: 100px; -} - -.breadcrumbs .crumb.wrapped-medium a { - max-width: 80px; -} - -.breadcrumbs .crumb.wrapped-small a { - max-width: 60px; -} - -.breadcrumbs .crumb.wrapped-tiny a { - max-width: 40px; -} +.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%; } @@ -706,10 +635,10 @@ table.table1 { } table.table1 thead th { - font-size: 1em; font-weight: normal; - line-height: 1.3em; text-transform: uppercase; + line-height: 1.3em; + font-size: 1em; padding: 0 0 4px 3px; } @@ -726,68 +655,28 @@ table.table1 td { } table.table1 tbody td { - border-top: 1px solid transparent; padding: 5px; + border-top: 1px solid transparent; } table.table1 tbody th { - 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 { + border-bottom: 1px solid transparent; text-align: left; - width: 30%; -} - -table.table1 .info div { - white-space: normal; - overflow: hidden; - width: 100%; } -table.table1 .autocol { - line-height: 2em; - white-space: nowrap; -} - -table.table1 thead .autocol { - padding-left: 1em; -} +/* Specific column styles */ +table.table1 .name { text-align: left; } +table.table1 .center { text-align: center; } +table.table1 .reportby { width: 15%; } +table.table1 .posts { text-align: center; width: 7%; } +table.table1 .joined { text-align: left; width: 15%; } +table.table1 .active { text-align: left; width: 15%; } +table.table1 .mark { text-align: center; width: 7%; } +table.table1 .info { text-align: left; width: 30%; } +table.table1 .info div { width: 100%; white-space: normal; overflow: hidden; } +table.table1 .autocol { line-height: 2em; white-space: nowrap; } +table.table1 thead .autocol { padding-left: 1em; } table.table1 span.rank-img { float: right; @@ -799,10 +688,10 @@ table.info td { } table.info tbody th { - font-weight: normal; + padding: 3px; text-align: right; vertical-align: top; - padding: 3px; + font-weight: normal; } .forumbg table.table1 { @@ -820,7 +709,6 @@ table.info tbody th { /* Misc layout styles ---------------------------------------- */ - /* column[1-2] styles are containers for two column layouts */ .column1 { float: left; @@ -836,9 +724,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%; } @@ -847,47 +735,44 @@ 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-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;*/ font-size: 1.1em; } dl.details dt { - text-align: right; - display: block; float: left; clear: left; width: 30%; + text-align: right; + display: block; } dl.details dd { - text-overflow: ellipsis; - float: left; - overflow: hidden; - width: 65%; - margin-bottom: 5px; margin-left: 0; padding-left: 5px; + margin-bottom: 5px; + float: left; + width: 65%; + overflow: hidden; + text-overflow: ellipsis; } -.clearfix, -fieldset dl, -ul.topiclist dl, -dl.polls { +.clearfix, fieldset dl, ul.topiclist dl, dl.polls { overflow: hidden; } fieldset.fields1 ul.recipients { + list-style-type: none; line-height: 1.8; - overflow-y: auto; max-height: 150px; - list-style-type: none; + overflow-y: auto; } fieldset.fields1 dd.recipients { @@ -895,7 +780,7 @@ fieldset.fields1 dd.recipients { margin-left: 1em; } -fieldset.fields1 ul.recipients input.button2 { +fieldset.fields1 ul.recipients input.button2{ font-size: 0.8em; margin-right: 0; padding: 0; @@ -921,8 +806,8 @@ fieldset.fields1 dl.pmlist dd.recipients { } .action-bar .button { - float: left; margin-right: 5px; + float: left; } .action-bar .button-search { @@ -932,8 +817,8 @@ fieldset.fields1 dl.pmlist dd.recipients { /* Pagination ---------------------------------------- */ .pagination { - text-align: right; float: right; + text-align: right; width: auto; } @@ -942,40 +827,39 @@ fieldset.fields1 dl.pmlist dd.recipients { } .action-bar .pagination .button { - float: none; margin-right: 0; + float: none; } .pagination > ul { display: inline-block; - margin-left: 5px; list-style: none !important; + margin-left: 5px; } .pagination > ul > li { + display: inline-block !important; + padding: 0; font-size: 100%; line-height: normal; vertical-align: middle; - display: inline-block !important; - padding: 0; } -.pagination li a, -.pagination li span { +.pagination li a, .pagination li span { border-radius: 2px; padding: 2px 5px; } .pagination li.active span { - font-family: 'Open Sans', 'Droid Sans', Verdana, Arial, Helvetica; + display: inline-block; font-size: 13px; font-weight: normal; + font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica; line-height: 1.4; text-align: center; - vertical-align: middle; white-space: nowrap; + vertical-align: middle; border: 1px solid transparent; - display: inline-block; } .pagination li.ellipsis span { @@ -1009,42 +893,38 @@ fieldset.fields1 dl.pmlist dd.recipients { margin: 0; } -.row .pagination li a, -.row .pagination li span { - font-size: 9px; +.row .pagination li a, .row .pagination li span { border-radius: 2px; padding: 1px 3px; + font-size: 9px; } /* jQuery popups ---------------------------------------- */ .phpbb_alert { border: 1px solid transparent; + display: none; + left: 0; + padding: 0 25px 20px 25px; position: fixed; - top: 150px; right: 0; - left: 0; + top: 150px; z-index: 50; - display: none; width: 620px; margin: 0 auto; - padding: 0 25px 20px; } -@media only screen and (max-height: 500px), only screen and (max-device-width: 500px) { +@media only screen and (max-height: 500px), only screen and (max-device-width: 500px) +{ .phpbb_alert { top: 25px; } } - - - - .phpbb_alert .alert_close { float: right; - margin-top: -8px; margin-right: -36px; + margin-top: -8px; } .phpbb_alert p { @@ -1067,41 +947,41 @@ fieldset.fields1 dl.pmlist dd.recipients { } .darkenwrapper { + display: none; position: relative; z-index: 44; - display: none; } .darken { - opacity: 0.5; position: fixed; - top: 0; left: 0; - z-index: 45; + top: 0; width: 100%; height: 100%; + opacity: 0.5; + z-index: 45; } .loading_indicator { background: center center no-repeat; border-radius: 5px; + display: none; opacity: 0.8; + margin-top: -50px; + margin-left: -50px; + height: 50px; + width: 50px; position: fixed; - top: 50%; left: 50%; + top: 50%; z-index: 51; - display: none; - width: 50px; - height: 50px; - margin-top: -50px; - margin-left: -50px; } /* Miscellaneous styles ---------------------------------------- */ .copyright { - text-align: center; padding: 5px; + text-align: center; } .small { @@ -1117,27 +997,26 @@ fieldset.fields1 dl.pmlist dd.recipients { } .error { - font-size: 1em; font-weight: bold; + font-size: 1em; } div.rules { - font-size: 1.1em; - 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; - padding: 5px; } form > p.post-notice strong { @@ -1149,17 +1028,17 @@ 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 */ @@ -1171,9 +1050,9 @@ ul.linklist:after, .tabs > ul:after, .minitabs > ul:after, .postprofile .avatar-container:after { - display: block; clear: both; content: ''; + display: block; } .emoji { @@ -1202,26 +1081,26 @@ ul.linklist:after, } .dropdown-extended { - z-index: 1; display: none; + z-index: 1; } .dropdown-extended ul { - clear: both; - overflow-x: hidden; - overflow-y: auto; max-height: 350px; + overflow-y: auto; + overflow-x: hidden; + clear: both; } .dropdown-extended ul li { - font-size: 0.95em; - border-top: 1px solid; - position: relative; - float: none; - clear: both; - margin: 0 !important; padding: 0; + margin: 0 !important; + float: none; + border-top: 1px solid; list-style-type: none; + font-size: 0.95em; + clear: both; + position: relative; } .dropdown-extended ul li:first-child { @@ -1233,10 +1112,10 @@ ul.linklist:after, } .dropdown-extended .dropdown-contents { - position: absolute; - width: 340px; max-height: none; padding: 0; + position: absolute; + width: 340px; } .nojs .dropdown-extended .dropdown-contents { @@ -1244,21 +1123,21 @@ ul.linklist:after, } .dropdown-extended .header { - font-family: Arial, 'Helvetica Neue', Helvetica, Arial, sans-serif; + padding: 0 10px; + font-family: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; - line-height: 3em; text-align: left; + text-shadow: 1px 1px 1px white; text-transform: uppercase; - border-radius: 5px 5px 0 0; + line-height: 3em; border-bottom: 1px solid; - text-shadow: 1px 1px 1px #ffffff; - padding: 0 10px; + border-radius: 5px 5px 0 0; } .dropdown-extended .header .header_settings { + float: right; font-weight: normal; text-transform: none; - float: right; } .dropdown-extended .header .header_settings a { @@ -1267,18 +1146,17 @@ ul.linklist:after, } .dropdown-extended .header:after { + content: ''; display: table; clear: both; - content: ''; } .dropdown-extended .footer { - font-size: 1.1em; text-align: center; + font-size: 1.1em; } -.dropdown-extended ul li a, -.dropdown-extended ul li.no-url { +.dropdown-extended ul li a, .dropdown-extended ul li.no-url { padding: 8px; } @@ -1286,39 +1164,37 @@ ul.linklist:after, padding: 5px 0; } -.dropdown-extended ul li a, -.notification_list dt > a, -.dropdown-extended .footer > a { - text-decoration: none; +.dropdown-extended ul li a, .notification_list dt > a, .dropdown-extended .footer > a { display: block; + text-decoration: none; } .notification_list ul li img { float: left; - width: auto !important; + max-height: 50px; max-width: 50px; + width: auto !important; height: auto !important; - max-height: 50px; margin-right: 5px; } .notification_list ul li p { - font-size: 1em; margin-bottom: 4px; + font-size: 1em; } .notification_list p.notification-reference, .notification_list p.notification-location, .notification_list li a p.notification-reason { + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - overflow: hidden; } .notification_list p.notification-time { font-size: 0.9em; - text-align: right; margin: 0; + text-align: right; } .notification_list div.notifications { @@ -1331,7 +1207,7 @@ ul.linklist:after, } .notification_list p.notifications_title { - font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; + font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 1.2em !important; } @@ -1368,13 +1244,13 @@ ul.linklist:after, } /* Navbar specific list items ----------------------------------------- */ +----------------------------------------*/ .linklist .quick-links { margin: 0 7px 0 0; } -.linklist.compact .rightside > a > span span { +.linklist.compact .rightside > a > span { display: none; } diff --git a/phpBB/styles/prosilver/theme/forms.css b/phpBB/styles/prosilver/theme/forms.css index a0bc8bb0dab..e8efbc6045e 100644 --- a/phpBB/styles/prosilver/theme/forms.css +++ b/phpBB/styles/prosilver/theme/forms.css @@ -1,33 +1,30 @@ -/* -------------------------------------------------------------- /* - $Forms -/* -------------------------------------------------------------- */ -/* stylelint-disable selector-max-compound-selectors */ -/* stylelint-disable selector-no-qualifying-type */ +/* Form Styles +---------------------------------------- */ /* General form styles ----------------------------------------- */ +----------------------------------------*/ fieldset { + border-width: 0; font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 1.1em; - border-width: 0; } input { - font-family: Verdana, Helvetica, Arial, sans-serif; - font-size: 1em; 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: 1em; font-weight: normal; + cursor: pointer; vertical-align: middle; border: 1px solid transparent; padding: 1px; - cursor: pointer; + font-size: 1em; } select:focus { @@ -39,21 +36,21 @@ option { } select optgroup option { - font-family: Verdana, Helvetica, Arial, sans-serif; padding-right: 1em; + font-family: Verdana, Helvetica, Arial, sans-serif; } textarea { - font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif; - font-size: 1em; - line-height: 1.4em; + font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; width: 60%; padding: 2px; + font-size: 1em; + line-height: 1.4em; } label { - padding-right: 5px; cursor: default; + padding-right: 5px; } label input { @@ -71,27 +68,27 @@ fieldset dl { } fieldset dt { - text-align: left; - display: block; float: left; width: 40%; + text-align: left; + display: block; } fieldset dd { + margin-left: 41%; vertical-align: top; margin-bottom: 3px; - margin-left: 41%; } /* Specific layout 1 */ fieldset.fields1 dt { - border-right-width: 0; width: 15em; + border-right-width: 0; } fieldset.fields1 dd { - border-left-width: 0; margin-left: 15em; + border-left-width: 0; } fieldset.fields1 div { @@ -105,13 +102,13 @@ fieldset.fields1 .live-search div { /* Specific layout 2 */ fieldset.fields2 dt { - border-right-width: 0; width: 15em; + border-right-width: 0; } fieldset.fields2 dd { - border-left-width: 0; margin-left: 16em; + border-left-width: 0; } /* Form elements */ @@ -124,8 +121,7 @@ dd label { white-space: nowrap; } -dd input, -dd textarea { +dd input, dd textarea { margin-right: 3px; } @@ -148,8 +144,8 @@ dd textarea { /* Browser-specific tweaks */ button::-moz-focus-inner { - border: 0; padding: 0; + border: 0 } /* Quick-login on index page */ @@ -162,8 +158,8 @@ fieldset.quick-login input { } fieldset.quick-login input.inputbox { - vertical-align: middle; width: 15%; + vertical-align: middle; margin-right: 5px; } @@ -175,7 +171,7 @@ fieldset.quick-login label { /* Display options on viewtopic/viewforum pages */ fieldset.display-options { text-align: center; - margin: 3px 0 5px; + margin: 3px 0 5px 0; } fieldset.display-options label { @@ -194,11 +190,11 @@ fieldset.display-options a { } .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 { @@ -207,8 +203,8 @@ fieldset.display-options a { /* Display actions for ucp and mcp pages */ fieldset.display-actions { - line-height: 2em; text-align: right; + line-height: 2em; white-space: nowrap; padding-right: 1em; } @@ -222,15 +218,15 @@ fieldset.sort-options { line-height: 2em; } -/* 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 */ @@ -245,29 +241,26 @@ fieldset.submit-buttons input { } /* Posting page styles ----------------------------------------- */ +----------------------------------------*/ /* Buttons used in the editor */ .format-buttons { - margin: 15px 0 2px; + margin: 15px 0 2px 0; } -.format-buttons input, -.format-buttons select { +.format-buttons input, .format-buttons select { vertical-align: middle; } -/* Main message box - Edited to add smiley dropdown */ +/* Main message box */ .message-box { - width:98%; - position:relative; + width: 80%; } .message-box textarea { font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; width: 450px; height: 270px; - padding-right:20px; min-width: 100%; max-width: 100%; font-size: 1.2em; @@ -283,8 +276,8 @@ fieldset.submit-buttons input { /* Emoticons panel */ .smiley-box { + width: 18%; float: right; - width: 100%; } .smiley-box img { @@ -298,27 +291,15 @@ 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%; @@ -328,89 +309,70 @@ textarea.inputbox { width: auto !important; } -input[type='number'] { +input[type="number"] { -moz-padding-end: inherit; } -input[type='search'] { - -webkit-box-sizing: content-box; +input[type="search"] { -webkit-appearance: textfield; + -webkit-box-sizing: content-box; } -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; } -input[type='search']::-webkit-search-cancel-button { +input[type="search"]::-webkit-search-cancel-button { cursor: pointer; } /* Form button styles ---------------------------------------- */ -input.button1, -input.button2 { +input.button1, input.button2 { font-size: 1em; } -a.button1, -input.button1, -input.button3, -a.button2, -input.button2 { - font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif; - line-height: 1.5; - background: transparent none repeat-x top left; +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 { +a.button1, input.button1 { font-weight: bold; border: 1px solid transparent; } input.button3 { - font-variant: small-caps; + padding: 0; + margin: 0; line-height: 5px; - background-image: none; height: 12px; - margin: 0; - padding: 0; + background-image: none; + font-variant: small-caps; } -input[type='button'], -input[type='submit'], -input[type='reset'], -input[type='checkbox'], -input[type='radio'] { +input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"], input[type="radio"] { cursor: pointer; } /* Alternative button */ -a.button2, -input.button2, -input.button3 { +a.button2, input.button2, input.button3 { border: 1px solid transparent; } /* button in the style of the form buttons */ -a.button1, -a.button2 { +a.button1, a.button2 { text-decoration: none; - vertical-align: text-bottom; padding: 0 3px; + vertical-align: text-bottom; } /* Hover states */ -a.button1:hover, -input.button1:hover, -a.button2:hover, -input.button2:hover, -input.button3:hover { +a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, input.button3:hover { border: 1px solid transparent; } @@ -419,9 +381,7 @@ input.disabled { } /* Focus states */ -input.button1:focus, -input.button2:focus, -input.button3:focus { +input.button1:focus, input.button2:focus, input.button3:focus { outline-style: none; } @@ -432,12 +392,14 @@ input.button3:focus { .search-box .inputbox { background-image: none; - border-radius: 4px 0 0 4px; border-right-width: 0; + border-radius: 4px 0 0 4px; float: left; - box-sizing: border-box; height: 24px; padding: 3px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } /* Search box (header) @@ -446,38 +408,22 @@ input.button3:focus { border-radius: 4px; display: block; float: right; - margin-top: 30px; margin-right: 5px; + margin-top: 30px; } -.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; - background-position: left 1px; background-repeat: no-repeat; + background-position: left 1px; padding-left: 17px; } -.full { - width: 95%; -} - -.medium { - width: 50%; -} - -.narrow { - width: 25%; -} - -.tiny { - width: 10%; -} -/* stylelint-enable */ +.full { width: 95%; } +.medium { width: 50%;} +.narrow { width: 25%;} +.tiny { width: 10%;}