fix SearchBox size & position in skins with 2px focus border and ...

use SearchClearButton id in skins

4 files changed, 49 insertions, 45 deletions

diff --git a/res/skins/Deere/style.qss b/res/skins/Deere/style.qss
index 00193dd7ee..8a5ff991c8 100644
--- a/res/skins/Deere/style.qss
+++ b/res/skins/Deere/style.qss
@@ -354,21 +354,24 @@ WSearchLineEdit {
   border: 1px solid #4B4B4B;
   background-color: #1e1e1e;
   color: #d2d2d2;
-}
-
-WSearchLineEdit:focus {
-  border: 1px solid #FF6600;
-  color: #D6D6D6;
-  selection-color: #222222;
-  selection-background-color: #d2d2d2;
-}
-  /* Clear button */
-  WSearchLineEdit QToolButton:!focus {
-    image: url(skin:/icon/ic_lib_clear_search.svg);
   }
-  WSearchLineEdit QToolButton:focus {
-    image: url(skin:/icon/ic_lib_clear_search_focus.svg);
+  WSearchLineEdit:focus {
+    border: 1px solid #FF6600;
+    color: #D6D6D6;
+    selection-color: #222222;
+    selection-background-color: #d2d2d2;
   }
+  /* Clear button */
+  #SearchClearButton {
+    background: none;
+    border: 0px solid #fff;
+    }
+    #SearchClearButton:!focus {
+      image: url(skin:/icon/ic_lib_clear_search.svg);
+    }
+    #SearchClearButton:focus {
+      image: url(skin:/icon/ic_lib_clear_search_focus.svg);
+    }
 
 /* library preview deck */
 #PreviewDeck {
diff --git a/res/skins/LateNight/style.qss b/res/skins/LateNight/style.qss
index 6298535385..1d29602a9e 100644
--- a/res/skins/LateNight/style.qss
+++ b/res/skins/LateNight/style.qss
@@ -1041,13 +1041,6 @@ QPushButton#pushButtonAutoDJ:checked,
 #ToolbarLogo {
   image: url(skin:/style_classic/mixxx_logo_small.svg) no-repeat center center;
 }
-
-WSearchLineEdit QToolButton:!focus {
-  image: url(skin:/buttons_classic/btn__lib_clear_search.svg);
-  }
-  WSearchLineEdit QToolButton:focus {
-    image: url(skin:/buttons_classic/btn__lib_clear_search_focus.svg);
-  }
 /************** Button icons **************************************************/
 /************** Button styles *************************************************/
 
@@ -2214,20 +2207,26 @@ QScrollBar {
   margin-bottom: 3px;
   margin-left: 2px;
 }
+
 WSearchLineEdit {
   padding: 2px;
   background: #0f0f0f;
   }
   WSearchLineEdit:focus {
+    padding: 1px;
     border: 2px solid #d08e00;
   }
   /* Clear button */
-  WSearchLineEdit QToolButton:!focus {
-    image: url(skin:/buttons_classic/btn__lib_clear_search.svg);
-  }
-  WSearchLineEdit QToolButton:focus {
-    image: url(skin:/buttons_classic/btn__lib_clear_search_focus.svg);
-  }
+  #SearchClearButton {
+    background: none;
+    border: 0px solid #fff;
+    }
+    #SearchClearButton:!focus {
+      image: url(skin:/buttons_classic/btn__lib_clear_search.svg);
+    }
+    #SearchClearButton:focus {
+      image: url(skin:/buttons_classic/btn__lib_clear_search_focus.svg);
+    }
 
 /* HorizontalSplitter
   (the splitter itself is horizontal)
diff --git a/res/skins/Shade/style.qss b/res/skins/Shade/style.qss
index 6cb321d438..60437f1e6f 100644
--- a/res/skins/Shade/style.qss
+++ b/res/skins/Shade/style.qss
@@ -293,18 +293,23 @@ WSearchLineEdit {
   color: #cfcfcf;
   }
   WSearchLineEdit:focus {
+    padding: 1px;
     border: 2px solid #ff6600;
     color: #eeeeee;
     selection-color: #0f0f0f;
     selection-background-color: #d2d2d2;
   }
   /* Clear button */
-  WSearchLineEdit QToolButton:!focus {
-    image: url(skin:/btn/btn_lib_clear_search.svg);
-  }
-  WSearchLineEdit QToolButton:focus {
-    image: url(skin:/btn/btn_lib_clear_search_focus.svg);
-  }
+  #SearchClearButton {
+    background: none;
+    border: 0px solid #fff;
+    }
+    #SearchClearButton:!focus {
+      image: url(skin:/btn/btn_lib_clear_search.svg);
+    }
+    #SearchClearButton:focus {
+      image: url(skin:/btn/btn_lib_clear_search_focus.svg);
+    }
 
 QHeaderView {
   /* Note(ronso0)
diff --git a/res/skins/Tango/style.qss b/res/skins/Tango/style.qss
index ff7c70ba56..b8342a6693 100644
--- a/res/skins/Tango/style.qss
+++ b/res/skins/Tango/style.qss
@@ -2708,24 +2708,21 @@ WSearchLineEdit {
   margin-bottom: 5px; */
   }
   WSearchLineEdit:focus {
+    padding: 1px;
     border: 2px solid #ff6600;
     color: #eeeeee;
-    padding: 2px;
   }
   /* Clear button */
-  WSearchLineEdit QToolButton {
-  /*  Somehow the default size is alway 19x19 px */
-  /* Dummy icon
-    qproperty-icon: url(""); */
+  #SearchClearButton {
+    background: none;
+    border: 0px solid #fff;
+    }
+    #SearchClearButton:!focus {
+      image: url(skin:/buttons/btn_lib_clear_search.svg);
+    }
+    #SearchClearButton:focus {
+      image: url(skin:/buttons/btn_lib_clear_search_focus.svg);
     }
-    /* ToDo move this to default.qss */
-  /* Clear button */
-  WSearchLineEdit QToolButton:!focus {
-    image: url(skin:/buttons/btn_lib_clear_search.svg);
-  }
-  WSearchLineEdit QToolButton:focus {
-    image: url(skin:/buttons/btn_lib_clear_search_focus.svg);
-  }
 
 WLibrary QLabel,
 WLibrary QRadioButton {	/*