Unstyle search bar and make main docs button more clearly a back butt…

…on (#268)
denoland · Jan 12, 2024 · 6773ee8 · 6773ee8
1 parent 02fdf9d
commit 6773ee8
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -7,7 +7,7 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
+html:root {
   /* These variables mainly pulled from dotcom */
   --white: #ffffff;
   --black: #0b0d11;
@@ -71,6 +71,7 @@
   --ifm-tabs-padding-vertical: 0.5rem;
   --ifm-list-item-margin: 0.5em;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --docsearch-muted-color: var(--gray-1);
   --ifm-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system,
     "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
     sans-serif;
@@ -109,6 +110,14 @@ html[data-theme="dark"][data-theme="dark"] {
   --ifm-menu-color-background-active: var(--runtime-dark);
   --ifm-code-background: #282a36;
   --ifm-menu-color: var(--gray-0);
+  --docsearch-footer-background: var(--runtime-dark);
+  --docsearch-muted-color: var(--gray-0);
+}
+
+html[data-theme="dark"] kbd.DocSearch-Button-Key,
+html[data-theme="dark"] kbd.DocSearch-Commands-Key {
+  box-shadow: none;
+  color: var(--gray-0);
 }
 
 html,
@@ -165,6 +174,11 @@ h4 {
   letter-spacing: -0.025em;
 }
 
+button,
+kbd {
+  font: inherit;
+}
+
 code {
   letter-spacing: 0;
   vertical-align: baseline;
@@ -460,3 +474,19 @@ nav.menu.thin-scrollbar.menu_node_modules-\@docusaurus-theme-classic-lib-theme-D
   font-size: 0.75rem;
   margin-top: 2rem;
 }
+
+.DocSearch-Button .DocSearch-Search-Icon {
+  width: 1rem;
+}
+
+kbd.DocSearch-Button-Key,
+kbd.DocSearch-Commands-Key {
+  box-shadow: none;
+  padding: 0;
+  border: 1px solid;
+  top: 0;
+  font-size: 0.8rem;
+  line-height: 1;
+  margin-right: 0.375em;
+  background: transparent;
+}
diff --git a/src/theme/Navbar/MobileSidebar/SecondaryMenu/index.js b/src/theme/Navbar/MobileSidebar/SecondaryMenu/index.js
@@ -9,8 +9,9 @@ function SecondaryMenuBackButton(props) {
     <button
       type="button"
       {...props}
-      className="secondary-menu__product__button"
+      className="secondary-menu__product__button [font:inherit]"
     >
+			<span aria-hidden="true" className="inline-block transform rotate-180 [font-family:inherit]">&ensp;-&gt; </span>
       All docs
     </button>
   );