[ticket/12598] Improve search box styling

PHPBB3-12598

phpBB/styles/prosilver/theme/bidi.css

@@ -29,20 +29,10 @@
 --------------------------------------------- */
 .rtl #search-box {
 	float: left;
-	text-align: left;
 	margin-right: 0;
 	margin-left: 5px;
 }
 
-.rtl #search-box li {
-	text-align: left;
-}
-
-.rtl #search-box img {
-	margin-right: 0;
-	margin-left: 3px;
-}
-
 .rtl #site-description {
 	float: right;
 }
@@ -643,6 +633,11 @@ li.breadcrumbs span:first-child > a {
 	float: right;
 }
 
+.rtl .buttons .button, .rtl .dropdown-select {
+	margin-left: 5px;
+	margin-right: 0;
+}
+
 /* Icon images
 ---------------------------------------- */
 .rtl .small-icon {
@@ -952,11 +947,29 @@ li.breadcrumbs span:first-child > a {
 
 /* Topic and forum Search */
 .rtl .search-box {
-	margin-right: 5px;
-	margin-left: 0;
 	float: right;
 }
 
+.rtl .search-box .inputbox {
+	border-left-width: 0;
+	border-right-width: 1px;
+	border-radius: 0 4px 4px 0;
+	float: right;
+	padding: 3px;
+}
+
+.rtl .search-box .button {
+	float: right;
+}
+
+.rtl .search-box a.button {
+	border-left-width: 1px;
+	border-right-width: 0;
+	border-radius: 4px 0 0 4px;
+	padding-left: 5px;
+	padding-right: 3px;
+}
+
 .rtl input.search {
 	background-position: right 1px;
 	padding-right: 17px;

phpBB/styles/prosilver/theme/buttons.css

@@ -85,7 +85,7 @@
 	font-size: 0;
 }
 
-.tools-icon:before, .modtools-icon:before {
+.tools-icon:before, .modtools-icon:before, .search-adv-icon:before {
 	background-position: -80px 0;
 	height: 16px;
 	margin-top: 2px;
@@ -95,6 +95,9 @@
 .dropdown-visible .tools-icon:before,
 .nojs .dropdown-container:hover .tools-icon:before			{ background-position: -80px -20px; }
 
+.search-adv-icon:before										{ background-position: -245px 0; }
+.search-adv-icon:hover:before								{ background-position: -245px -20px; }
+
 .modtools-icon:before										{ background-position: -225px 0; }
 .dropdown-visible .modtools-icon:before,
 .nojs .dropdown-container:hover .modtools-icon:before		{ background-position: -225px -20px; }
@@ -239,3 +242,9 @@ ul.linklist.bulletin > li.small-icon:before {
 .hasjs .postbody .post-buttons {
 	max-width: 40%;
 }
+
+/* Browser-specific tweaks */
+button::-moz-focus-inner {
+	padding: 0;
+	border: 0
+}

phpBB/styles/prosilver/theme/colours.css

@@ -30,15 +30,21 @@ hr {
 --------------------------------------------- */
 
 #search-box {
-	color: #FFFFFF;
+	box-shadow: 0 0 10px #0075B0;
 }
 
-#search-box #keywords {
-	background-color: #FFF;
+#search-box .inputbox:hover,
+#search-box .inputbox:focus,
+#search-box .button:hover {
+	border-color: #C7C3BF;
 }
 
-#search-box input {
-	border-color: #0075B0;
+.search-box .inputbox {
+	border-color: #C7C3BF;
+}
+
+.search-box button.search-icon:before {
+	background-image: url("./images/icon_textbox_search.gif");
 }
 
 /* Round cornered boxes and backgrounds
@@ -249,11 +255,11 @@ a { color: #105289; }
 a:hover	{ color: #D31141; }
 
 /* Links on gradient backgrounds */
-#search-box a, .navbg a, .forumbg .header a, .forabg .header a, th a {
+.navbg a, .forumbg .header a, .forabg .header a, th a {
 	color: #FFFFFF;
 }
 
-#search-box a:hover, .navbg a:hover, .forumbg .header a:hover, .forabg .header a:hover, th a:hover {
+.navbg a:hover, .forumbg .header a:hover, .forabg .header a:hover, th a:hover {
 	color: #A8D8FF;
 }
 

phpBB/styles/prosilver/theme/common.css

@@ -212,51 +212,26 @@ ol ol ul, ol ul ul, ul ol ul, ul ul ul {
 	text-decoration: none;
 }
 
-/* Search box
---------------------------------------------- */
-#search-box {
-	position: relative;
-	margin-top: 30px;
-	margin-right: 5px;
-	display: block;
-	float: right;
-	text-align: right;
-	white-space: nowrap; /* For Opera */
-}
-
-#search-box #keywords {
-	width: 95px;
-}
-
-#search-box input {
-	border: 1px solid transparent;
-}
-
-/* .button1 style defined later, just a few tweaks for the search button version */
-#search-box input.button1 {
-	padding: 1px 5px;
-}
-
-#search-box li {
-	text-align: right;
-	margin-top: 4px;
-}
-
-#search-box img {
-	vertical-align: middle;
-	margin-right: 3px;
-}
-
 /* Site description and logo */
 #site-description {
 	float: left;
