From 2a40af98fbe05008193184b50242650d3a685d83 Mon Sep 17 00:00:00 2001
From: berrymot <merrybot47@gmail.com>
Date: Tue, 16 Jan 2024 20:26:26 -0800
Subject: [PATCH] remove fakebox

---
 events.js  | 19 -------------------
 index.html |  7 +------
 style.css  | 50 ++++++--------------------------------------------
 3 files changed, 7 insertions(+), 69 deletions(-)

diff --git a/events.js b/events.js
index 0a92415..7f5fa36 100644
--- a/events.js
+++ b/events.js
@@ -55,11 +55,6 @@ var timer;
 id("search").addEventListener("input", function() {
     clearTimeout(timer);
     q = id("search").value;
-    if (q.length) {
-        addClassById("clear-wrap", "show");
-    } else {
-        removeClassById("clear-wrap", "show");
-    }
     if (!config["regex"]) q = q.trim();
     results = null;
     clearResults();
@@ -162,10 +157,6 @@ function toggleClassById(_id, className) {
 function dispatchSearchInputEvent() {
     id("search").dispatchEvent(new Event("input", {"bubbles": true}));
 }
-function wrapSearchbar(before, after) {
-    id("before").innerHTML = before;
-    id("after").innerHTML = after;
-}
 function searchMode() {
     clearTimeout(timer);
     removeClasses();
@@ -174,7 +165,6 @@ function searchMode() {
     addClassById("sm", "checked");
     config["rhyme"] = false;
     config["regex"] = false;
-    wrapSearchbar("<wbr />", "<wbr />");
     dispatchSearchInputEvent();
 }
 function regexMode(togglei, toggletight) {
@@ -194,10 +184,6 @@ function regexMode(togglei, toggletight) {
         toggleClassById("regex-tight", "checked");
         config["regex.tight"] = !config["regex.tight"];
     }
-    wrapSearchbar(
-        "/" + (config["regex.tight"] ? "^" : ""),
-        (config["regex.tight"] ? "$" : "") + "/" + (config["regex.insensitive"] ? "i" : "")
-    );
     dispatchSearchInputEvent();
 }
 function rhymeMode(toggle) {
@@ -209,17 +195,12 @@ function rhymeMode(toggle) {
     addClassById("rm", "checked");
     config["rhyme"] = true;
     config["regex"] = false;
-    wrapSearchbar("<wbr />", "<wbr />");
     if (toggle) {
         toggleClassById("rhyme-y", "checked");
         config["rhyme.ignorey"] = !config["rhyme.ignorey"];
     }
     dispatchSearchInputEvent();
 }
-id("clear").addEventListener("click", function() {
-    id("search").value = "";
-    dispatchSearchInputEvent();
-});
 // theme (mi lebna ti la lalxu)
 function setTheme(dark) {
     document.documentElement.className = dark ? "dark" : "";
diff --git a/index.html b/index.html
index ba6d673..2f5433d 100644
--- a/index.html
+++ b/index.html
@@ -58,12 +58,7 @@ <h1>la xlasisku</h1>
                 </span>
             </span>
         </p>
-        <div id="fakebox">
-            <label id="before" for="search"><wbr /></label>
-            <input type="text" id="search" name="search" autocomplete="off" spellcheck="false" placeholder="loading" disabled size="1" />
-            <label id="after" for="search"><wbr /></label>
-            <span id="clear-wrap">&nbsp;<button id="clear">×</button></span>
-        </div>
+        <input type="text" id="search" name="search" autocomplete="off" spellcheck="false" placeholder="loading" disabled size="1" />
         <div id="info"></div>
         <div id="length"></div>
         <div id="results"></div>
diff --git a/style.css b/style.css
index 62f3727..a87f003 100644
--- a/style.css
+++ b/style.css
@@ -90,64 +90,26 @@ body {
     word-break: break-word;
 }
 /* searchbar */
-#fakebox {
-    display: flex;
+#search {
     border-radius: 16px;
     background: rgb(var(--inv));
     border: 2px solid rgb(var(--fg));
-    box-shadow: rgb(var(--fg)) 0 3px;
+    box-shadow: 0 3px rgb(var(--fg));
     padding: 4px 12px;
-    align-items: baseline;
+    width: 100%;
     height: 1lh;
-    font-size: 1.5em;
-    box-sizing: content-box;
-}
-#search {
+    font-size: 1.5rem;
     display: block;
-    padding: 0;
     margin: 0;
-    flex: 1;
-    border-radius: 0;
     font-family: var(--sans);
-    font-size: inherit;
-    background: transparent;
-    border: none;
-    color: rgb(var(--fg)) !important;
-    height: 1lh;
+    color: rgb(var(--fg));
     box-sizing: content-box;
     caret-color: rgb(var(--fg));
 }
-#fakebox:has(> #search:disabled) {
-    opacity: 1;
-    color: rgba(var(--fg), var(--op-8));
-    border-color: rgba(var(--fg), var(--op-8));
-    background-color: rgba(var(--inv), var(--op-8));
-    box-shadow: rgba(var(--fg), var(--op-8)) 0 3px;
-}
-#search:disabled {
-    opacity: 1;
-}
 #search::placeholder {
     color: rgba(var(--fg), var(--op-c));
     opacity: 1;
 }
-#search:disabled::placeholder {
-    color: rgba(var(--fg), var(--op-8));
-    opacity: 1;
-}
-#fakebox * {
-    color: rgba(var(--fg), var(--op-c));
-    padding: 0;
-}
-#clear-wrap {
-    display: none;
-}
-#clear-wrap.show {
-    display: inline;
-}
-#clear {
-    color: rgb(var(--err)) !important;
-}
 /* lujvo things / regex errors */
 #info {
     font-size: 1.25em;
@@ -263,7 +225,7 @@ math {
 hr {
     border: 1px solid rgb(var(--fg));
 }
-:not(hr, br, #fakebox *):empty {
+:not(hr, br, input):empty {
     display: none;
 }
 h1, h1 + p {