[mod] simple: apply nojs via stylesheet

client/simple/src/js/main/search.ts

@@ -14,10 +14,6 @@ const categoryButtons: HTMLButtonElement[] = Array.from(
   document.querySelectorAll<HTMLButtonElement>("#categories_container button.category")
 );
 
-if (searchInput.value.length === 0) {
-  searchReset.classList.add("empty");
-}
-
 // focus search input on large screens
 if (!(isMobile || isResultsPage)) {
   searchInput.focus();
@@ -35,15 +31,10 @@ if (isMobile) {
   });
 }
 
-listen("input", searchInput, () => {
-  searchReset.classList.toggle("empty", searchInput.value.length === 0);
-});
-
 listen("click", searchReset, (event: MouseEvent) => {
   event.preventDefault();
   searchInput.value = "";
   searchInput.focus();
-  searchReset.classList.add("empty");
 });
 
 for (const button of categoryButtons) {

client/simple/src/less/noscript.less

@@ -0,0 +1,9 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+.hide_if_nojs {
+  display: none !important;
+}
+
+.show_if_nojs {
+  display: inline !important;
+}

client/simple/src/less/search.less

@@ -164,15 +164,15 @@ button.category_button {
   &:hover {
     color: var(--color-search-background-hover);
   }
-
-  &.empty * {
-    display: none;
-  }
 }
 
-html.no-js #clear_search.hide_if_nojs {
+#q:placeholder-shown ~ #clear_search {
+  pointer-events: none;
+
+  * {
     display: none;
   }
+}
 
 #q,
 #send_search {
@@ -204,12 +204,6 @@ html.no-js #clear_search.hide_if_nojs {
   }
 }
 
-.no-js #clear_search,
-.no-js #send_search {
-  width: auto !important;
-  .ltr-border-left(1px solid var(--color-search-border));
-}
-
 .search_filters {
   margin-top: 0.6rem;
   .ltr-margin-right(0);

client/simple/src/less/toolkit.less

@@ -4,11 +4,7 @@
 
 // stylelint-disable no-descending-specificity
 
-html.no-js .hide_if_nojs {
-  display: none;
-}
-
-html.js .show_if_nojs {
+.show_if_nojs {
   display: none;
 }
 

client/simple/vite.config.ts

@@ -52,7 +52,8 @@ export default {
         // stylesheets
         ltr: `${PATH.src}/less/style-ltr.less`,
         rtl: `${PATH.src}/less/style-rtl.less`,
-        rss: `${PATH.src}/less/rss.less`
+        rss: `${PATH.src}/less/rss.less`,
+        noscript: `${PATH.src}/less/noscript.less`
       },
 
       // file naming conventions / pathnames are relative to outDir (PATH.dist)

searx/templates/simple/base.html

@@ -17,6 +17,9 @@
   {% else %}
   <link rel="stylesheet" href="{{ url_for('static', filename='sxng-ltr.min.css') }}" type="text/css" media="screen">
   {% endif %}
+  <noscript>
+    <link rel="stylesheet" href="{{ url_for('static', filename='sxng-noscript.min.css') }}" type="text/css">
+  </noscript>
   {% if get_setting('server.limiter') or get_setting('server.public_instance') %}
   <link rel="stylesheet" href="{{ url_for('client_token', token=link_token) }}" type="text/css">
   {% endif %}

searx/templates/simple/search.html

@@ -7,7 +7,7 @@
     <div id="search_view">
       <div class="search_box">
         <input id="q" name="q" type="text" placeholder="{{ _('Search for...') }}" tabindex="1" autocomplete="off" autocapitalize="none" spellcheck="false" autocorrect="off" dir="auto" value="{{ q or '' }}">
-        <button id="clear_search" type="reset" aria-label="{{ _('clear') }}" class="hide_if_nojs"><span>{{ icon_big('close') }}</span><span class="show_if_nojs">{{ _('clear') }}</span></button>
+        <button id="clear_search" type="reset" aria-label="{{ _('clear') }}" class="hide_if_nojs"><span>{{ icon_big('close') }}</span></button>
         <button id="send_search" type="submit" {%- if search_on_category_select -%}name="category_{{ selected_categories[0]|replace(' ', '_') }}"{%- endif -%} aria-label="{{ _('search') }}"><span class="hide_if_nojs">{{ icon_big('search') }}</span><span class="show_if_nojs">{{ _('search') }}</span></button>
         <div class="autocomplete hide_if_nojs"><ul></ul></div>
       </div>

searx/templates/simple/simple_search.html

@@ -3,7 +3,7 @@
     <div id="search_view">
       <div class="search_box">
         <input id="q" name="q" type="text" placeholder="{{ _('Search for...') }}" autocomplete="off" autocapitalize="none" spellcheck="false" autocorrect="off" dir="auto" value="{{ q or '' }}">
-        <button id="clear_search" type="reset" aria-label="{{ _('clear') }}"><span class="hide_if_nojs">{{ icon_big('close') }}</span><span class="show_if_nojs">{{ _('clear') }}</span></button>
+        <button id="clear_search" type="reset" aria-label="{{ _('clear') }}" class="hide_if_nojs"><span>{{ icon_big('close') }}</span></button>
         <button id="send_search" type="submit" aria-label="{{ _('search') }}"><span class="hide_if_nojs">{{ icon_big('search') }}</span><span class="show_if_nojs">{{ _('search') }}</span></button>
         <div class="autocomplete hide_if_nojs"><ul></ul></div>
       </div>