-	width: 70%;
+	width: 65%;
 }
 
 #site-description h1 {
 	margin-right: 0;
 }
 
+/* Search box
+--------------------------------------------- */
+#search-box {
+	border-radius: 4px;
+	display: block;
+	float: right;
+	margin-right: 5px;
+	margin-top: 30px;
+}
+
 /* Round cornered boxes and backgrounds
 ---------------------------------------- */
 .headerbar {

phpBB/styles/prosilver/theme/forms.css

@@ -289,6 +289,10 @@ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-s
 	display: none;
 }
 
+input[type="search"]::-webkit-search-cancel-button {
+	cursor: pointer;
+}
+
 /* Form button styles
 ---------------------------------------- */
 input.button1, input.button2 {
@@ -352,12 +356,46 @@ input.button1:focus, input.button2:focus, input.button3:focus {
 
 /* Topic and forum Search */
 .search-box {
-	margin-top: 3px;
-	margin-left: 5px;
 	float: left;
 }
 
-.search-box input {
+.search-box .inputbox {
+	background-image: none;
+	border-right-width: 0;
+	border-radius: 4px 0 0 4px;
+	float: left;
+	height: 24px;
+	padding: 3px;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.search-box button {
+	float: left;
+}
+
+.search-box button.search-icon {
+	border-radius: 0;
+	font-size: 0;
+	height: 24px;
+	margin: 0;
+	padding: 3px;
+	position: relative;
+}
+
+.search-box button.search-icon:before {
+	margin: 0 3px;
+	height: 14px;
+	width: 16px;
+}
+
+.search-box a.button {
+	border-left-width: 0;
+	border-radius: 0 4px 4px 0;
+	font-size: 0;
+	margin: 0;
+	padding: 2px 5px 2px 3px;
 }
 
 input.search {
@@ -371,4 +409,3 @@ input.search {
 .medium { width: 50%;}
 .narrow { width: 25%;}
 .tiny { width: 10%;}
-

phpBB/styles/prosilver/theme/links.css

@@ -18,11 +18,11 @@ a:hover	{ text-decoration: underline; }
 }
 
 /* Links on gradient backgrounds */
-#search-box a, .navbg a, .forumbg .header a, .forabg .header a, th a {
+.navbg a, .forumbg .header a, .forabg .header a, th a {
 	text-decoration: none;
 }
 
-#search-box a:hover, .navbg a:hover, .forumbg .header a:hover, .forabg .header a:hover, th a:hover {
+.navbg a:hover, .forumbg .header a:hover, .forabg .header a:hover, th a:hover {
 	text-decoration: underline;
 }
 

phpBB/styles/prosilver/theme/responsive.css

@@ -351,6 +351,13 @@ fieldset.quick-login label[for="autologin"] {
 	}
 }
 
+@media only screen and (max-width: 430px), only screen and (max-device-width: 430px)
+{
+	.section-viewtopic .search-box .inputbox {
+		width: 110px;
+	}
+}
+
 @media only screen and (max-width: 320px), only screen and (max-device-width: 320px)
 {
 	select, .inputbox {
@@ -511,9 +518,13 @@ fieldset.display-actions {
 	p.responsive-center {
 		float: none;
 		text-align: center;
-		margin: 0;
+		margin-bottom: 5px;
 	}
 
+	action-bar > div {
+		margin-bottom: 5px;
+ 	}
+
 	.action-bar > .pagination {
 		float: none;
 		clear: both;
@@ -525,7 +536,7 @@ fieldset.display-actions {
 		margin: 0 2px;
 	}
 
-	.action-bar > div.search-box, p.jumpbox-return {
+	p.jumpbox-return {
 		display: none;
 	}
 

phpBB/styles/prosilver/theme/tweaks.css

@@ -24,4 +24,7 @@ dd label input { vertical-align: text-bottom\9; }
 /* IE 9 Tweaks
 ------------------------------------------------------------------------------*/
 
-
+/* Border-radius bleed fix in IE9 */
+#search-box, #search-box .inputbox, #search-box a.button {
+	border-radius: 0;
+}