From 4d6058341296f04882c939571243f572b05d94da Mon Sep 17 00:00:00 2001
From: Cesar G <prototech91@gmail.com>
Date: Mon, 26 May 2014 14:53:00 -0700
Subject: [PATCH] [ticket/12155] Get rid of the <span> where possible and fix
 buttons in Safari.

PHPBB3-12155
---
 .../template/ucp_pm_message_header.html       | 10 +--
 .../prosilver/template/viewforum_body.html    |  4 +-
 .../prosilver/template/viewtopic_body.html    |  4 +-
 .../template/viewtopic_topic_tools.html       |  2 +-
 phpBB/styles/prosilver/theme/buttons.css      | 80 +++++++++----------
 phpBB/styles/prosilver/theme/colours.css      |  2 +-
 6 files changed, 48 insertions(+), 54 deletions(-)

diff --git a/phpBB/styles/prosilver/template/ucp_pm_message_header.html b/phpBB/styles/prosilver/template/ucp_pm_message_header.html
index 040b75f6ad..56e27811c6 100644
--- a/phpBB/styles/prosilver/template/ucp_pm_message_header.html
+++ b/phpBB/styles/prosilver/template/ucp_pm_message_header.html
@@ -10,21 +10,21 @@
 		<div class="buttons">
 			<!-- IF U_POST_REPLY_PM -->
 				<a title="{L_POST_REPLY_PM}" href="{U_POST_REPLY_PM}" class="button icon-button pmreply-icon">
-					<span>{L_BUTTON_PM_REPLY}</span>
+					{L_BUTTON_PM_REPLY}
 				</a>
 			<!-- ELSEIF U_POST_NEW_TOPIC -->
 				<a href="{U_POST_NEW_TOPIC}" accesskey="n" title="{L_UCP_PM_COMPOSE}" class="button icon-button newpm-icon">
-					<span>{L_BUTTON_PM_NEW}</span>
+					{L_BUTTON_PM_NEW}
 				</a>
 			<!-- ENDIF -->
 			<!-- IF U_FORWARD_PM -->
 				<a title="{L_POST_FORWARD_PM}" href="{U_FORWARD_PM}" class="button icon-button forwardpm-icon">
-					<span>{L_BUTTON_PM_FORWARD}</span>
+					{L_BUTTON_PM_FORWARD}
 				</a>
 			<!-- ENDIF -->
 			<!-- IF U_POST_REPLY_PM and S_PM_RECIPIENTS gt 1 -->
 				<a title="{L_REPLY_TO_ALL}" href="{U_POST_REPLY_ALL}" class="button icon-button reply-all">
-					<span>{L_BUTTON_PM_REPLY_ALL}</span>
+					{L_BUTTON_PM_REPLY_ALL}
 				</a>
 			<!-- ENDIF -->
 		</div>
@@ -32,7 +32,7 @@
 
 	<!-- 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 button icon-button tools-icon"><span></span></span>
+			<span title="{L_PM_TOOLS}" class="dropdown-trigger dropdown-select button icon-button tools-icon"></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 ad2222b4e6..c747dd01f5 100644
--- a/phpBB/styles/prosilver/template/viewforum_body.html
+++ b/phpBB/styles/prosilver/template/viewforum_body.html
@@ -40,7 +40,7 @@
 	<!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO -->
 		<div class="buttons">
 			<a href="{U_POST_NEW_TOPIC}" class="button icon-button <!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->post-icon<!-- ENDIF -->" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->">
-				<span><!-- IF S_IS_LOCKED -->{L_BUTTON_FORUM_LOCKED}<!-- ELSE -->{L_BUTTON_NEW_TOPIC}<!-- ENDIF --></span>
+				<!-- IF S_IS_LOCKED -->{L_BUTTON_FORUM_LOCKED}<!-- ELSE -->{L_BUTTON_NEW_TOPIC}<!-- ENDIF -->
 			</a>
 		</div>
 	<!-- ENDIF -->
@@ -226,7 +226,7 @@
 		<!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO -->
 			<div class="buttons">
 				<a href="{U_POST_NEW_TOPIC}" class="button icon-button <!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->post-icon<!-- ENDIF -->" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->">
