From 201a961367c08edb31665b62540346aae6e63bd7 Mon Sep 17 00:00:00 2001
From: Michael Miday <midaym@gmail.com>
Date: Wed, 16 Sep 2015 06:43:35 +0200
Subject: [ticket/12769] Completely refactor btns and paging

---
 .../styles/prosilver/template/viewforum_body.html  |  9 +--
 .../styles/prosilver/template/viewtopic_body.html  | 16 ++--
 phpBB/styles/prosilver/theme/buttons.css           | 54 +++++--------
 phpBB/styles/prosilver/theme/colours.css           | 90 ++++++++++++++++------
 phpBB/styles/prosilver/theme/common.css            | 46 +++++------
 phpBB/styles/prosilver/theme/forms.css             |  5 +-
 6 files changed, 117 insertions(+), 103 deletions(-)

diff --git a/phpBB/styles/prosilver/template/viewforum_body.html b/phpBB/styles/prosilver/template/viewforum_body.html
index 784ab0baf3..af29404479 100644
--- a/phpBB/styles/prosilver/template/viewforum_body.html
+++ b/phpBB/styles/prosilver/template/viewforum_body.html
@@ -38,7 +38,6 @@
 	<div class="action-bar top">
 
 	<!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO -->
-		<div class="buttons">
 			<!-- EVENT viewforum_buttons_top_before -->
 
 		<a href="{U_POST_NEW_TOPIC}" class="button" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->">
@@ -49,12 +48,12 @@
 			<!-- ENDIF -->
 		</a>
 			<!-- EVENT viewforum_buttons_top_after -->
-		</div>
 	<!-- ENDIF -->
 
 	<!-- IF S_DISPLAY_SEARCHBOX -->
 		<div class="search-box" role="search">
 			<form method="get" id="forum-search" action="{S_SEARCHBOX_ACTION}">
+		</div>
 			<fieldset>
 				<input class="inputbox search tiny" type="search" name="keywords" id="search_keywords" size="20" placeholder="{L_SEARCH_FORUM}" />
 				<button class="button" type="submit" title="{L_SEARCH}">
@@ -263,8 +262,7 @@
 <!-- IF .topicrow and not S_DISPLAY_ACTIVE -->
 	<div class="action-bar bottom">
 		<!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO -->
-			<div class="buttons">
-				<!-- EVENT viewforum_buttons_bottom_before -->
+			<!-- EVENT viewforum_buttons_bottom_before -->
 
 			<a href="{U_POST_NEW_TOPIC}" class="button" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->">
 			<!-- IF S_IS_LOCKED -->
@@ -274,8 +272,7 @@
 			<!-- ENDIF -->
 			</a>
 
-				<!-- EVENT viewforum_buttons_bottom_after -->
-			</div>
+			<!-- EVENT viewforum_buttons_bottom_after -->
 		<!-- ENDIF -->
 
 		<div class="pagination">
diff --git a/phpBB/styles/prosilver/template/viewtopic_body.html b/phpBB/styles/prosilver/template/viewtopic_body.html
index d6713d7c26..bedf0d6d08 100644
--- a/phpBB/styles/prosilver/template/viewtopic_body.html
+++ b/phpBB/styles/prosilver/template/viewtopic_body.html
@@ -27,9 +27,8 @@
 <!-- ENDIF -->
 
 <div class="action-bar top">
-
-	<div class="buttons">
-		<!-- EVENT viewtopic_buttons_top_before -->
+<div class="action-bar bar-top">
+	<!-- EVENT viewtopic_buttons_top_before -->
 
 	<!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
 		<a href="{U_POST_REPLY_TOPIC}" class="button" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->">
@@ -41,9 +40,7 @@
 		</a>
 	<!-- ENDIF -->
 
-		<!-- EVENT viewtopic_buttons_top_after -->
-	</div>
-
+	<!-- EVENT viewtopic_buttons_top_after -->
 	<!-- INCLUDE viewtopic_topic_tools.html -->
 	<!-- EVENT viewtopic_dropdown_top_custom -->
 
@@ -392,8 +389,7 @@
 
 <!-- EVENT viewtopic_body_topic_actions_before -->
 <div class="action-bar bottom">
-	<div class="buttons">
-		<!-- EVENT viewtopic_buttons_bottom_before -->
+	<!-- EVENT viewtopic_buttons_bottom_before -->
 
 	<!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
 		<a href="{U_POST_REPLY_TOPIC}" class="button" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->">
@@ -404,9 +400,7 @@
 			<!-- ENDIF -->
 		</a>
 	<!-- ENDIF -->
-
-		<!-- EVENT viewtopic_buttons_bottom_after -->
-	</div>
+	<!-- EVENT viewtopic_buttons_bottom_after -->
 
 	<!-- INCLUDE viewtopic_topic_tools.html -->
 
