/** * CodeBlock Web Component - Theme Stylesheet * * Theme Switching: * Use data-theme attribute: * Default theme is "prettylights" (GitHub-style) * * ============================================ * CSS Custom Properties Reference * ============================================ * * COLORS (Syntax Highlighting): * --cb-bg Background color * --cb-fg Default text color * --cb-comment Comments, prolog, doctype, cdata * --cb-constant Constants, attr-name, char, builtin, operator * --cb-constant-link URL color * --cb-entity Entity, selector, class-name, function * --cb-entity-tag Property, tag, boolean, symbol * --cb-keyword Keywords, rules * --cb-string Strings, attr-value * --cb-string-regexp Regular expressions * --cb-variable Variables * --cb-deleted-bg Deleted text background * --cb-deleted-text Deleted text color * --cb-inserted-bg Inserted text background * --cb-inserted-text Inserted text color * --cb-heading Headings, important * * UI ELEMENTS: * --cb-gutter-border Line numbers gutter border * --cb-line-number Line number text color * --cb-fold-toggle Fold toggle icon color * --cb-fold-toggle-hover Fold toggle hover color * --cb-copy-bg Copy button background * --cb-copy-bg-hover Copy button hover background * --cb-copy-color Copy button icon color * --cb-copy-color-hover Copy button icon hover color * --cb-copy-color-success Copy button success color (checkmark) * --cb-caret Cursor color in editable mode * --cb-focus-ring Focus outline color for editable mode * * INTERNAL (set automatically): * --line-number-digits Number of digits in line numbers (for width calc) */ /* Hide until custom element is defined and ready */ code-block:not(:defined), code-block:not([ready]) { visibility: hidden; } code-block { display: block; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; overflow: auto; tab-size: 2; hyphens: none; font-size: 14px; padding: 1rem; border-radius: 6px; } /* ============================================ Line Numbers ============================================ */ code-block[line-numbers] { display: grid; grid-template-columns: calc(var(--line-number-digits, 2) * 1ch + 1.5rem) 1fr; gap: 0; padding: 1rem 1rem 1rem 0; } code-block[line-numbers] .line-numbers-gutter { display: flex; flex-direction: column; text-align: right; padding-right: 1rem; border-right: 1px solid var(--cb-gutter-border, light-dark(#d1d5da, #3d444d)); margin-right: 1rem; user-select: none; color: var(--cb-line-number, light-dark(#6e7781, #6e7681)); } code-block[line-numbers] .line-numbers-gutter span { line-height: inherit; } code-block[line-numbers] .code-content { overflow-x: auto; } /* ============================================ Fold Gutter (when foldable + line-numbers) ============================================ */ code-block[foldable][line-numbers] { grid-template-columns: 1.5rem calc(var(--line-number-digits, 2) * 1ch + 1.5rem) 1fr; } code-block .fold-gutter { display: flex; flex-direction: column; user-select: none; padding-left: 0.25rem; } code-block .fold-toggle { width: 1.25rem; text-align: center; line-height: inherit; color: var(--cb-fold-toggle, light-dark(#6e7781, #6e7681)); cursor: default; } code-block .fold-toggle[data-region] { cursor: pointer; } code-block .fold-toggle[data-region]:hover { color: var(--cb-fold-toggle-hover, light-dark(#24292f, #f0f6fc)); } /* ============================================ Copy Button ============================================ */ code-block { position: relative; } code-block .copy-button { position: absolute; top: 0.5rem; right: 0.5rem; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: none; border-radius: 4px; background: var(--cb-copy-bg, light-dark(rgba(255,255,255,0.8), rgba(255,255,255,0.1))); color: var(--cb-copy-color, light-dark(#57606a, #9198a1)); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } code-block .copy-button:hover { background: var(--cb-copy-bg-hover, light-dark(rgba(255,255,255,1), rgba(255,255,255,0.2))); color: var(--cb-copy-color-hover, light-dark(#24292f, #f0f6fc)); } code-block .copy-button:active { transform: scale(0.95); } code-block .copy-button.copied { color: var(--cb-copy-color-success, light-dark(#1a7f37, #3fb950)); } code-block .copy-button svg { width: 16px; height: 16px; pointer-events: none; } /* ============================================ Editable ============================================ */ code-block[editable] { cursor: text; } code-block[editable] [contenteditable] { outline: none; caret-color: var(--cb-caret, currentColor); } code-block[editable]:focus-within { outline: 2px solid var(--cb-focus-ring, light-dark(#0969da, #58a6ff)); outline-offset: -2px; } /* ============================================ Prettylights Theme (GitHub) - Default ============================================ */ :root { --cb-bg: light-dark(#f6f8fa, #151b23); --cb-fg: light-dark(#1f2328, #f0f6fc); --cb-comment: light-dark(#59636e, #9198a1); --cb-constant: light-dark(#0550ae, #79c0ff); --cb-constant-link: light-dark(#0a3069, #a5d6ff); --cb-entity: light-dark(#6639ba, #d2a8ff); --cb-entity-tag: light-dark(#0550ae, #7ee787); --cb-keyword: light-dark(#cf222e, #ff7b72); --cb-string: light-dark(#0a3069, #a5d6ff); --cb-string-regexp: light-dark(#116329, #7ee787); --cb-variable: light-dark(#953800, #ffa657); --cb-deleted-bg: light-dark(#ffebe9, #67060c); --cb-deleted-text: light-dark(#82071e, #ffdcd7); --cb-inserted-bg: light-dark(#dafbe1, #033a16); --cb-inserted-text: light-dark(#116329, #aff5b4); --cb-heading: light-dark(#0550ae, #1f6feb); } code-block { color-scheme: light dark; color: var(--cb-fg); background-color: var(--cb-bg); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; line-height: 1.6; } ::highlight(punctuation), ::highlight(number), ::highlight(atrule) { color: var(--cb-fg); } ::highlight(namespace) { opacity: 0.7; } ::highlight(comment), ::highlight(prolog), ::highlight(doctype), ::highlight(cdata) { color: var(--cb-comment); } ::highlight(constant), ::highlight(attr-name), ::highlight(char), ::highlight(builtin), ::highlight(operator) { color: var(--cb-constant); } ::highlight(property), ::highlight(tag), ::highlight(boolean), ::highlight(symbol) { color: var(--cb-entity-tag); } ::highlight(entity), ::highlight(selector), ::highlight(class-name), ::highlight(function) { color: var(--cb-entity); } ::highlight(keyword), ::highlight(rule) { color: var(--cb-keyword); } ::highlight(string), ::highlight(attr-value) { color: var(--cb-string); } ::highlight(variable) { color: var(--cb-variable); } ::highlight(regex) { color: var(--cb-string-regexp); } ::highlight(deleted) { color: var(--cb-deleted-text); background-color: var(--cb-deleted-bg); } ::highlight(inserted) { color: var(--cb-inserted-text); background-color: var(--cb-inserted-bg); } ::highlight(url) { text-decoration: underline; color: var(--cb-constant-link); } ::highlight(important) { color: var(--cb-heading); } ::highlight(css-important) { color: var(--cb-keyword); } /* ============================================ Prism Theme ============================================ */ [data-theme="prism"] { --cb-bg: #f5f2f0; --cb-fg: black; --cb-comment: slategray; --cb-constant: #905; --cb-constant-link: #9a6e3a; --cb-entity: #dd4a68; --cb-entity-tag: #905; --cb-keyword: #07a; --cb-string: #690; --cb-string-regexp: #e90; --cb-variable: #e90; --cb-deleted-bg: transparent; --cb-deleted-text: #905; --cb-inserted-bg: transparent; --cb-inserted-text: #690; --cb-heading: #07a; } [data-theme="prism"] code-block { color-scheme: light; text-shadow: 0 1px white; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; line-height: 1.5; border-radius: 4px; } @media print { [data-theme="prism"] code-block { text-shadow: none; } } [data-theme="prism"] ::highlight(punctuation) { color: #999; } [data-theme="prism"] ::highlight(operator), [data-theme="prism"] ::highlight(url) { color: #9a6e3a; background: hsla(0, 0%, 100%, 0.5); } [data-theme="prism"] ::highlight(entity) { cursor: help; } [data-theme="prism"] code-block[line-numbers] .line-numbers-gutter { border-right-color: #ddd; color: #999; } [data-theme="prism"] code-block .copy-button { background: rgba(0, 0, 0, 0.05); color: #666; } [data-theme="prism"] code-block .copy-button:hover { background: rgba(0, 0, 0, 0.1); color: #333; } [data-theme="prism"] code-block .copy-button.copied { color: #080; } [data-theme="prism"] code-block[editable]:focus-within { outline-color: #07a; } [data-theme="prism"] code-block .fold-toggle { color: #999; } [data-theme="prism"] code-block .fold-toggle[data-region]:hover { color: #333; }