-					<span><!-- IF S_IS_LOCKED -->{L_BUTTON_FORUM_LOCKED}<!-- ELSE -->{L_BUTTON_NEW_TOPIC}<!-- ENDIF --></span>
+					<!-- IF S_IS_LOCKED -->{L_BUTTON_FORUM_LOCKED}<!-- ELSE -->{L_BUTTON_NEW_TOPIC}<!-- ENDIF -->
 				</a>
 			</div>
 		<!-- ENDIF -->
diff --git a/phpBB/styles/prosilver/template/viewtopic_body.html b/phpBB/styles/prosilver/template/viewtopic_body.html
index f033686a96..eb61bd3e72 100644
--- a/phpBB/styles/prosilver/template/viewtopic_body.html
+++ b/phpBB/styles/prosilver/template/viewtopic_body.html
@@ -30,7 +30,7 @@
 	<div class="buttons">
 	<!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
 		<a href="{U_POST_REPLY_TOPIC}" class="button icon-button <!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->">
-			<span><!-- IF S_IS_LOCKED -->{L_BUTTON_TOPIC_LOCKED}<!-- ELSE -->{L_BUTTON_POST_REPLY}<!-- ENDIF --></span>
+			<!-- IF S_IS_LOCKED -->{L_BUTTON_TOPIC_LOCKED}<!-- ELSE -->{L_BUTTON_POST_REPLY}<!-- ENDIF -->
 		</a>
 	<!-- ENDIF -->
 	</div>
@@ -343,7 +343,7 @@
 	<div class="buttons">
 	<!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
 		<a href="{U_POST_REPLY_TOPIC}" class="button icon-button <!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->">
-			<span><!-- IF S_IS_LOCKED -->{L_BUTTON_TOPIC_LOCKED}<!-- ELSE -->{L_BUTTON_POST_REPLY}<!-- ENDIF --></span>
+			<!-- IF S_IS_LOCKED -->{L_BUTTON_TOPIC_LOCKED}<!-- ELSE -->{L_BUTTON_POST_REPLY}<!-- ENDIF -->
 		</a>
 	<!-- ENDIF -->
 	</div>
diff --git a/phpBB/styles/prosilver/template/viewtopic_topic_tools.html b/phpBB/styles/prosilver/template/viewtopic_topic_tools.html
index 9d79a19c81..5394c00f6a 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="button icon-button tools-icon dropdown-trigger dropdown-select"><span></span></span>
+		<span title="{L_TOPIC_TOOLS}" class="button icon-button tools-icon dropdown-trigger dropdown-select"></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 55f599530f..18041ea6d5 100644
--- a/phpBB/styles/prosilver/theme/buttons.css
+++ b/phpBB/styles/prosilver/theme/buttons.css
@@ -22,26 +22,17 @@
 	vertical-align: bottom;
 }
 
-.icon-button, .dropdown-select {
-	padding-right: 20px;
-}
-
 .icon-button.dropdown-select {
-	padding-right: 44px;
+	padding-right: 28px;
 }
 
-.icon-button span {
-	display: inline-block;
-	float: right;
-}
-
-.icon-button span:after {
+.icon-button:before {
 	background: transparent 0 0 no-repeat;
 	content: '';
 	display: inline-block;
 	float: right;
 	height: 12px;
-	margin: 3px -14px 0 0;
+	margin: 3px 0 0 2px;
 	width: 12px;
 }
 
@@ -69,29 +60,29 @@
 }
 
 /* Big button images */
-.reply-icon span:after, .pmreply-icon span:after						{ background-position: -20px 0; }
-.reply-icon:hover span:after, .pmreply-icon:hover span:after			{ background-position: -20px -20px; }
+.reply-icon:before, .pmreply-icon:before					{ background-position: -20px 0; }
+.reply-icon:hover:before, .pmreply-icon:hover:before		{ background-position: -20px -20px; }
 
-.post-icon span:after, .newpm-icon span:after, .reply-all span:after	{ background-position: 0 0; }
-.post-icon:hover span:after,
-.newpm-icon:hover span:after,
-.reply-all:hover span:after												{ background-position: 0 -20px; }
+.post-icon:before, .newpm-icon:before, .reply-all:before	{ background-position: 0 0; }
+.post-icon:hover:before,
+.newpm-icon:hover:before,
+.reply-all:hover:before										{ background-position: 0 -20px; }
 
