improve header css

ui/dist/themes/light.css

@@ -1,4 +1,8 @@
 :root {
     /* Colors */
     --color-primary: #155B4A;
+
+    /* search */
+    --search-bg: var(--color-canvas);
+    --search-border: 1px solid rgba(0,0,0,0.15);
 }

ui/scss/_vars.scss

@@ -24,7 +24,6 @@ $text-color: #000;
   --color-bg: #ffffff;
   --color-bg-alt: #D9D9D9;
 
-
   /* Misc */
   --content-max-width: 1000px;
   --nsfw-blur-intensity: 20px;
@@ -80,7 +79,8 @@ $text-color: #000;
   --header-color: #666;
   --header-active-color: rgba(0,0,0, 0.85);
   --header-height: $spacing-vertical * 2.5;
-  --header-button-bg: var(--button-bg);
+  --header-button-bg: transparent; //var(--button-bg);
+  --header-button-hover-bg: var(--button-bg);
 
   /* Header -> search */
   --search-bg: rgba(255, 255, 255, 0.7);

ui/scss/component/_header.scss

@@ -19,6 +19,10 @@
   padding-right: $spacing-vertical / 4;
   .button-alt {
       background: var(--header-button-bg) !important;
+      font-size: 18px;
+  }
+  .button-alt:hover {
+      background: var(--header-button-hover-bg) !important;
   }
 }