From 6a03ed217cd819d2e85dbfd0f2239eb207bb7c67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 20 Apr 2021 11:43:37 +0200
Subject: [PATCH] docs: improve search styling

---
 docs/src/layouts/App/base.scss  | 11 ++++++-----
 docs/src/layouts/App/index.vue  |  3 ++-
 docs/src/layouts/App/style.scss | 20 ++++++++++++++++++++
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss
index 0b43f9af..d772ac78 100644
--- a/docs/src/layouts/App/base.scss
+++ b/docs/src/layouts/App/base.scss
@@ -1,3 +1,9 @@
+:root {
+  --docsearch-primary-color: #{$colorBlack};
+  --docsearch-logo-color: #{rgba($colorBlack, 0.3)};
+  --docsearch-container-background: #{rgba($colorBlack, 0.7)};
+}
+
 *,
 *::before,
 *::after {
@@ -91,11 +97,6 @@ code {
   color: white;
 }
 
-.DocSearch,
-.DocSearch-Container {
-  filter: saturate(0);
-}
-
 .DocSearch-Container {
   position: fixed !important;
   height: 100vh !important;
diff --git a/docs/src/layouts/App/index.vue b/docs/src/layouts/App/index.vue
index c996e19a..8630748a 100644
--- a/docs/src/layouts/App/index.vue
+++ b/docs/src/layouts/App/index.vue
@@ -17,7 +17,8 @@
         <div class="app__menu">
           <span class="app__menu-item">
             <icon name="search-line" />
-            Search
+            <span>Search</span>
+            <span class="app__search-shortcut" />
             <div class="app__search-docsearch" />
           </span>
 
diff --git a/docs/src/layouts/App/style.scss b/docs/src/layouts/App/style.scss
index 12798bf0..8758ef1b 100644
--- a/docs/src/layouts/App/style.scss
+++ b/docs/src/layouts/App/style.scss
@@ -122,6 +122,26 @@ $menuBreakPoint: 800px;
     position: relative;
   }
 
+  &__search-shortcut {
+    display: inline-flex;
+
+    @media (min-width: $menuBreakPoint) {
+      &::after {
+        content: "⌘K";
+        display: inline-flex;
+        align-items: center;
+        font-weight: 700;
+        text-transform: uppercase;
+        color: $colorGrey;
+        background-color: rgba($colorBlack, 0.05);
+        font-size: 0.75rem;
+        padding: 0 0.4rem;
+        border-radius: 0.4rem;
+        margin-left: 0.4rem;
+      }
+    }
+  }
+
   &__search-docsearch {
     ::v-deep > button {
       position: absolute;