themes/default/layouts/partials/navigator-middle: Use query selector

Search entry -> search box

2 files changed, 24 insertions, 24 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index faa56f9..c87faa2 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -143,7 +143,7 @@ html,
 
 sup:target [role="doc-noteref"][href^="#fn\:"],
 li:target [role="doc-backlink"][href^="#fnref\:"],
-:focus:not(html):not(body):not(svg):not(pre):not(#search-input) {
+:focus:not(html):not(body):not(svg):not(pre):not(#search) {
   outline: 0.15rem solid;
   outline-offset: 0.05rem;
   text-decoration: none;
@@ -1869,23 +1869,23 @@ author-list p {
   display: none;
 }
 
-search-entry {
+search-box {
   display: inherit;
   width: 100%;
   z-index: 1;
 }
 
-search-entry[data-focus],
-search-entry:focus-within {
+search-box[data-focus],
+search-box:focus-within {
   position: absolute;
 }
 
-search-entry:focus-within form {
+search-box:focus-within form {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-search-entry form {
+search-box form {
   background-color: #fefefe;
   background-color: var(--background);
   border-radius: 0.5rem;
@@ -1898,7 +1898,7 @@ search-entry form {
   margin: 0 0.5rem;
 }
 
-search-entry form button {
+search-box form button[type="submit"] {
   background-color: transparent;
   border: none;
   box-shadow: none;
@@ -1914,7 +1914,7 @@ search-entry form button {
   line-height: 1;
 }
 
-search-entry form input {
+search-box form input {
   -webkit-appearance: none;
   border-bottom-left-radius: 0.5rem;
   border-top-left-radius: 0.5rem;
@@ -1927,19 +1927,19 @@ search-entry form input {
   color: inherit;
 }
 
-search-entry form input,
-search-entry form input:focus {
+search-box form input,
+search-box form input:focus {
   outline: none;
   background-color: #fefefe;
   background-color: var(--text-background);
 }
 
-search-entry form button svg {
+search-box form button svg {
   stroke-width: 0.1rem;
   width: 100%;
 }
 
-search-entry ul {
+search-box ul {
   position: absolute;
   background-color: inherit;
   padding-top: 2.9rem;
@@ -1954,11 +1954,11 @@ search-entry ul {
   box-shadow: 0 4px 6px var(--shadow);
 }
 
-search-entry ul li a span {
+search-box ul li a span {
   font-weight: 400;
 }
 
-search-entry ul li a {
+search-box ul li a {
   font-weight: 700;
   color: inherit;
   text-decoration: none;
@@ -1966,18 +1966,18 @@ search-entry ul li a {
   padding: 0.25rem 0.75rem;
 }
 
-search-entry ul li:first-child a {
+search-box ul li:first-child a {
   background-color: #ebf3ff;
   background-color: var(--hover-background-alternate);
 }
 
-search-entry ul li:only-child a,
-search-entry ul li:last-child a:hover {
+search-box ul li:only-child a,
+search-box ul li:last-child a:hover {
   border-bottom-right-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
 }
 
-search-entry ul li a:hover {
+search-box ul li a:hover {
   background-color: #eee;
   background-color: var(--hover-background);
 }
@@ -2448,7 +2448,7 @@ nav[hidden] {
 }
 
 @media screen and (max-width: 1080px) {
-  search-entry,
+  search-box,
   column-base[position="left"],
   column-base[position="middle"] > nav:first-child section {
     display: none;
diff --git a/assets/js/index.js b/assets/js/index.js
index e8e307a..e0e0436 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -395,11 +395,11 @@
         "URLChangedCustomEvent"
     ].forEach(function(event) {
         self.addEventListener(event, function() {
-            const form = document.getElementById("search-form");
-            const query = document.getElementById("search-input");
-            const submit = document.getElementById("search-submit");
-            const dropdown = document.getElementById("search-results");
-            const container = document.getElementById("search-frame");
+            const container = document.querySelector("search-box");
+            const dropdown = document.querySelector("search-box ul");
+            const form = document.querySelector("search-box form");
+            const query = document.querySelector("search-box input");
+            const submit = document.querySelector("search-box button");
             function first(element) {
                 if (element.firstChild.nextElementSibling) {
                     return element.firstChild.nextElementSibling.firstChild.nextElementSibling;