Basic search outline config UI implemented.

Props/assets/styles/site.scss

@@ -37,17 +37,6 @@ main {
     display: flex;
     flex-direction: column;
 
-    .tear {
-        border-top: 1px;
-        border-top-style: solid;
-        border-bottom: 1px;
-        border-bottom-style: solid;
-        @include themer.themed {
-            $tear: themer.color-of("background");
-            border-color: adjust-color($color: $tear, $lightness: -12%, $alpha: 1.0);
-            background-color: adjust-color($color: $tear, $lightness: -5%, $alpha: 1.0);
-        }
-    }
 }
 
 footer {
@@ -82,16 +71,24 @@ footer {
     }
 }
 
+.center-overlay {
+    position: absolute;
+    left: 50%;
+    right: 50%;
+    bottom: 50%;
+    top: 50%;
+}
+
 .concise {
     @extend .container;
     max-width: 630px;
-    width: inherit;
+    width: 100%;
 }
 
 .less-concise {
     @extend .container;
     max-width: 720px;
-    width: inherit;
+    width: 100%;
 }
 
 hr {
@@ -111,6 +108,115 @@ hr {
     }
 }
 
+.tear {
+    @include themer.themed {
+        $tear: themer.color-of("background");
+        background-color: adjust-color($color: $tear, $lightness: -8%, $alpha: 1.0);
+        box-shadow: 0px 0px 5px 0px adjust-color($color: $tear, $lightness: -25%, $alpha: 1.0) inset;
+    }
+}
+
+input[type="text"].title-input {
+    @include themer.themed {
+        color: themer.color-of("text");
+    }
+    font-size: 2.5em;
+    margin-bottom: 1.5rem;
+    border-style: none;
+    
+    border-bottom: 1px solid transparent;
+
+    background-color: transparent;
+    text-align: center;
+    transition: border-bottom-color 0.5s;
+
+    &:hover:not(:disabled) {
+        @include themer.themed {
+            border-bottom-color: adjust-color($color: themer.color-of("text"), $lightness: 50%);
+        }
+    }
+
+    &:focus:not(:disabled) {
+        outline: none;
+        @include themer.themed {
+            border-bottom-color: adjust-color($color: themer.color-of("text"));
+        }
+    }
+
+    &:disabled {
+        border-bottom-color: transparent;
+        @include themer.themed {
+            color: themer.color-of("text");
+        }
+    }
+}
+
+.clean-radio {
+    input[type="radio"] {
+        display: none;
+        & + label {
+            transition: border-color 0.5s;
+            padding: 0.5rem;
+            border-left: 3px solid;
+            @include themer.themed {
+                border-color: themer.color-of("text");
+            }
+            cursor: pointer;
+        }
+        &:hover + label {
+            @include themer.themed {
+                border-color: adjust-color($color: themer.color-of("special"), $lightness: 30%);
+            }
+        }
+        &:checked + label {
+            @include themer.themed {
+                border-color: adjust-color($color: themer.color-of("special"), $lightness: 0%);
+            }
+        }
+    }
+
+    button.btn {
+        transition: color 0.5s;
+        color: transparent;
+    }
+
+    &:hover {
+        button.btn {
+            @include themer.themed {
+                color: themer.color-of("text");
+            }
+        }
+    }
+}
+
+.border-right-themed {
+    border-right: 1px solid;
+    @include themer.themed {
+        border-right-color: themer.color-of("text");
+    }
+}
+
+.border-left-themed {
+    border-left: 1px solid;
+    @include themer.themed {
+        border-left-color: themer.color-of("text");
+    }
+}
+
+.border-top-themed {
+    border-top: 1px solid;
+    @include themer.themed {
+        border-top-color: themer.color-of("text");
+    }
+}
+
+.border-bottom-themed {
+    border-bottom: 1px solid;
+    @include themer.themed {
+        border-bottom-color: themer.color-of("text");
+    }
+}
+
 html {
     min-height: 100%;
     display: flex;