Extract input style to common CSS and remove raw uses of var(--x).

The mixin handles the fallback gracefully on browsers where it's not
supported.

assets/scss/mixins.scss

@@ -11,3 +11,22 @@
     }
 }
 
+@mixin green-shadow {
+    box-shadow: 0px 0px 5px rgba($primary-color, 0.7);
+}
+
+@mixin textual-input {
+  @include bordered-block;
+  box-sizing: border-box;
+  @include var(background-color, background-color);
+  @include var(color, text-color);
+  font-family: $font-body;
+  padding: $input-padding;
+
+  &:active, &:focus {
+      @include green-shadow;
+      border-color: $primary-color;
+  }
+
+  flex-grow: 1;
+}

assets/scss/search.scss

@@ -1,13 +1,8 @@
 @import "variables.scss";
 @import "mixins.scss";
 
-$search-input-padding: 0.5rem;
 $search-element-padding: 0.5rem 1rem 0.5rem 1rem;
 
-@mixin green-shadow {
-    box-shadow: 0px 0px 5px rgba($primary-color, 0.7);
-}
-
 .stork-wrapper {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
@@ -20,26 +15,15 @@ $search-element-padding: 0.5rem 1rem 0.5rem 1rem;
 }
 
 input.stork-input {
-    @include bordered-block;
+    @include textual-input;
-    background-color: var(--code-color);
-    color: var(--text-color);
-    font-family: $font-body;
-    padding: $search-input-padding;
-
-    &:active, &:focus {
-        @include green-shadow;
-        border-color: $primary-color;
-    }
-
-    flex-grow: 1;
 }
 
 .stork-close-button {
     @include bordered-block;
-    background-color: var(--code-color);
+    @include var(background-color, background-color);
-    color: var(--text-color);
+    @include var(color, text-color);
     font-family: $font-body;
-    padding: $search-input-padding;
+    padding: $input-padding;
 
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -72,11 +56,11 @@ input.stork-input {
     list-style: none;
 
     &.selected {
-        background-color: var(--code-color);
+        @include var(background-color, code-color);
     }
 
     a:hover {
-        color: var(--text-color);
+        @include var(color, text-color);
     }
 }
 

assets/scss/style.scss

@@ -78,6 +78,10 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
+.input[type="text"], textarea {
+  @include textual-input;
+}
+
 nav {
   width: 100%;
   margin: 0rem 0rem 1rem 0rem;

assets/scss/variables.scss

@@ -32,6 +32,8 @@ $code-lineno-color: grey;
 $code-comment-color: grey;
 $code-border: $standard-border-width solid $code-border-color;
 
+$input-padding: 0.5rem;
+
 $sidenote-padding: 1rem;
 $sidenote-highlight-border-width: .2rem;