diff --git a/css/style.css b/css/style.css index 20ccbcb..0fec68f 100644 --- a/css/style.css +++ b/css/style.css @@ -527,6 +527,46 @@ button.deactivate-beeline-active.disabled { margin: -6px 0 6px 20px; } +/* help dialog */ + +ul.keyboard-shortcuts { + margin: 0; + padding: 0; + border: 1px solid #ccc; + border-radius: 6px; +} + +ul.keyboard-shortcuts li { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 0.4rem 1em; + font-size: 0.85rem; + border-top: 1px solid #ccc; +} + +ul.keyboard-shortcuts li:first-of-type { + border-top: transparent; +} + +.keyboard-shortcuts-key { + margin-left: 8px; + white-space: nowrap; +} + +kbd { + display: inline-block; + padding: 3px 5px; + border: solid 1px rgba(175, 184, 193, 0.2); + border-radius: 6px; + line-height: 10px; + vertical-align: middle; + font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; + color: #1f1f1f; + background-color: rgba(0, 123, 255, 0.07); + box-shadow: inset 0 -1px 0 rgba(175, 184, 193, 0.2); +} + /* Share Dialog */ #share-qrcode-img img { diff --git a/index.html b/index.html index 87a23cd..50dfe4f 100644 --- a/index.html +++ b/index.html @@ -392,6 +392,15 @@
+ + +