diff options
-rw-r--r-- | phpBB/styles/prosilver/template/ucp_pm_message_header.html | 32 | ||||
-rw-r--r-- | phpBB/styles/prosilver/template/viewforum_body.html | 12 | ||||
-rw-r--r-- | phpBB/styles/prosilver/template/viewtopic_body.html | 12 | ||||
-rw-r--r-- | phpBB/styles/prosilver/template/viewtopic_topic_tools.html | 2 | ||||
-rw-r--r-- | phpBB/styles/prosilver/theme/buttons.css | 94 | ||||
-rw-r--r-- | phpBB/styles/prosilver/theme/colours.css | 20 |
6 files changed, 93 insertions, 79 deletions
diff --git a/phpBB/styles/prosilver/template/ucp_pm_message_header.html b/phpBB/styles/prosilver/template/ucp_pm_message_header.html index 840eba4c83..6ad71dcab6 100644 --- a/phpBB/styles/prosilver/template/ucp_pm_message_header.html +++ b/phpBB/styles/prosilver/template/ucp_pm_message_header.html @@ -8,16 +8,38 @@ <!-- IF FOLDER_STATUS and FOLDER_MAX_MESSAGES neq 0 --><p>{FOLDER_STATUS}</p><!-- ENDIF --> <!-- IF U_POST_REPLY_PM or U_POST_NEW_TOPIC or U_FORWARD_PM --> <div class="buttons"> - <!-- IF U_POST_REPLY_PM --><div class="pmreply-icon"><a title="{L_POST_REPLY_PM}" href="{U_POST_REPLY_PM}"><span></span>{L_BUTTON_PM_REPLY}</a></div> - <!-- ELSEIF U_POST_NEW_TOPIC --><div class="newpm-icon"><a href="{U_POST_NEW_TOPIC}" accesskey="n" title="{L_UCP_PM_COMPOSE}"><span></span>{L_BUTTON_PM_NEW}</a></div><!-- ENDIF --> - <!-- IF U_FORWARD_PM --><div class="forwardpm-icon"><a title="{L_POST_FORWARD_PM}" href="{U_FORWARD_PM}"><span></span>{L_BUTTON_PM_FORWARD}</a></div><!-- ENDIF --> - <!-- IF U_POST_REPLY_PM and S_PM_RECIPIENTS gt 1 --><div class="reply-all"><a title="{L_REPLY_TO_ALL}" href="{U_POST_REPLY_ALL}">{L_BUTTON_PM_REPLY_ALL}</a></div><!-- ENDIF --> + <!-- IF U_POST_REPLY_PM --> + <div class="pmreply-icon"> + <a title="{L_POST_REPLY_PM}" href="{U_POST_REPLY_PM}" class="button icon-button"> + <span></span>{L_BUTTON_PM_REPLY} + </a> + </div> + <!-- ELSEIF U_POST_NEW_TOPIC --> + <div class="newpm-icon"> + <a href="{U_POST_NEW_TOPIC}" accesskey="n" title="{L_UCP_PM_COMPOSE}" class="button icon-button"> + <span></span>{L_BUTTON_PM_NEW}</a> + </div> + <!-- ENDIF --> + <!-- IF U_FORWARD_PM --> + <div class="forwardpm-icon"> + <a title="{L_POST_FORWARD_PM}" href="{U_FORWARD_PM}" class="button icon-button"> + <span></span>{L_BUTTON_PM_FORWARD} + </a> + </div> + <!-- ENDIF --> + <!-- IF U_POST_REPLY_PM and S_PM_RECIPIENTS gt 1 --> + <div class="reply-all"> + <a title="{L_REPLY_TO_ALL}" href="{U_POST_REPLY_ALL}" class="button icon-button"> + <span></span>{L_BUTTON_PM_REPLY_ALL} + </a> + </div> + <!-- ENDIF --> </div> <!-- ENDIF --> <!-- IF not S_IS_BOT and U_PRINT_PM --> <div class="dropdown-container dropdown-button-control topic-tools"> - <span title="{L_PM_TOOLS}" class="dropdown-trigger dropdown-select dropdown-select-icon tools-icon"><span></span></span> + <span title="{L_PM_TOOLS}" class="dropdown-trigger dropdown-select button icon-button tools-icon"><span></span></span> <div class="dropdown hidden"> <div class="pointer"><div class="pointer-inner"></div></div> <ul class="dropdown-contents"> diff --git a/phpBB/styles/prosilver/template/viewforum_body.html b/phpBB/styles/prosilver/template/viewforum_body.html index 7a0ebaafcf..46026f5464 100644 --- a/phpBB/styles/prosilver/template/viewforum_body.html +++ b/phpBB/styles/prosilver/template/viewforum_body.html @@ -39,7 +39,11 @@ <!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO --> <div class="buttons"> - <div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->post-icon<!-- ENDIF -->" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->"><a href="{U_POST_NEW_TOPIC}"><span></span><!-- IF S_IS_LOCKED -->{L_BUTTON_FORUM_LOCKED}<!-- ELSE -->{L_BUTTON_NEW_TOPIC}<!-- ENDIF --></a></div> + <div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->post-icon<!-- ENDIF -->" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->"> + <a href="{U_POST_NEW_TOPIC}" class="button icon-button"> + <span></span><!-- IF S_IS_LOCKED -->{L_BUTTON_FORUM_LOCKED}<!-- ELSE -->{L_BUTTON_NEW_TOPIC}<!-- ENDIF --> + </a> + </div> </div> <!-- ENDIF --> @@ -223,7 +227,11 @@ <div class="topic-actions"> <!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO --> <div class="buttons"> - <div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->post-icon<!-- ENDIF -->" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->"><a href="{U_POST_NEW_TOPIC}"><span></span><!-- IF S_IS_LOCKED -->{L_BUTTON_FORUM_LOCKED}<!-- ELSE -->{L_BUTTON_NEW_TOPIC}<!-- ENDIF --></a></div> + <div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->post-icon<!-- ENDIF -->" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->"> + <a href="{U_POST_NEW_TOPIC}" class="button icon-button"> + <span></span><!-- IF S_IS_LOCKED -->{L_BUTTON_FORUM_LOCKED}<!-- ELSE -->{L_BUTTON_NEW_TOPIC}<!-- ENDIF --> + </a> + </div> </div> <!-- ENDIF --> diff --git a/phpBB/styles/prosilver/template/viewtopic_body.html b/phpBB/styles/prosilver/template/viewtopic_body.html index cdeb14170a..a7840f3e57 100644 --- a/phpBB/styles/prosilver/template/viewtopic_body.html +++ b/phpBB/styles/prosilver/template/viewtopic_body.html @@ -29,7 +29,11 @@ <div class="buttons"> <!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO --> - <div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"><a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->"><span></span><!-- IF S_IS_LOCKED -->{L_BUTTON_TOPIC_LOCKED}<!-- ELSE -->{L_BUTTON_POST_REPLY}<!-- ENDIF --></a></div> + <div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"> + <a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->" class="icon-button button"> + <span></span><!-- IF S_IS_LOCKED -->{L_BUTTON_TOPIC_LOCKED}<!-- ELSE -->{L_BUTTON_POST_REPLY}<!-- ENDIF --> + </a> + </div> <!-- ENDIF --> </div> @@ -316,7 +320,11 @@ <div class="topic-actions"> <div class="buttons"> <!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO --> - <div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"><a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->"><span></span><!-- IF S_IS_LOCKED -->{L_BUTTON_TOPIC_LOCKED}<!-- ELSE -->{L_BUTTON_POST_REPLY}<!-- ENDIF --></a></div> + <div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"> + <a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->" class="button icon-button"> + <span></span><!-- IF S_IS_LOCKED -->{L_BUTTON_TOPIC_LOCKED}<!-- ELSE -->{L_BUTTON_POST_REPLY}<!-- ENDIF --> + </a> + </div> <!-- ENDIF --> </div> diff --git a/phpBB/styles/prosilver/template/viewtopic_topic_tools.html b/phpBB/styles/prosilver/template/viewtopic_topic_tools.html index 89f34d1b3a..9d79a19c81 100644 --- a/phpBB/styles/prosilver/template/viewtopic_topic_tools.html +++ b/phpBB/styles/prosilver/template/viewtopic_topic_tools.html @@ -1,6 +1,6 @@ <!-- IF not S_IS_BOT and (U_WATCH_TOPIC or U_BOOKMARK_TOPIC or U_BUMP_TOPIC or S_HAS_ATTACHMENTS or U_EMAIL_TOPIC or U_PRINT_TOPIC or S_DISPLAY_TOPIC_TOOLS) --> <div class="dropdown-container dropdown-button-control topic-tools"> - <span title="{L_TOPIC_TOOLS}" class="dropdown-trigger dropdown-select dropdown-select-icon tools-icon"><span></span></span> + <span title="{L_TOPIC_TOOLS}" class="button icon-button tools-icon dropdown-trigger dropdown-select"><span></span></span> <div class="dropdown hidden"> <div class="pointer"><div class="pointer-inner"></div></div> <ul class="dropdown-contents"> diff --git a/phpBB/styles/prosilver/theme/buttons.css b/phpBB/styles/prosilver/theme/buttons.css index 3df604394c..35a209233e 100644 --- a/phpBB/styles/prosilver/theme/buttons.css +++ b/phpBB/styles/prosilver/theme/buttons.css @@ -4,20 +4,8 @@ /* Rollover buttons Based on: http://wellstyled.com/css-nopreload-rollovers.html ----------------------------------------*/ -.buttons { - float: left; - width: auto; - height: auto; -} - -/* Rollover state */ -.buttons div, .dropdown-select { - float: left; - margin: 0 5px 0 0; -} - -/* Rolloff state */ -.buttons div a, .dropdown-select { +.button { + cursor: pointer; display: inline-block; line-height: 17.5px; height: 18px; @@ -26,9 +14,8 @@ border: 1px solid transparent; border-radius: 4px; background: transparent none 0 0 repeat-x; - padding: 2px 22px 2px 8px; + padding: 2px 8px; font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica; - font-weight: 600; position: relative; text-decoration: none !important; outline-style: none !important; @@ -36,70 +23,69 @@ *padding-right: 8px; } -.buttons div span { display: none; } - -.buttons div a:after, .dropdown-select:after { - content: ''; - display: block; - position: absolute; - top: 50%; - right: 6px; - width: 12px; - height: 12px; - margin-top: -6px; - background: transparent 0 0 no-repeat; +.icon-button, .dropdown-select { + padding-right: 22px; } -.buttons div a:hover:after { - background-position: 0 -20px; +.icon-button.dropdown-select { + padding-right: 44px; } -.dropdown-select { - cursor: pointer; - font-family: inherit; - font-size: 1em; - font-weight: normal; +.icon-button span { + background: transparent 0 0 no-repeat; + display: block; + float: right; + height: 12px; + margin: 3px -16px 0 0; + width: 12px; } .dropdown-select:after { background-position: -103px 10px; border-left: 1px solid; - margin-top: 0; + content: ''; + position: absolute; top: 0; right: 0; - height: 21px; - width: 15px; + height: 22px; + width: 16px; } .dropdown-visible .dropdown-select:after, .nojs .dropdown-container:hover .dropdown-select:after { background-position: -103px -10px; } -.dropdown-select-icon:before { - content: ''; - display: block; +.buttons, .buttons div { float: left; - margin-right: 4px; - margin-top: 2px; +} + +.buttons .button, .dropdown-select { + margin-right: 5px; } /* Big button images */ -.buttons div.reply-icon a:after, .buttons div.pmreply-icon a:after { background-position: -20px 0; } -.buttons div.reply-icon a:hover:after, .buttons div.pmreply-icon a:hover:after { background-position: -20px -20px; } +.reply-icon a span, .pmreply-icon a span { background-position: -20px 0; } +.reply-icon a:hover span, .pmreply-icon a:hover span { background-position: -20px -20px; } -.buttons div.post-icon a:after, .buttons div.newpm-icon a:after { background-position: 0 0; } -.buttons div.post-icon a:hover:after, .buttons div.newpm-icon a:hover:after { background-position: 0 -20px; } +.post-icon a span, .newpm-icon a span, .reply-all a span { background-position: 0 0; } +.post-icon a:hover span, .newpm-icon a:hover span, +.reply-all a:hover span { background-position: 0 -20px; } -.buttons div.locked-icon a:after { background-position: -60px 0; } -.buttons div.locked-icon a:hover:after { background-position: -60px -20px; } +.locked-icon a span { background-position: -60px 0; } +.locked-icon a:hover span { background-position: -60px -20px; } -.buttons div.forwardpm-icon a:after { background-position: -40px 0; } -.buttons div.forwardpm-icon a:hover:after { background-position: -40px -20px; } +.forwardpm-icon a span { background-position: -40px 0; } +.forwardpm-icon a:hover span { background-position: -40px -20px; } -.dropdown-select.tools-icon:before { background-position: -80px 0; height: 16px; width: 16px; } +.tools-icon span { + background-position: -80px 0; + height: 16px; + margin-top: 2px; + width: 16px; +} -.dropdown-visible .dropdown-select.tools-icon:before, -.nojs .dropdown-container:hover .dropdown-select.tools-icon:before { background-position: -80px -20px; } +.dropdown-visible .tools-icon span, +.nojs .dropdown-container:hover .tools-icon span { background-position: -80px -20px; } /* Icon images ---------------------------------------- */ diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index a7d7184642..91dea07b40 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -668,8 +668,7 @@ dd.profile-warnings { -------------------------------------------------------------- Colours and backgrounds for buttons.css -------------------------------------------------------------- */ - -.buttons div a, .dropdown-select { +.button { border-color: #C7C3BF; background-color: #FFFFFF; background-image: -moz-linear-gradient(top, #FFFFFF, #E9E9E9); @@ -679,19 +678,10 @@ Colours and backgrounds for buttons.css -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#E9E9E9')"; box-shadow: 0 0 0 1px #FFFFFF inset; -webkit-box-shadow: 0 0 0 1px #FFFFFF inset; - color: #BC2A4D !important; -} - -.dropdown-select { color: #5C6482 !important; } -.dropdown-select:after { - border-color: #DADADA; -} - -.buttons div a:hover, .dropdown-select:hover, .dropdown-visible .dropdown-select, -.dropdown-visible .dropdown-select:hover, .nojs .dropdown-container:hover .dropdown-select { +.button:hover, .dropdown-visible .dropdown-select, .nojs .dropdown-container:hover .dropdown-select { border-color: #0a8ed0; background-image: -moz-linear-gradient(top, #E9E9E9, #FFFFFF); background-image: -webkit-linear-gradient(top, #E9E9E9, #FFFFFF); @@ -701,9 +691,9 @@ Colours and backgrounds for buttons.css text-shadow: 1px 1px 0 #FFFFFF, -1px -1px 0 #FFFFFF, -1px -1px 0 rgba(188, 42, 77, 0.2); } -.dropdown-select:hover { - border-color: #C7C3BF; -} +.buttons .button { color: #BC2A4D !important; } +.dropdown-select:after { border-color: #DADADA; } +.dropdown-select:hover { border-color: #C7C3BF; } .dropdown-visible .dropdown-select, .dropdown-visible .dropdown-select:hover, .nojs .dropdown-container:hover .dropdown-select { border-color: #A6B2BA; |