davrot/forgejo_backup
1
0
Fork 0
mirror of https://codeberg.org/davrot/forgejo.git synced 2025-06-26 08:00:02 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
- 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
Download patch file Download diff file Expand all files Collapse all files

11
web_src/css/base.css
View file

@ -97,6 +97,17 @@ samp,
font-size: 0.95em; /* compensate for monospace fonts being usually slightly larger */ 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, b,
strong, strong,
h1, h1,

11
web_src/css/markup/content.css
View file

@ -500,16 +500,7 @@
} }
.markup kbd { .markup kbd {
display: inline-block; padding: 0 0.35em;
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);
} }
.markup .ui.list .list, .markup .ui.list .list,