add: search bar

Add new header and search bar

app/assets/styles/form/input.css

@@ -0,0 +1,52 @@
+.Input {
+    &.error {
+        & .input-wrapper {
+            border-color: var(--color-error);
+            outline-width: 2px;
+        }
+
+        & span {
+            color: var(--color-error);
+        }
+    }
+
+    & span {
+        font-size: .65em;
+    }
+
+    & .input-wrapper {
+        position: relative;
+        flex: 25% 1 0;
+        border: 2px solid var(--color-main-dark);
+        border-radius: var(--radius-default);
+        overflow: hidden;
+        transition: var(--transition-default);
+        outline: 0 solid var(--color-lightest);
+
+        & label {
+            position: absolute;
+            font-size: .8em;
+            top: .3rem;
+            left: .5rem;
+            transition: var(--transition-default);
+        }
+
+        & input {
+            all: unset;
+            width: calc(100% - 1rem);
+            padding: 1.3rem .5rem .5rem .5rem;
+            background: var(--color-lightest);
+
+            &[type="number"] {
+                text-align: right;
+            }
+        }
+
+        & input:focus,
+        & input:not(:placeholder-shown) {
+            & + label {
+                color: var(--color-main-dark);
+            }
+        }
+    }
+}

app/assets/styles/form/search.css

@@ -0,0 +1,15 @@
+.Search {
+    border-radius: 9999px;
+    background: var(--color-lightest);
+    padding: 0 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+
+    & > input {
+        all: unset;
+        flex-grow: 1;
+        padding: .5rem 0;
+    }
+}