diff --git a/phpBB/styles/prosilver/theme/buttons.css b/phpBB/styles/prosilver/theme/buttons.css
index 05aada3b2a..8f97e4db71 100644
--- a/phpBB/styles/prosilver/theme/buttons.css
+++ b/phpBB/styles/prosilver/theme/buttons.css
@@ -2,29 +2,24 @@
 ---------------------------------------- */
 
 .button {
-	cursor: pointer;
 	display: inline-block;
-	font-size: 1.2em;
+	padding: 2px 8px;
+	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;
+	-ms-touch-action: manipulation;
+	    touch-action: manipulation;
+	cursor: pointer;
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	    -ms-user-select: none;
+	        user-select: none;
 	border: 1px solid transparent;
 	border-radius: 4px;
-	background: transparent none 0 0 repeat-x;
-	padding: 2px 8px;
-	font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
-	position: relative;
-	text-decoration: none !important;
-	outline-style: none !important;
-	vertical-align: bottom;
-}
-
-
-.icon-button:before {
-	background: transparent 0 0 no-repeat;
-	content: '';
-	display: inline-block;
-	float: right;
-	height: 12px;
-	width: 12px;
 }
 
 .button:focus,
@@ -97,24 +92,17 @@
 	margin-right: 3px;
 }
 
