diff options
| -rw-r--r-- | components/keybindselector.tsx | 1 | ||||
| -rw-r--r-- | styles/keybindselector.css | 13 |
2 files changed, 13 insertions, 1 deletions
diff --git a/components/keybindselector.tsx b/components/keybindselector.tsx index 1d11b6b..b7deed8 100644 --- a/components/keybindselector.tsx +++ b/components/keybindselector.tsx @@ -38,6 +38,7 @@ export default function KeybindSelector(props: { }} /> )} + {props.value.length == 0 && <span className='placeholder'>Unbound</span>} </div>; } diff --git a/styles/keybindselector.css b/styles/keybindselector.css index cc57501..34c174f 100644 --- a/styles/keybindselector.css +++ b/styles/keybindselector.css @@ -1,10 +1,14 @@ -.keybind-selector-inner { padding: 27px 12px 10px; } +.keybind-selector-inner { + padding: 27px 12px 6px; + min-height: 25px; +} .keybind-selector > * { cursor: pointer !important; } .keybind-selector-inner .keybind { padding: 2px 4px 1px; margin-right: 3px; + margin-bottom: 3px; border-radius: 4px; user-select: none; cursor: pointer; @@ -17,6 +21,13 @@ color: var(--c100); } +.keybind-selector-inner .placeholder { + font-style: italic; + color: var(--c700); + margin-top: 2px; + display: inline-block; +} + .keybind-selector-inner .keybind:hover { opacity: .7; } |