From 84c3b595c44247b2e0dcc537a5c4f2bb464f5a5c Mon Sep 17 00:00:00 2001 From: 0ko <0ko@noreply.codeberg.org> Date: Tue, 10 Jun 2025 22:59:24 +0200 Subject: [PATCH] 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 Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7958 Reviewed-by: Beowulf Reviewed-by: Gusted Co-authored-by: 0ko <0ko@noreply.codeberg.org> Co-committed-by: 0ko <0ko@noreply.codeberg.org> --- web_src/css/base.css | 11 +++++++++++ web_src/css/markup/content.css | 11 +---------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index bc9c8d3f39..cbb21951b4 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -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, diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css index 2d3617fac3..8a872f2623 100644 --- a/web_src/css/markup/content.css +++ b/web_src/css/markup/content.css @@ -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,