Define common styles for search boxes

3 files changed, 38 insertions, 8 deletions

diff --git a/skins/classic/common.css b/skins/classic/common.css
index 4367d26cb..003c28d8c 100644
--- a/skins/classic/common.css
+++ b/skins/classic/common.css
@@ -748,18 +748,25 @@ ul.treelist li.droptarget
 
 /***** mac-style quicksearch field *****/
 
+div.searchbox,
 #quicksearchbar
 {
-  position: absolute;
-  top: 55px;
-  right: 10px;
+  position: relative;
   width: 190px;
   height: 20px;
   text-align: right;
   background: url(images/searchfield.gif) top left no-repeat;
 }
 
-#searchreset
+#quicksearchbar
+{
+  position: absolute;
+  top: 55px;
+  right: 10px;
+}
+
+#searchreset,
+div.searchbox a.searchreset
 {
   position: absolute;
   top: 3px;
@@ -767,19 +774,42 @@ ul.treelist li.droptarget
   text-decoration: none;
 }
 
-#searchmenulink
+#searchmenulink,
+div.searchbox a.searchmenu,
+div.searchbox a.searchicon
 {
  position: absolute;
  top: 3px;
  right: 168px;
 }
 
+div.searchbox a.searchreset
+{
+  display: block;
+  width: 14px;
+  height: 14px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-indent: 50000px;
+  background: url(images/icons/reset.gif) top left no-repeat;
+}
+
+div.searchbox a.searchicon
+{
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+  background: url(images/icons/glass.png) top left no-repeat;
+}
+
 #quicksearchbar img
 {
   vertical-align: middle;
 }
 
-#quicksearchbox
+#quicksearchbox,
+div.searchbox > input
 {
   position: absolute;
   top: 2px;
diff --git a/skins/classic/mail.css b/skins/classic/mail.css
index 6409b6b9b..29c9d1140 100644
--- a/skins/classic/mail.css
+++ b/skins/classic/mail.css
@@ -1860,7 +1860,7 @@ input.from_address
   color: #999;
 }
 
-#compose-contacts #quicksearchbar
+#compose-contacts .searchbox
 {
   top: 2px;
   left: 7px;
diff --git a/skins/classic/templates/compose.html b/skins/classic/templates/compose.html
index c43adbc27..4705600c7 100644
--- a/skins/classic/templates/compose.html
+++ b/skins/classic/templates/compose.html
@@ -50,7 +50,7 @@
 <div id="compose-contacts">
 <div class="boxtitle"><roundcube:label name="contacts" /></div>
 <div class="boxlistcontent">
-    <div id="quicksearchbar">
+    <div class="searchbox">
         <img id="searchmenulink" src="/images/icons/glass.png" width="16" height="16" />
         <roundcube:object name="searchform" id="quicksearchbox" form="true" tabindex="13" />
         <roundcube:button command="reset-search" id="searchreset" image="/images/icons/reset.gif" title="resetsearch" width="13" height="13" />