diff --git a/src/flowchart-generator.html b/src/flowchart-generator.html index 7684cba..30d226f 100644 --- a/src/flowchart-generator.html +++ b/src/flowchart-generator.html @@ -256,6 +256,50 @@ opacity: 1; } } + /* v4.13.0 — keyboard shortcuts modal + kbd tags. The modal + reuses the existing .fc-modal animation; the table lays + out Action / Shortcut columns, with tags for the + key combos styled to look like physical keys. */ + .fc-shortcuts-modal { + max-width: 460px; + width: 90vw; + } + .fc-shortcuts-table { + width: 100%; + border-collapse: collapse; + margin: 12px 0 16px; + font-size: 0.9rem; + } + .fc-shortcuts-table th { + text-align: left; + font-weight: 600; + padding: 4px 0; + border-bottom: 1px solid var(--fc-border, #d1d5db); + color: #4b5563; + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.05em; + } + .fc-shortcuts-table td { + padding: 6px 8px; + border-bottom: 1px solid #f3f4f6; + } + .fc-shortcuts-table td:last-child { + text-align: right; + white-space: nowrap; + } + kbd { + display: inline-block; + padding: 1px 6px; + font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; + font-size: 0.78rem; + background: #f3f4f6; + border: 1px solid #d1d5db; + border-bottom-width: 2px; + border-radius: 3px; + color: #1f2937; + margin: 0 1px; + } /* v4.10.0 — preview-render info card explaining the layout */ .fc-preview-render-note { font-size: 0.75rem; @@ -394,6 +438,80 @@
+ + +