From b303b515e3ade7cf6802bc7fbf37248d52854135 Mon Sep 17 00:00:00 2001
From: DarkCat09 <gh@dc09.ru>
Date: Fri, 20 Oct 2023 18:26:24 +0400
Subject: [PATCH] Styled search bar, changes in theme vars

---
 assets/index.less | 72 ++++++++++++++++++++++++++++++++++++++++++++++-
 assets/theme.less | 16 +++++++++--
 views/index.html  | 22 ++++++++-------
 3 files changed, 96 insertions(+), 14 deletions(-)

diff --git a/assets/index.less b/assets/index.less
index 401a5d6..f66563e 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -2,7 +2,7 @@ body {
   margin: 0;
   padding: 0;
   height: 100vh;
-  background: var(--gradient);
+  background: var(--bg-gradient);
 }
 
 main {
@@ -35,3 +35,73 @@ main {
     user-select: none;
   }
 }
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+form {
+  .search-box {
+    position: relative;
+
+    // FIXME
+    width: 100%;
+    max-width: 50rem;
+    box-sizing: border-box;
+  }
+
+  .search-clear {
+    position: absolute;
+    right: 0.2rem;
+
+    input {
+      background: transparent;
+      color: var(--fg);
+      font-size: 1.125rem;
+
+      cursor: pointer;
+      border: none;
+      outline: none;
+
+      &:hover {
+        color: var(--accent);
+      }
+    }
+  }
+
+  @btn-padding: 0.625rem;
+  @btn-font: 1.5rem;
+  @height: @btn-font + @btn-padding * 2;
+  @bdrs: @height * 0.25;
+
+  .search input {
+    padding: 0 0.5rem;
+    box-sizing: border-box;
+    height: @height;
+
+    background: var(--bg-sec);
+    color: var(--fg);
+    font-size: 1.125rem;
+
+    border: none;
+    outline: none;
+    border-top-left-radius: @bdrs;
+    border-bottom-left-radius: @bdrs;
+  }
+
+  .search-submit input {
+    padding: @btn-padding;
+
+    background: var(--gradient);
+    color: #fff;
+    font-size: @btn-font;
+
+    cursor: pointer;
+    border: none;
+    outline: none;
+    border-top-right-radius: @bdrs;
+    border-bottom-right-radius: @bdrs;
+  }
+}
diff --git a/assets/theme.less b/assets/theme.less
index 704955f..da2a2f3 100644
--- a/assets/theme.less
+++ b/assets/theme.less
@@ -1,13 +1,23 @@
 .theme-mixin(@light: bool) {
+  // TODO: awful, use just hsl() instead of magic multipliers or percentages in lighten/darken
+  // Also, it's not good to depend on the background color.
+  // Maybe, implement MD3 guidelines.
   @bg: if(@light, #e8e8ff, #181822);
   @fg: if(@light, #111111, #eeeeee);
+  @bg-sec: if(@light, darken(@bg, 10%), lighten(@bg, 30%));
   @mult: if(@light, 0.75, 2.75);
+  @color1: hsl(hue(@bg), saturation(@bg) * @mult, lightness(@bg) * @mult);
+  @color2: spin(@color1, 40);
+  @accent: if(@light, darken(@color1, 10%), lighten(@color1, 40%));
 
   --bg: @bg;
   --fg: @fg;
-  --color1: hsl(hue(@bg), saturation(@bg) * @mult, lightness(@bg) * @mult);
-  --color2: hsl(hue(@bg) + 40, saturation(@bg) * @mult, lightness(@bg) * @mult);
-  --gradient: linear-gradient(135deg, var(--color1) 0%, var(--bg) 25%, var(--bg) 75%, var(--color2) 100%);
+  --bg-sec: @bg-sec;
+  --accent: @accent;
+  --color1: @color1;
+  --color2: @color2;
+  --gradient: linear-gradient(135deg, var(--color1) 0%, var(--color2) 100%);
+  --bg-gradient: linear-gradient(135deg, var(--color1) 0%, var(--bg) 25%, var(--bg) 75%, var(--color2) 100%);
 }
 
 body {
diff --git a/views/index.html b/views/index.html
index f02dc4f..b1f2d21 100644
--- a/views/index.html
+++ b/views/index.html
@@ -14,16 +14,18 @@
         <span class="logo-text">Privacy</span>
         <span class="logo-hex icon">&#xec02;</span>
       </div>
-      <form action="/goto" method="get">
-        <label>
-          <input type="text" name="q" placeholder="Search query or URL">
-        </label>
-        <label class="input-clear">
-          <input type="reset">
-        </label>
-        <label class="input-submit">
-          <input type="submit">
-        </label>
+      <form action="/goto" method="get" class="flex-row">
+        <div class="search-box flex-row">
+          <div class="search">
+            <input type="text" name="q" placeholder="Search query or URL">
+          </div>
+          <div class="search-clear">
+            <input type="reset" id="clear" class="icon" value="&#xeb55;" aria-label="Clear">
+          </div>
+        </div>
+        <div class="search-submit">
+          <input type="submit" class="icon" value="&#xeb1c;" aria-label="Search">
+        </div>
       </form>
     </main>
   </body>