-.locked-icon span:after													{ background-position: -60px 0; }
-.locked-icon:hover span:after											{ background-position: -60px -20px; }
+.locked-icon:before											{ background-position: -60px 0; }
+.locked-icon:hover:before									{ background-position: -60px -20px; }
 
-.forwardpm-icon span:after												{ background-position: -40px 0; }
-.forwardpm-icon:hover span:after										{ background-position: -40px -20px; }
+.forwardpm-icon:before										{ background-position: -40px 0; }
+.forwardpm-icon:hover:before								{ background-position: -40px -20px; }
 
-.tools-icon span:after {
+.tools-icon:before {
 	background-position: -80px 0;
 	height: 16px;
 	margin-top: 2px;
 	width: 16px;
 }
 
-.dropdown-visible .tools-icon span:after,
-.nojs .dropdown-container:hover .tools-icon span:after		{ background-position: -80px -20px; }
+.dropdown-visible .tools-icon:before,
+.nojs .dropdown-container:hover .tools-icon:before			{ background-position: -80px -20px; }
 
 /* Icon images
 ---------------------------------------- */
@@ -189,28 +180,31 @@ ul.linklist.bulletin li.small-icon:before {
 }
 
 .post-buttons .icon-button span {
-	font-size: 0;
+	display: block;
+	height: 0;
+	overflow: hidden;
+	position: absolute;
+	width: 1px;
 }
 
-.post-buttons .icon-button span:after {
-	float: none;
-	margin-right: 0;
+.post-buttons .icon-button:before {
+	margin-left: 0;
 }
 
-.quote-icon span:after							{ background-position: -122px 0; }
-.quote-icon:hover span:after					{ background-position: -122px -21px; }
-.edit-icon span:after							{ background-position: -137px 0; }
-.edit-icon:hover span:after						{ background-position: -137px -21px; }
-.warn-icon span:after							{ background-position: -208px 0; }
-.warn-icon:hover span:after						{ background-position: -208px -21px; }
-.delete-icon span:after							{ background-position: -152px 0; }
-.delete-icon:hover span:after					{ background-position: -152px -21px; }
-.report-icon span:after							{ background-position: -165px 0; }
-.report-icon:hover span:after					{ background-position: -165px -21px; }
-.info-icon span:after							{ background-position: -175px 0; }
-.info-icon:hover span:after						{ background-position: -175px -21px; }
-.button.responsive-menu-link span:after			{ background-position: -191px 0; }
-.button.responsive-menu-link:hover span:after	{ background-position: -191px -21px; }
+.quote-icon:before							{ background-position: -122px 0; }
+.quote-icon:hover:before					{ background-position: -122px -21px; }
+.edit-icon:before							{ background-position: -137px 0; }
+.edit-icon:hover:before						{ background-position: -137px -21px; }
+.warn-icon:before							{ background-position: -208px 0; }
+.warn-icon:hover:before						{ background-position: -208px -21px; }
+.delete-icon:before							{ background-position: -152px 0; }
+.delete-icon:hover:before					{ background-position: -152px -21px; }
+.report-icon:before							{ background-position: -165px 0; }
+.report-icon:hover:before					{ background-position: -165px -21px; }
+.info-icon:before							{ background-position: -175px 0; }
+.info-icon:hover:before						{ background-position: -175px -21px; }
+.button.responsive-menu-link:before			{ background-position: -191px 0; }
+.button.responsive-menu-link:hover:before	{ background-position: -191px -21px; }
 
 /* Responsive buttons in post body */
 .post-buttons .dropdown {
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css
index 34068f5716..b5cc0cf03b 100644
--- a/phpBB/styles/prosilver/theme/colours.css
+++ b/phpBB/styles/prosilver/theme/colours.css
@@ -726,7 +726,7 @@ Colours and backgrounds for buttons.css
 
 /* Profile & navigation icons */
 .contact-icon													{ background-image: url("./images/icons_contact.png"); }
-.icon-button span:after, .dropdown-select:after					{ background-image: url("./images/icons_button.png"); }
+.icon-button:before, .dropdown-select:after						{ background-image: url("./images/icons_button.png"); }
 
 /* Forum icons & Topic icons */
 .global_read													{ background-image: url("./images/announce_read.gif"); }