paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

help-beta: Add styling for kbd elements.

Browse Source 
Fixes #35404.
The styling is just copy-pasted from existing styling.
For ⌘ and ⌥, we removed vertical align as middle, since it was not
aligning with the new css and it looked fine without it. The font-size
was also looking too big, which has been reduced but not all the way to
0.85em. At 0.85em, the symbol is not legible.
This commit is contained in:
Shubham Padia
2025-07-23 12:50:40 +00:00
committed by Tim Abbott
parent 42b5a9b8c1
commit 7311d7e11b
2 changed files with 26 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
help-beta/src/scripts/client/adjust_mac_kbd_tags.ts
View File

@@ -61,10 +61,9 @@ function adjust_mac_kbd_tags(): void {
// problems, we don't have that problem in the new help center and
// thus don't do that transformation here. We do need to make these
// symbols appear larger than they do by default since they are too
// small to see in the default font-size.
// small to see in the default font-size of 0.85em for kbd elements.
if (key_text === "⌘" || key_text === "⌥") {
element.style.fontSize = "1.5em";
element.style.verticalAlign = "middle";
element.style.fontSize = "1em";
}
}
}

24
help-beta/src/styles/main.css
View File

@@ -105,4 +105,28 @@
box-shadow: -2px 0 0 6px var(--sl-color-accent-low);
background-color: var(--sl-color-accent-low);
}
& kbd {
/* Same as kbd in app_components.css */
display: inline-block;
border: 1px solid hsl(0deg 0% 80%);
border-radius: 4px;
font-weight: 600;
white-space: nowrap;
background-color: hsl(0deg 0% 98%);
color: hsl(0deg 0% 20%);
text-shadow: 0 1px 0 hsl(0deg 0% 100%);
/* Different from app_components.css */
/* Removed margin setting */
font-size: 0.85em;
padding: 0 0.4em;
&.arrow-key {
/* Same as in informational_overlays.css */
line-height: 1;
padding: 0 0.2em 0.2em;
/* Different from informational_overlays.css */
font-size: 1.2em;
}
}
}