feat(ui): global styling for kbd tag (#7958)

- Before #6813, there were no `kbd`s in the UI, but now we have a few. Currently they do not have any special styling other than font family+size. But markup did have pretty good styling.
- This PR makes that styling used globally.
- The only concerning property is `background-color`, which uses a variable with `-markup-` in it, but I do not find this as a significant scope violation. We have many CSS variables but seemingly not enough generic ones.

Co-authored-by: floss4good <floss4good@disroot.org>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7958
Reviewed-by: Beowulf <beowulf@beocode.eu>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
This commit is contained in:
0ko 2025-06-10 22:59:24 +02:00 committed by Gusted
parent 5391f43888
commit 84c3b595c4
2 changed files with 12 additions and 10 deletions

View file

@ -97,6 +97,17 @@ samp,
font-size: 0.95em; /* compensate for monospace fonts being usually slightly larger */
}
kbd {
padding: 0.15em 0.35em;
line-height: 10px;
color: var(--color-text-light);
vertical-align: middle;
background-color: var(--color-markup-code-inline);
border: 1px solid var(--color-secondary);
border-radius: var(--border-radius);
box-shadow: inset 0 -1px 0 var(--color-secondary);
}
b,
strong,
h1,

View file

@ -500,16 +500,7 @@
}
.markup kbd {
display: inline-block;
padding: 3px 5px;
font-size: 11px;
line-height: 10px;
color: var(--color-text-light);
vertical-align: middle;
background-color: var(--color-markup-code-inline);
border: 1px solid var(--color-secondary);
border-radius: var(--border-radius);
box-shadow: inset 0 -1px 0 var(--color-secondary);
padding: 0 0.35em;
}
.markup .ui.list .list,