PlexSheep
/
krata
1
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Cotes Chung 2022-01-02 16:28:42 +08:00
parent b85cb39388
commit cad62feb91
4 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
_sass/addon/commons.scss
View File

@ -107,7 +107,19 @@ blockquote {
} }
kbd { 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; 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 { footer {

1
_sass/colors/dark-syntax.scss
View File

@ -84,5 +84,4 @@
} }
pre { color: #bfbfbf; } /* override Bootstrap */ pre { color: #bfbfbf; } /* override Bootstrap */
kbd { background-color: black; }
} }

3
_sass/colors/dark-typography.scss
View File

@ -66,6 +66,9 @@
--card-border-color: rgb(53, 53, 60); --card-border-color: rgb(53, 53, 60);
--card-box-shadow: var(--main-wrapper-bg); --card-box-shadow: var(--main-wrapper-bg);
--preview-img-bg: radial-gradient(circle, rgb(22 22 24) 0%, rgb(32 32 32) 100%); --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 */ /* tags */
--tag-border: rgb(59, 79, 88); --tag-border: rgb(59, 79, 88);

3
_sass/colors/light-typography.scss
View File

@ -65,6 +65,9 @@
--tb-border-color: #eaeaea; --tb-border-color: #eaeaea;
--dash-color: silver; --dash-color: silver;
--preview-img-bg: radial-gradient(circle, rgb(255 255 255) 0%, rgb(249 249 249) 100%); --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 */
--categories-hover-bg: var(--btn-border-color); --categories-hover-bg: var(--btn-border-color);