/*! * Leaf Editor — stylesheet * * Three colour sets, per the Rhymix convention: auto (follows the layout's * body.color_scheme_* class), light, dark. Every colour is a custom property * so the dark set is a token swap, not a second stylesheet. */ /* -------------------------------------------------------------------------- * Tokens * -------------------------------------------------------------------------- */ .leaf-editor { --leaf-bg: #ffffff; --leaf-chrome: #fbfcfd; --leaf-border: #dfe3e8; --leaf-border-strong: #c9cfd6; --leaf-text: #1f2933; --leaf-muted: #7b8794; --leaf-hover: #eef1f5; --leaf-active-bg: #e4effc; --leaf-active-fg: #1668c1; --leaf-accent: #2a8c5a; --leaf-panel: #ffffff; --leaf-shadow: 0 6px 20px rgba(20, 30, 45, .14); --leaf-quote-bar: #d3d9e0; --leaf-code-bg: #f4f6f8; --leaf-cell-on: rgba(42, 140, 90, .16); --leaf-radius: 10px; } .leaf-editor.leaf-dark, body.color_scheme_dark .leaf-editor.leaf-auto { --leaf-bg: #1c2026; --leaf-chrome: #23282f; --leaf-border: #363d46; --leaf-border-strong: #454d57; --leaf-text: #e4e7ea; --leaf-muted: #9099a4; --leaf-hover: #2e343c; --leaf-active-bg: #24435f; --leaf-active-fg: #7db9ee; --leaf-accent: #4cb37c; --leaf-panel: #262c33; --leaf-shadow: 0 6px 20px rgba(0, 0, 0, .5); --leaf-quote-bar: #454d57; --leaf-code-bg: #14181d; --leaf-cell-on: rgba(76, 179, 124, .22); } /* Auto, before the layout's script has stamped a class on . */ @media (prefers-color-scheme: dark) { body:not(.color_scheme_light) .leaf-editor.leaf-auto { --leaf-bg: #1c2026; --leaf-chrome: #23282f; --leaf-border: #363d46; --leaf-border-strong: #454d57; --leaf-text: #e4e7ea; --leaf-muted: #9099a4; --leaf-hover: #2e343c; --leaf-active-bg: #24435f; --leaf-active-fg: #7db9ee; --leaf-accent: #4cb37c; --leaf-panel: #262c33; --leaf-shadow: 0 6px 20px rgba(0, 0, 0, .5); --leaf-quote-bar: #454d57; --leaf-code-bg: #14181d; --leaf-cell-on: rgba(76, 179, 124, .22); } } /* -------------------------------------------------------------------------- * Frame * -------------------------------------------------------------------------- */ .leaf-editor { position: relative; border: 1px solid var(--leaf-border); border-radius: var(--leaf-radius); background: var(--leaf-bg); color: var(--leaf-text); box-sizing: border-box; } .leaf-editor *, .leaf-editor *::before, .leaf-editor *::after { box-sizing: border-box; } .leaf-editor.is-focused { border-color: var(--leaf-border-strong); } .leaf-editor.is-dropping { outline: 2px dashed var(--leaf-accent); outline-offset: -4px; } /* -------------------------------------------------------------------------- * Toolbar * -------------------------------------------------------------------------- */ .leaf-toolbar { position: sticky; top: 0; z-index: 12; display: flex; flex-wrap: wrap; align-items: center; gap: 1px; padding: 5px 7px; border-bottom: 1px solid var(--leaf-border); border-radius: var(--leaf-radius) var(--leaf-radius) 0 0; background: var(--leaf-chrome); } .leaf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 30px; height: 30px; margin: 0; padding: 0 5px; border: 0; border-radius: 6px; background: transparent; color: var(--leaf-text); font: inherit; font-size: 13px; line-height: 1; cursor: pointer; transition: background .12s ease, color .12s ease; -webkit-appearance: none; appearance: none; } .leaf-btn:hover:not(:disabled) { background: var(--leaf-hover); } .leaf-btn.is-on, .leaf-btn.is-open { background: var(--leaf-active-bg); color: var(--leaf-active-fg); } .leaf-btn:disabled { opacity: .35; cursor: default; } .leaf-btn svg { display: block; } /* The paragraph button carries a changing label; a fixed box keeps the rest of the toolbar from shifting every time the caret moves. */ .leaf-btn-wide { min-width: 82px; padding: 0 6px 0 9px; justify-content: space-between; gap: 2px; } .leaf-btn-wide .leaf-btn-label { overflow: hidden; text-overflow: ellipsis; } .leaf-btn-label { font-size: 12px; letter-spacing: -.02em; white-space: nowrap; } .leaf-caret { display: inline-flex; opacity: .55; margin-left: -2px; } .leaf-caret svg { width: 13px; height: 13px; } /* -------------------------------------------------------------------------- * Phone toolbar * * Five stacked buttons, with the rest revealed a group at a time -- the shape * people already know from writing on a phone. Hidden on wide screens; the * media query at the end of this file does the swap, so rotating a device * changes toolbars with no script involved. * -------------------------------------------------------------------------- */ .leaf-mbar { display: none; position: sticky; top: 0; z-index: 12; border-bottom: 1px solid var(--leaf-border); border-radius: var(--leaf-radius) var(--leaf-radius) 0 0; background: var(--leaf-chrome); } .leaf-mrow { display: flex; align-items: stretch; } .leaf-mbtn { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 8px 2px 7px; border: 0; border-radius: 0; background: transparent; color: var(--leaf-text); font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } .leaf-mbtn .leaf-mic { display: flex; } .leaf-mbtn .leaf-mic svg { width: 21px; height: 21px; display: block; } .leaf-mlabel { font-size: 11px; line-height: 1; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .leaf-mbtn.is-on { color: var(--leaf-active-fg); background: var(--leaf-active-bg); } /* Closed by default and opened by a class. * * The `hidden` attribute alone cannot do this: `[hidden] { display: none }` * comes from the browser's own stylesheet, and ANY author rule that sets * display -- `display: flex` here -- outranks it. The attribute is still set * for assistive tech, and the rule below keeps the two from disagreeing. */ .leaf-mdrawer { display: none; align-items: center; gap: 2px; padding: 6px 8px; border-top: 1px solid var(--leaf-border); background: var(--leaf-bg); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .leaf-mdrawer.is-open { display: flex; } .leaf-mdrawer[hidden] { display: none; } .leaf-mdrawer::-webkit-scrollbar { display: none; } .leaf-mdrawer .leaf-btn { flex: none; min-width: 38px; height: 36px; } .leaf-mdrawer .leaf-btn-wide { min-width: 96px; } .leaf-sep { width: 1px; height: 17px; margin: 0 4px; background: var(--leaf-border); } /* -------------------------------------------------------------------------- * Writing surface * -------------------------------------------------------------------------- */ .leaf-content { padding: 18px 20px; outline: 0; font-size: 15px; line-height: 1.75; color: var(--leaf-text); word-break: break-word; overflow-wrap: break-word; -webkit-user-select: text; user-select: text; } .leaf-content.is-empty::before { content: attr(data-placeholder); display: block; height: 0; color: var(--leaf-muted); pointer-events: none; } .leaf-content > *:first-child { margin-top: 0; } .leaf-content > *:last-child { margin-bottom: 0; } .leaf-content p { margin: 0 0 var(--leaf-para-spacing, .85em); } .leaf-content h1, .leaf-content h2, .leaf-content h3, .leaf-content h4 { margin: 1.5em 0 .5em; line-height: 1.35; font-weight: 700; color: var(--leaf-text); } .leaf-content h1 { font-size: 1.85em; } .leaf-content h2 { font-size: 1.5em; } .leaf-content h3 { font-size: 1.25em; } .leaf-content h4 { font-size: 1.08em; } .leaf-content blockquote { margin: 1em 0; padding: .2em 0 .2em 1em; border-left: 3px solid var(--leaf-quote-bar); color: var(--leaf-muted); } .leaf-content blockquote p:last-child { margin-bottom: 0; } .leaf-content pre { margin: 1em 0; padding: 14px 16px; border-radius: 8px; background: var(--leaf-code-bg); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "D2Coding", monospace; font-size: .92em; line-height: 1.6; white-space: pre-wrap; overflow-x: auto; } .leaf-content code { padding: .1em .35em; border-radius: 4px; background: var(--leaf-code-bg); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; } .leaf-content pre code { padding: 0; background: none; } .leaf-content ul, .leaf-content ol { margin: 0 0 .85em; padding-left: 1.9em; } .leaf-content li { margin: .15em 0; } .leaf-content a { color: #1a73c7; text-decoration: underline; } .leaf-editor.leaf-dark .leaf-content a, body.color_scheme_dark .leaf-editor.leaf-auto .leaf-content a { color: #74b4ec; } .leaf-content hr { margin: 1.6em 0; border: 0; border-top: 1px solid var(--leaf-border-strong); } .leaf-content img { max-width: 100%; height: auto; vertical-align: middle; } .leaf-content img.leaf-picked { outline: 2px solid var(--leaf-accent); outline-offset: 1px; } /* A captioned photo is a shrink-wrapped table box, so the caption tracks the photo's width. The layout itself lives in inline styles on the elements, so it survives publication; these rules only add editing affordances. */ .leaf-content figure { max-width: 100%; } .leaf-content figure img { display: block; } .leaf-content figcaption { outline: 0; } .leaf-content figcaption:empty::before, .leaf-content figcaption:has(> br:only-child)::before { content: attr(data-leaf-hint); color: var(--leaf-muted); pointer-events: none; } .leaf-content .leaf-embed { position: relative; margin: 1.2em 0; padding-bottom: 56.25%; height: 0; } .leaf-content .leaf-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Tables carry their own inline styles so they survive publication; these rules only add the affordances that belong to editing. */ .leaf-content table { max-width: 100%; margin: 1.2em 0; } .leaf-content td, .leaf-content th { position: relative; min-width: 28px; } .leaf-content td > br:only-child, .leaf-content th > br:only-child { pointer-events: none; } .leaf-content .leaf-cell-on::after { content: ''; position: absolute; inset: 0; background: var(--leaf-cell-on); pointer-events: none; } /* While a cell drag is running, keep the browser from painting its own text highlight across the cells. Scoped to the table: `user-select: none` on the whole contenteditable surface breaks editing in some browsers. */ .leaf-content.leaf-cell-dragging table { -webkit-user-select: none; user-select: none; } .leaf-content.leaf-cell-dragging td, .leaf-content.leaf-cell-dragging th { cursor: cell; } .leaf-content.leaf-col-resizing { cursor: col-resize; } body.leaf-resizing, body.leaf-resizing * { cursor: col-resize !important; user-select: none !important; } /* -------------------------------------------------------------------------- * Footer * -------------------------------------------------------------------------- */ .leaf-footer { display: flex; justify-content: flex-end; padding: 5px 12px; border-top: 1px solid var(--leaf-border); border-radius: 0 0 var(--leaf-radius) var(--leaf-radius); background: var(--leaf-chrome); font-size: 12px; color: var(--leaf-muted); } /* -------------------------------------------------------------------------- * Panels & context bars * -------------------------------------------------------------------------- */ .leaf-panel { position: absolute; z-index: 40; padding: 6px; border: 1px solid var(--leaf-border); border-radius: 9px; background: var(--leaf-panel); box-shadow: var(--leaf-shadow); } .leaf-menu { min-width: 150px; } .leaf-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--leaf-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; } .leaf-menu-item:hover { background: var(--leaf-hover); } .leaf-menu-item.is-on { color: var(--leaf-active-fg); } .leaf-menu-label { flex: 1; } .leaf-menu-check { display: inline-flex; color: var(--leaf-accent); } .leaf-menu-check svg { width: 15px; height: 15px; } /* The paragraph menu previews what each choice looks like. */ .leaf-s-p .leaf-menu-label { font-size: 14px; } .leaf-s-h2 .leaf-menu-label { font-size: 20px; font-weight: 700; } .leaf-s-h3 .leaf-menu-label { font-size: 17px; font-weight: 700; } .leaf-s-h4 .leaf-menu-label { font-size: 15px; font-weight: 700; } .leaf-s-quote .leaf-menu-label { padding-left: 8px; border-left: 3px solid var(--leaf-quote-bar); color: var(--leaf-muted); } .leaf-s-code .leaf-menu-label { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; } .leaf-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 2px; } .leaf-swatch { width: 25px; height: 25px; padding: 0; border: 1px solid rgba(128, 128, 128, .35); border-radius: 6px; cursor: pointer; } .leaf-swatch:hover { transform: scale(1.1); } .leaf-swatch-none { background: linear-gradient(to top left, transparent 46%, #e0483c 46%, #e0483c 54%, transparent 54%), var(--leaf-bg); } .leaf-reset { justify-content: center; margin-top: 5px; font-size: 13px; color: var(--leaf-muted); } .leaf-tablepicker { padding: 2px; } .leaf-tablepicker-label { margin-bottom: 6px; font-size: 12px; color: var(--leaf-muted); text-align: center; } .leaf-tablepicker-grid { display: grid; grid-template-columns: repeat(8, 18px); gap: 3px; } .leaf-tablepicker-cell { width: 18px; height: 18px; border: 1px solid var(--leaf-border-strong); border-radius: 3px; cursor: pointer; } .leaf-tablepicker-cell.is-on { border-color: var(--leaf-accent); background: var(--leaf-cell-on); } .leaf-linkform { display: flex; align-items: center; gap: 5px; } .leaf-input { width: 232px; height: 30px; padding: 0 9px; border: 1px solid var(--leaf-border-strong); border-radius: 6px; background: var(--leaf-bg); color: var(--leaf-text); font: inherit; font-size: 13px; } .leaf-input:focus { outline: 0; border-color: var(--leaf-accent); } .leaf-mini { height: 30px; padding: 0 10px; border: 1px solid var(--leaf-border-strong); border-radius: 6px; background: var(--leaf-bg); color: var(--leaf-text); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; } .leaf-mini:hover { background: var(--leaf-hover); } .leaf-mini-primary { border-color: var(--leaf-accent); background: var(--leaf-accent); color: #fff; } .leaf-bar { position: absolute; z-index: 30; display: none; align-items: center; gap: 1px; padding: 4px; border: 1px solid var(--leaf-border); border-radius: 9px; background: var(--leaf-panel); box-shadow: var(--leaf-shadow); white-space: nowrap; } .leaf-barbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: var(--leaf-text); font: inherit; font-size: 12px; cursor: pointer; } .leaf-barbtn:hover { background: var(--leaf-hover); } .leaf-barbtn.is-on { background: var(--leaf-active-bg); color: var(--leaf-active-fg); } .leaf-barbtn-text { min-width: 38px; } /* Add-a-row / add-a-column handles. Hidden on wide screens, where the floating bar is already a fine target. */ .leaf-thandle { position: absolute; z-index: 25; display: none; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--leaf-border-strong); border-radius: 999px; background: var(--leaf-panel); color: var(--leaf-accent); font: inherit; font-size: 19px; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(20, 30, 45, .16); -webkit-tap-highlight-color: transparent; } .leaf-thandle:active { background: var(--leaf-active-bg); } .leaf-thandle-row { width: 46px; height: 26px; } .leaf-thandle-col { width: 26px; height: 46px; } .leaf-linktext { max-width: 260px; padding: 0 8px; overflow: hidden; color: var(--leaf-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } /* -------------------------------------------------------------------------- * Small screens * -------------------------------------------------------------------------- */ @media (max-width: 640px) { .leaf-toolbar { display: none; } .leaf-mbar { display: block; } .leaf-btn { min-width: 38px; height: 36px; } /* Must come after .leaf-btn: equal specificity, and the paragraph button carries a word, not a glyph. */ .leaf-btn-wide { min-width: 96px; } .leaf-content { padding: 14px; font-size: 16px; } .leaf-input { width: 168px; } .leaf-bar { max-width: calc(100vw - 24px); overflow-x: auto; } .leaf-panel { max-width: calc(100vw - 24px); } .leaf-menu { min-width: 168px; } .leaf-menu-item { padding: 10px 11px; } .leaf-swatch { width: 30px; height: 30px; } /* Table editing on a phone: a plus on each axis for the common case, and the full command set docked in the toolbar drawer. A popover floating over the table would cover the thing being edited. */ .leaf-bar-table { display: none !important; } .leaf-thandle { display: flex; } .leaf-mdrawer .leaf-barbtn { flex: none; min-width: 40px; height: 36px; } .leaf-mdrawer .leaf-sep { flex: none; } } @media (prefers-reduced-motion: reduce) { .leaf-editor * { transition: none !important; } }