/* Styles for the Web Component. Scoped to `.na-*` classes to avoid clashing with host page CSS (mdBook docs, the marketing site). Sizing is `em`-based (never `rem`) so the component scales with the host page's body text. mdBook sets the root font-size to 62.5% (1rem = 10px), so `rem` units would render the editor/output far smaller than the surrounding prose; `em` inherits the 16px body size instead. The monospace editor and byte output are sized at 0.875em to match a documentation code block (mdBook's `code` is 0.875em), so the assembled bytes line up with an adjacent snippet. */ .na-host { display: block; margin: 1em 0; border: 1px solid rgba(127, 127, 127, 0.35); border-radius: 6px; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Don't inherit centered text from a host page (e.g. the marketing hero), which would center the editor/output source. */ text-align: left; } /* Syntax-highlight palette + editor foreground, defined on :root so BOTH the editor (.na-host) and the docs' static code blocks (.na-code) inherit it. `--na-tok-identifier` tracks `--na-fg`, so a theme only needs to set `--na-fg`. Light default; dark via prefers-color-scheme for surfaces with no explicit theme (the marketing site). mdBook pages carry a theme class (below) that wins over the media query, so a light page viewed under OS dark mode stays light. */ :root { --na-fg: #24292f; --na-tok-directive: #cf222e; --na-tok-instruction: #8250df; --na-tok-identifier: var(--na-fg); --na-tok-number: #0550ae; --na-tok-string: #0a7d33; --na-tok-comment: #6e7781; --na-tok-operator: #57606a; } @media (prefers-color-scheme: dark) { :root { --na-fg: #c9d1d9; --na-tok-directive: #ff7b72; --na-tok-instruction: #d2a8ff; --na-tok-number: #79c0ff; --na-tok-string: #7ee787; --na-tok-comment: #8b949e; --na-tok-operator: #8b949e; } } /* mdBook themes: pin the palette to the page's theme regardless of OS setting. */ html.light, html.rust { --na-fg: #24292f; --na-tok-directive: #cf222e; --na-tok-instruction: #8250df; --na-tok-number: #0550ae; --na-tok-string: #0a7d33; --na-tok-comment: #6e7781; --na-tok-operator: #57606a; } html.coal, html.navy, html.ayu, /* A surface with no theme class can force the dark palette by putting `na-force-dark` on an ancestor of the component (the marketing site does this on ); descendants inherit the nearer value regardless of stylesheet order. */ .na-force-dark { --na-fg: #c9d1d9; --na-tok-directive: #ff7b72; --na-tok-instruction: #d2a8ff; --na-tok-number: #79c0ff; --na-tok-string: #7ee787; --na-tok-comment: #8b949e; --na-tok-operator: #8b949e; } /* The editor's background/divider live on the wrapper; CodeMirror mounts inside it. The wrapper is user-resizable (vertical) and clips the editor, which scrolls internally — mirroring the old textarea's resize/scroll behavior. Its initial height is set inline from the source's line count. */ .na-editor-wrap { position: relative; background: rgba(127, 127, 127, 0.04); border-bottom: 1px solid rgba(127, 127, 127, 0.35); resize: vertical; overflow: hidden; min-height: 4em; } /* Make CodeMirror fill the resizable wrapper. Font, size, line-height, padding, tab-size, caret, and focus ring are set by the component's CodeMirror theme (makeTheme) so the editor keeps its previous look; only the token colors below come from CSS, shared with the static docs code blocks. */ .na-editor-wrap .cm-editor { height: 100%; } /* Plain source shown before the CodeMirror bundle loads, so the widget never flashes empty. Matches the editor's font/metrics/padding for a seamless swap. */ .na-editor-placeholder { box-sizing: border-box; margin: 0; padding: 0.75em; height: 100%; overflow: auto; font-family: "Source Code Pro", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; font-size: 0.875em; line-height: 1.45; tab-size: 4; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; text-align: left; color: var(--na-tok-identifier); } .na-tok-directive { color: var(--na-tok-directive); } .na-tok-instruction { color: var(--na-tok-instruction); } .na-tok-identifier { color: var(--na-tok-identifier); } .na-tok-number { color: var(--na-tok-number); } .na-tok-string { color: var(--na-tok-string); } .na-tok-comment { color: var(--na-tok-comment); font-style: italic; } .na-tok-operator { color: var(--na-tok-operator); } /* Static docs code blocks, emitted by `xtask dist` from ```nessemble fences. Shares the na-tok-* palette above with the interactive editor. */ .na-code { margin: 1em 0; padding: 0.75em; overflow-x: auto; border: 1px solid rgba(127, 127, 127, 0.35); border-radius: 6px; background: rgba(127, 127, 127, 0.04); font-family: "Source Code Pro", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; font-size: 0.875em; line-height: 1.45; tab-size: 4; white-space: pre; text-align: left; color: var(--na-tok-identifier); } .na-toolbar { display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center; padding: 0.5em 0.75em; background: rgba(127, 127, 127, 0.08); } .na-btn { appearance: none; cursor: pointer; padding: 0.3em 0.75em; border: 1px solid rgba(127, 127, 127, 0.45); border-radius: 4px; background: transparent; color: inherit; font-size: 0.85em; line-height: 1.2; text-decoration: none; } .na-btn:hover { background: rgba(127, 127, 127, 0.15); } /* Icon-only controls (Reset, Clear, Format, the byte toggle, Download): a square button whose glyph inherits the button text color. */ .na-btn.na-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0.3em; } .na-btn.na-icon svg { display: block; width: 1.15em; height: 1.15em; } .na-btn:disabled { opacity: 0.6; cursor: default; } .na-primary { border-color: #3572a5; background: #3572a5; color: #fff; } .na-primary:hover { background: #2c608c; } .na-download { margin-left: auto; } .na-output { margin: 0; padding: 0.75em; overflow-x: auto; font-family: "Source Code Pro", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; font-size: 0.875em; line-height: 1.45; white-space: pre; color: inherit; } .na-output.na-error { color: #b00020; background: rgba(176, 0, 32, 0.06); } @media (prefers-color-scheme: dark) { .na-output.na-error { color: #ff6b6b; background: rgba(255, 107, 107, 0.08); } }