Files
excalidraw/packages/excalidraw/components/HintViewer.scss
T
Omar Brikaa 8013eb5e16 feat: More prominent keyboard shortcuts in hints (#10057)
* Initial

* Memoize

* Styling

* Use double angle brackets for keyboard shortcuts

* Use rem in gap

* Use an existing function for substituting tags in a string

* Revert styling

* Avoid unique key warnings

* Styling

* getTransChildren -> nodesFromTextWithTags

* Use height and padding instead of padding only

* Initial new idea

* WIP shortcut substitutions

* Use simple regex for parsing shortcuts

* Use single shortcut for combos

* Use kbd instead of span

* shortcutFromKeyString -> getTaggedShortcutKey

* Bug fix

* FlowChart -> Flowchart

* memo is useless here

* Trigger CI

* Translate in getShortcutKey

* More normalized shortcuts

* improve shortcut normalization and replacement & support multi-key tagged shortcuts

* fix regex

* tweak css

---------

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
2025-10-20 16:09:20 +02:00

52 lines
971 B
SCSS

@import "../css/variables.module.scss";
// this is loosely based on the longest hint text
$wide-viewport-width: 1000px;
.excalidraw {
.HintViewer {
pointer-events: none;
box-sizing: border-box;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
left: 0;
top: 100%;
max-width: 100%;
width: 100%;
margin-top: 0.5rem;
text-align: center;
color: var(--color-gray-40);
font-size: 0.75rem;
@include isMobile {
position: static;
padding-right: 2rem;
}
> span {
padding: 0.25rem;
}
kbd {
display: inline-block;
margin: 0 1px;
font-family: monospace;
border: 1px solid var(--color-gray-40);
border-radius: 4px;
padding: 1px 3px;
font-size: 10px;
}
}
&.theme--dark {
.HintViewer {
color: var(--color-gray-60);
kbd {
border-color: var(--color-gray-60);
}
}
}
}