Beautify the style of <kbd> (resolve #471)

cotes2020 · Jan 2, 2022 · cad62fe · cad62fe
1 parent b85cb39
commit cad62fe
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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);
-Original file line number
+Diff line change
@@ Expand Up / @@ -84,5 +84,4 @@ @@
       }
       pre { color: #bfbfbf; } /* override Bootstrap */
-      kbd { background-color: black; }
     }