From cad62feb91ec5ad761b6e3ea37acbd928bdc7e6e Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 2 Jan 2022 16:28:42 +0800
Subject: [PATCH] Beautify the style of `<kbd>` (resolve #471)

---
 _sass/addon/commons.scss           | 12 ++++++++++++
 _sass/colors/dark-syntax.scss      |  1 -
 _sass/colors/dark-typography.scss  |  3 +++
 _sass/colors/light-typography.scss |  3 +++
 4 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index d5429884050..32da46210be 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -107,7 +107,19 @@ blockquote {
 }
 
 kbd {
+  font-family: inherit;
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1.3rem;
+  min-width: 1.75rem;
+  text-align: center;
   margin: 0 0.3rem;
+  padding-top: 0.1rem;
+  color: var(--kbd-text-color);
+  background-color: var(--kbd-bg-color);
+  border-radius: 0.25rem;
+  border: solid 1px var(--kbd-wrap-color);
+  box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
 }
 
 footer {
diff --git a/_sass/colors/dark-syntax.scss b/_sass/colors/dark-syntax.scss
index 03228e14868..fb7c52ab797 100644
--- a/_sass/colors/dark-syntax.scss
+++ b/_sass/colors/dark-syntax.scss
@@ -84,5 +84,4 @@
   }
 
   pre { color: #bfbfbf; } /* override Bootstrap */
-  kbd { background-color: black; }
 }
diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss
index 586ebd2a8f5..2c1b7c25a10 100644
--- a/_sass/colors/dark-typography.scss
+++ b/_sass/colors/dark-typography.scss
@@ -66,6 +66,9 @@
   --card-border-color: rgb(53, 53, 60);
   --card-box-shadow: var(--main-wrapper-bg);
   --preview-img-bg: radial-gradient(circle, rgb(22 22 24) 0%, rgb(32 32 32) 100%);
+  --kbd-wrap-color: #6a6a6a;
+  --kbd-text-color: #d3d3d3;
+  --kbd-bg-color: #242424;
 
   /* tags */
   --tag-border: rgb(59, 79, 88);
diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss
index cf19cee6017..3cf42317bfd 100644
--- a/_sass/colors/light-typography.scss
+++ b/_sass/colors/light-typography.scss
@@ -65,6 +65,9 @@
   --tb-border-color: #eaeaea;
   --dash-color: silver;
   --preview-img-bg: radial-gradient(circle, rgb(255 255 255) 0%, rgb(249 249 249) 100%);
+  --kbd-wrap-color: #bdbdbd;
+  --kbd-text-color: var(--text-color);
+  --kbd-bg-color: white;
 
   /* Categories */
   --categories-hover-bg: var(--btn-border-color);