Auto merge of #3077 - Turbo87:focus-style, r=locks

Header: Use custom focus styling

The current focus outline is using a rectangle, while the input is rounded, which looks very ugly. This commit uses a `box-shadow` instead of the regular `outline` to solve this issue.

Before:
<img width="426" alt="Bildschirmfoto 2020-12-06 um 15 45 59" src="https://user-images.githubusercontent.com/141300/101283370-2c443d80-37da-11eb-905f-191ea5cd9dad.png">

After:
<img width="340" alt="Bildschirmfoto 2020-12-06 um 15 44 37" src="https://user-images.githubusercontent.com/141300/101283348-0ae35180-37da-11eb-87c1-544d0c9d093f.png">
<img width="958" alt="Bildschirmfoto 2020-12-06 um 15 44 55" src="https://user-images.githubusercontent.com/141300/101283351-0cad1500-37da-11eb-89f5-4ef3c7316808.png">

r? `@locks`

Author: bors

app/components/header.module.css

@@ -58,6 +58,12 @@ input.search {
     background-size: 14px 15px;
     border-radius: 15px;
     box-shadow: none;
+    transition: box-shadow 150ms;
+
+    &:focus {
+        outline: none;
+        box-shadow: 0 0 0 4px var(--yellow);
+    }
 }
 
 .mobile-search {