Merge branch 'refactor/rxjs-typescript' into refactor/dark-mode

src/assets/stylesheets/layout/_search.scss

@@ -394,7 +394,8 @@ $md-toggle__search--checked:
       }
 
       // Show reset button if search is active and input non-empty
-      #{$md-toggle__search--checked} .md-search__input:valid ~ & {
+      #{$md-toggle__search--checked}
+      .md-search__input:not(:placeholder-shown) ~ & {
         transform: scale(1);
         opacity: 1;
         pointer-events: initial;

src/assets/stylesheets/palette.scss

@@ -134,6 +134,11 @@
       &::placeholder {
         color: var(--md-default-fg-color--light);
       }
+
+      // Hovered search field
+      &:hover {
+        background-color: var(--md-default-fg-color--lighter);
+      }
     }
   }
 
@@ -200,7 +205,12 @@
 
     // Search input
     .md-search__input {
-      background-color: var(--md-default-bg-color--lightest);
+      background-color: var(--md-default-bg-color--lighter);
+
+      // Hovered search field
+      &:hover {
+        background-color: var(--md-default-bg-color--lightest);
+      }
     }
   }
 

src/partials/search.html

@@ -39,7 +39,6 @@
         spellcheck="false"
         data-md-component="search-query"
         data-md-state="active"
-        required
       />
       <label class="md-search__icon md-icon" for="__search">
         {% include ".icons/material/magnify.svg" %}