-.post-buttons .icon-button {
-	padding: 5px;
+.post-buttons .button, .format-buttons .button {
+	padding-left: 3px;
+	padding-right: 3px;
 }
 
-.hastouch .post-buttons .icon-button {
-	padding: 2px 8px;
+.hastouch .post-buttons {
+	margin-right: 10px;
 }
 
-.post-buttons .icon-button span {
-	display: block;
-	height: 0;
-	overflow: hidden;
-	position: absolute;
-	width: 1px;
-}
-
-.post-buttons .icon-button:before {
-	margin-left: 0;
+.post-buttons .button span {
+	font-size: 0;
 }
 
 /* Responsive buttons in post body */
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css
index f2c9737e0c..e2c71f2ed1 100644
--- a/phpBB/styles/prosilver/theme/colours.css
+++ b/phpBB/styles/prosilver/theme/colours.css
@@ -172,39 +172,24 @@ dl.details dd {
 	color: #1198D9;
 }
 
-/* Pagination
 ---------------------------------------- */
 
 .pagination li a {
-	background-color: #ECEDEE;
-	border-color: #B4BAC0;
-	color: #5C758C;
 }
 
 .pagination li.ellipsis span {
-	background-color: transparent;
-	color:	#000000;
 }
 
 .pagination li.active span {
-	background-color: #4692BF;
-	border-color: #4692BF;
-	color: #FFFFFF;
 }
 
 .pagination li a:hover, .pagination .dropdown-visible a.dropdown-trigger, .nojs .pagination .dropdown-container:hover a.dropdown-trigger {
-	background-color: #368AD2;
-	border-color: #368AD2;
-	color: #FFFFFF;
 }
 
 .pagination li.next a, .pagination li.previous a, .pagination li.page-jump a {
-	background-image: url("./images/icons_pagination.png");
 }
 
 /* Pagination in viewforum for multipage topics */
-.row .pagination {
-	background-image: url("./images/icon_pages.gif");
 }
 
 .jumpbox .dropdown li {
@@ -662,9 +647,30 @@ 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);
 }
 
+.button i {
+	color: #8f8f8f;
+}
+
+.button:focus i,
+.button:hover i {
+	color: #1878cb;
+}
+
 .caret	{ border-color: #DADADA; }
 .caret	{ border-color: #C7C3BF; }
 
+.jumpbox .button, .jumpbox .button i {
+	color: #536482;
+}
+
+.jumpbox .button:hover {
+	border-color: #C7C3BF;
+}
+
+.jumpbox .button:hover i {
+	color: #536482;
+}
+
 .dropdown-visible .dropdown-select, .dropdown-visible .dropdown-select:hover, .nojs .dropdown-container:hover .dropdown-select {
 	border-color: #A6B2BA;
 	color: #105289;
@@ -673,6 +679,52 @@ Colours and backgrounds for buttons.css
 .contact-icons a		{ border-color: #DCDCDC; }
 .contact-icons a:hover	{ background-color: #F2F6F9; }
 
+/* Pagination
+---------------------------------------- */
+
+.pagination li a {
+	background: #ECEDEE;
+	filter: none;
+	border-color: #B4BAC0;
+	box-shadow: none;
+	-webkit-box-shadow: none;
+	color: #5C758C;
+}
+
+.pagination li.ellipsis span {
+	background: transparent;
+	color:	#000000;
+}
+
+.pagination li.active span {
+	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;
+	text-shadow: none;
+}
+
+/* Search box
+--------------------------------------------- */
+
+.search-box .inputbox,
+.search-box .inputbox:hover,
+.search-box .inputbox:focus,
+.search-box .button:focus,
+.search-box .button:hover {
+	border-color: #C7C3BF;
+}
+
+.search-header {
+	box-shadow: 0 0 10px #0075B0;
+}
+
 /* Icon images
 ---------------------------------------- */
 .icon-acp														{ background-image: url("./images/icon_acp.gif"); }
@@ -1154,14 +1206,6 @@ input.disabled {
 	border-color: #F1F8FF transparent;
 }
 
-ul.linklist li.responsive-menu a.responsive-menu-link:before {
-	border-color: #105289;
-}
-
-ul.linklist li.responsive-menu a.responsive-menu-link:hover:before, ul.linklist li.responsive-menu.visible a.responsive-menu-link:before {
-	border-color: #D31141;
-}
-
 .dropdown .dropdown-contents {
 	background: #fff;
 	border-color: #B9B9B9;
diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css
index 9991612bcd..b69c2a02fe 100644
--- a/phpBB/styles/prosilver/theme/common.css
+++ b/phpBB/styles/prosilver/theme/common.css
@@ -806,16 +806,20 @@ fieldset.fields1 dl.pmlist dd.recipients {
 }
 
 .pagination li a, .pagination li span {
-	border: 1px solid transparent;
 	border-radius: 2px;
-	display: block;
-	font-size: 10px;
+	padding: 2px 5px;
+}
+
+.pagination li.active span {
+	display: inline-block;
+	font-size: 13px;
 	font-weight: normal;
-	line-height: 14px;
-	min-width: 10px;
-	padding: 3px;
+	font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
+	line-height: 1.4;
 	text-align: center;
-	text-decoration: none;
+	white-space: nowrap;
+	vertical-align: middle;
+	border: 1px solid transparent;
 }
 
 .pagination li.ellipsis span {
@@ -827,37 +831,24 @@ fieldset.fields1 dl.pmlist dd.recipients {
 	margin-right: 5px;
 }
 
-.pagination li.page-jump a, .pagination li.next a, .pagination li.previous a {
-	background-repeat: no-repeat;
-	font-size: 0;
-	height: 14px;
-	width: 11px;
-}
 
 .pagination li.page-jump a {
-	background-position: 0 2px;
-	width: 24px;
+	padding: 0 8px;
 }
 
-.pagination li.next a {
-	background-position: -50px 2px;
+.pagination li.page-jump a i {
+	font-size: 21px;
 }
 
-.pagination li.previous a {
-	background-position: -30px 2px;
+.pagination li.arrow a i {
+	width: 8px;
 }
 
-.pagination li.page-jump a:hover, .pagination .dropdown-visible a.dropdown-trigger, .nojs .pagination .dropdown-container:hover a.dropdown-trigger { background-position: 0 -18px; }
-.pagination li.next a:hover { background-position: -48px -16px; }
-.pagination li.previous a:hover { background-position: -29px -16px; }
 
 /* Pagination in viewforum for multipage topics */
 .row .pagination {
 	display: block;
 	margin-top: 0;
-	padding: 1px 0 1px 15px;
-	font-size: 10px;
-	background: none 0 50% no-repeat;
 }
 
 .row .pagination > ul {
@@ -865,8 +856,9 @@ fieldset.fields1 dl.pmlist dd.recipients {
 }
 
 .row .pagination li a, .row .pagination li span {
-	border-radius: 1px;
-	padding: 1px;
+	border-radius: 2px;
+    padding: 1px 3px;
+    font-size: 9px;
 }
 
 /* jQuery popups
diff --git a/phpBB/styles/prosilver/theme/forms.css b/phpBB/styles/prosilver/theme/forms.css
index 332b0fa0e2..4924d9bd9f 100644
--- a/phpBB/styles/prosilver/theme/forms.css
+++ b/phpBB/styles/prosilver/theme/forms.css
@@ -316,6 +316,7 @@ a.button1, input.button1, input.button3, a.button2, input.button2 {
 	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 {
@@ -342,12 +343,10 @@ a.button2, input.button2, input.button3 {
 }
 
 /* <a> button in the style of the form buttons */
-a.button1, a.button1:link, a.button1:visited, a.button1:active, a.button2, a.button2:link, a.button2:visited, a.button2:active {
+a.button1, a.button2 {
 	text-decoration: none;
 	padding: 2px 8px;
-	line-height: 250%;
 	vertical-align: text-bottom;
-	background-position: 0 1px;
 }
 
 /* Hover states */
-- 
cgit v1.2.1