Fix padding and search bug, update button toggle icon

static/server/taskbar.css

@@ -57,14 +57,17 @@
     display: none;
 }
 
+
 #button_show_toggle:not(:checked)~label:after {
-    content: '►';
+    content: '⌃';
+    transform: rotate(180deg);
 }
 
 #button_show_toggle:checked~label:after {
-    content: '▼';
+    content: '⌃';
 }
 
+
 #button_show_toggle:checked~label~.kiwix_button_cont,
 #button_show_toggle:checked~label~.kiwix_button_cont>a {
     display: block;
@@ -74,6 +77,20 @@
     display: none;
 }
 
+label[for="button_show_toggle"]:after {
+    transition: 0.1s;
+    display: inline-block;
+    line-height: 26px;
+    margin-top: 5px;
+}
+
+#button_show_toggle~label~.kiwix_button_cont.searching {
+    display: none !important;
+}
+label[for="button_show_toggle"].searching {
+    display: none !important;
+}
+
 label[for="button_show_toggle"],
 .kiwix_button_cont {
     display: block;
@@ -125,7 +142,7 @@ li.ui-state-focus {
 }
 
 
-@media(min-width:415px) {
+@media(min-width:420px) {
     .kiwix_button_cont {
         display: inline-block !important;
     }
@@ -145,7 +162,7 @@ li.ui-state-focus {
     }
 
     .kiwix_button_cont {
-        margin-top: 5px;
+        margin-top: 4px;
     }
 }
 

static/server/taskbar.html.part

@@ -4,7 +4,7 @@
       <div class="kiwix_searchform">
         <form class="kiwixsearch" method="GET" action="__ROOT_LOCATION__/search" id="kiwixsearchform">
           <input type="hidden" name="content" value="__CONTENT__" />
-          <input autocomplete="off" class="ui-autocomplete-input" id="kiwixsearchbox" name="pattern" type="text" placeholder="&#x1f50d;">
+          <input autocomplete="off" class="ui-autocomplete-input" id="kiwixsearchbox" name="pattern" type="text" placeholder="&#x1f50d;" onfocus="this.placeholder = ''" onblur="this.placeholder = '&#x1f50d;'">
         </form>
       </div>
       <input type="checkbox" id="button_show_toggle">
@@ -60,9 +60,11 @@
     $('#kiwixsearchbox').on({
       focus: function(){
         $('.kiwix_searchform').addClass('full_width');
+        $('label[for="button_show_toggle"], .kiwix_button_cont').addClass('searching');
       },
       blur: function(){
         $('.kiwix_searchform').removeClass('full_width');
+        $('label[for="button_show_toggle"], .kiwix_button_cont').removeClass('searching');
       }
     });
   })(jQuery);