[ticket/12155] Move existing button style to a more generic class.

PHPBB3-12155
author: Cesar G <prototech91@gmail.com> 2014-05-15 13:22:43 -0700
committer: Cesar G <prototech91@gmail.com> 2014-05-27 07:17:46 -0700
commit: 00ff33c9b42479bee386cd45e863cb0bfe25a882 (patch)
tree: 7327baee6bac3a30d8a739b61909ac8f219ae3a2 /phpBB/styles/prosilver
parent: 03d3762d52a5c63168311fb103e517a7ed36c83c (diff)
download: forums-00ff33c9b42479bee386cd45e863cb0bfe25a882.tar
forums-00ff33c9b42479bee386cd45e863cb0bfe25a882.tar.gz
forums-00ff33c9b42479bee386cd45e863cb0bfe25a882.tar.bz2
forums-00ff33c9b42479bee386cd45e863cb0bfe25a882.tar.xz
forums-00ff33c9b42479bee386cd45e863cb0bfe25a882.zip
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;
author	Cesar G <prototech91@gmail.com>	2014-05-15 13:22:43 -0700
committer	Cesar G <prototech91@gmail.com>	2014-05-27 07:17:46 -0700
commit	00ff33c9b42479bee386cd45e863cb0bfe25a882 (patch)
tree	7327baee6bac3a30d8a739b61909ac8f219ae3a2 /phpBB/styles/prosilver
parent	03d3762d52a5c63168311fb103e517a7ed36c83c (diff)
download	forums-00ff33c9b42479bee386cd45e863cb0bfe25a882.tar forums-00ff33c9b42479bee386cd45e863cb0bfe25a882.tar.gz forums-00ff33c9b42479bee386cd45e863cb0bfe25a882.tar.bz2 forums-00ff33c9b42479bee386cd45e863cb0bfe25a882.tar.xz forums-00ff33c9b42479bee386cd45e863cb0bfe25a882.zip