, so it never got the rule — stayed put. The caret sits on the | paragraph's line, so it appeared 5px below the placeholder text it is | supposed to sit in front of. | | Block spacing inside the editor belongs to PlaygroundEditorTheme, which | already carries its own margins. */ .editor-shell .ContentEditable__root p { padding-top: 0; padding-bottom: 0; } /* |============================================================================== | Toolbar | | 40px tall, one hairline along the bottom. The formatting controls scroll as a | single strip (.toolbar-scroll) so the document actions on the right stay put | when the window is too narrow for everything at once. |============================================================================== */ .editor-shell .toolbar { height: 40px; flex: 0 0 40px; margin-bottom: 0; padding: 0; display: flex; align-items: stretch; background: var(--color-paper); border-bottom: 1px solid var(--color-paper-light); overflow: visible; } .toolbar-scroll { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; padding: 0 8px; overflow-x: auto; overflow-y: hidden; } /* When the strip does overflow it gets the design's hairline thumb rather than a scrollbar. Deliberately no `scrollbar-width` here: setting the standard property makes Chrome ignore the ::-webkit-scrollbar rules altogether, and this bar is the only affordance telling a reader there is more toolbar. */ .toolbar-scroll::-webkit-scrollbar { height: 2px; width: 0 !important; } .toolbar-scroll::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-rest) !important; background-clip: border-box !important; border: 0; border-radius: 17px; } .toolbar-scroll::-webkit-scrollbar-button { display: none; } /* Full-height hairline, no margin of its own — the strip's own 4px gap sits on either side of it, which is the 8px the design leaves between groups. The playground's default is a short inset rule with margins on top of that. */ .editor-shell .toolbar .divider { width: 1px; height: 40px; margin: 0; flex-shrink: 0; background-color: var(--color-paper-light); } .editor-shell button.toolbar-item { border-radius: 10px; padding: 4px; height: 28px; min-width: 28px; justify-content: center; gap: 4px; color: var(--color-dark-yellow); } .editor-shell button.toolbar-item.spaced { margin-right: 0; } .editor-shell .toolbar .toolbar-item .text { color: var(--color-dark-yellow); padding-right: 0; font-size: 14px; line-height: 20px; } .editor-shell .toolbar .toolbar-item .icon { margin-right: 0; } .editor-shell .toolbar i.chevron-down, .editor-shell .toolbar-item i.chevron-down { margin-top: 0; } /* The two 150px pickers — typeface and block type. */ .editor-shell .toolbar-item.font-family, .editor-shell .toolbar-item.block-controls { width: 150px; height: 40px; padding: 0 8px; justify-content: flex-start; } .editor-shell .toolbar-item.font-family .text, .editor-shell .toolbar .block-controls .dropdown-button-text { display: block; flex: 1; width: auto; min-width: 0; text-align: left; } /* Colour, highlight and the extra-styles menu are icon-plus-chevron cells. */ .editor-shell .toolbar-item.color-picker, .editor-shell .toolbar-item:has(> .icon.dropdown-more) { width: 56px; height: 28px; padding: 0 8px; justify-content: center; } /* Font size: two 32px steppers around a 32px field. */ .editor-shell .font-size-input { width: 32px; height: 32px; color: var(--color-dark-yellow); background: transparent; font-weight: 700; font-family: Arial, sans-serif; } .editor-shell button.font-decrement, .editor-shell button.font-increment { width: 32px; height: 32px; min-width: 32px; margin: 0; padding: 0; } /* Insert and the alignment menu are the two labelled 40px controls. */ .editor-shell .toolbar-item.spaced:has(> .text) { height: 40px; padding: 0 8px; } .editor-shell .toolbar-item:hover:not([disabled]) { background-color: var(--color-paper-light); } .editor-shell button.toolbar-item.active { background-color: var(--color-paper-light); } /* | Disabled toolbar controls — Undo and Redo with nothing on the stack, and the | formatting controls while the editor is read-only. | | The playground fades them to 0.2, which was tuned for dark glyphs on a white | sheet. On the paper they all but vanish, so Undo read as a missing button | rather than an unavailable one. 0.45 keeps the glyph legible while leaving it | plainly muted next to its neighbours, and the not-allowed cursor still says | the rest. */ .editor-shell button.toolbar-item:disabled .icon, .editor-shell button.toolbar-item:disabled .text, .editor-shell button.toolbar-item:disabled i.format, .editor-shell button.toolbar-item:disabled i.chevron-down, .editor-shell button.toolbar-item:disabled .chevron-down { opacity: 0.45; } /* Nothing to hover into when the control cannot be used. */ .editor-shell button.toolbar-item:disabled:hover { background-color: transparent; } /* |============================================================================== | Toolbar — document actions (theme, pop out, copy, download, clear) | | Each sits in its own cell with a hairline on its leading edge, flush to the | toolbar's full 40px height. |============================================================================== */ .toolbar-actions { display: flex; align-items: stretch; flex-shrink: 0; } .toolbar-actions__group, .toolbar-actions__btn { display: flex; align-items: center; border-left: 1px solid var(--color-paper-light); background: none; } .toolbar-actions__theme { gap: 5px; padding: 10px 15px; } .toolbar-actions__theme-label { font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; text-transform: capitalize; white-space: nowrap; color: var(--color-dark-yellow); } .toolbar-actions__theme-btns { display: flex; align-items: center; gap: 5px; } /* | Each swatch is a *sample* of the theme it selects, so its fill and its outline | are fixed values rather than tokens. Painted from the palette they followed | the active theme instead: picking dark turned the paper chip into #3F4147 and | picking white turned it into #E4E6E8, so the row stopped showing the reader | what they were choosing between. Same three colours the home editor uses. */ .toolbar-actions__swatch { width: 20px; height: 20px; padding: 0; border: 1px solid #908b76; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .toolbar-actions__swatch--light { background: #e5e1b8; } .toolbar-actions__swatch--dark { background: #000000; } .toolbar-actions__swatch--white { background: #ffffff; } .toolbar-actions__tick { width: 10px; height: 10px; display: block; } /* The tick is drawn in black; on the black swatch it has to flip. */ .toolbar-actions__swatch--dark .toolbar-actions__tick { filter: invert(1); } .toolbar-actions__btn { justify-content: center; padding: 10px; border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; } .toolbar-actions__btn img { width: 20px; height: 20px; display: block; transition: opacity 150ms ease; } .toolbar-actions__btn:hover:not([disabled]), .toolbar-actions__btn.active { background-color: var(--color-paper-light); } .toolbar-actions__btn[disabled] { cursor: not-allowed; } .toolbar-actions__btn[disabled] img { opacity: 0.4; } /* |============================================================================== | Bottom bar |============================================================================== */ .tool-lexical-bottom-bar { flex: 0 0 auto; display: flex; flex-direction: column; background: var(--color-paper); border-top: 1px solid var(--color-paper-light); font-size: 14px; line-height: 20px; } .tool-lexical-bottom-bar__row { display: flex; align-items: stretch; } .tool-lexical-bottom-bar__row--primary { height: 30px; } /* The spacer is what pushes the counters to the right on a wide window; the narrow layout drops it and lets the Blogs cell take the slack instead. */ .tool-lexical-bottom-bar__spacer { flex: 1; } /* Cells that belong to one layout only. Both are rendered — see the page template — and switched here. Scoped through the row so they outrank the `display: flex` every cell carries. */ .tool-lexical-bottom-bar__row .tool-lexical-bottom-bar__narrow-only, .tool-lexical-bottom-bar .tool-lexical-bottom-bar__row--icons { display: none; } .tool-lexical-bottom-bar__item { display: flex; align-items: center; gap: 6px; padding: 5px 15px; margin: 0; border: 0; border-left: 1px solid var(--color-paper-light); background: none; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; text-transform: capitalize; white-space: nowrap; color: var(--placeholder-color); } /* Set by the page script when the editor stops being empty — see the note by the emptychange listener. Upload used to be removed outright at that point, which knocked a hole in the mobile icon row: the cell stayed, the control inside it did not, and the row read as a missing button. It holds its place and reads as unavailable instead, the same way the copy and download buttons do on an empty document. Only the wide layout gets this. The narrow icon row keeps upload enabled — a lone dimmed glyph among live ones reads as broken rather than as off. */ .tool-lexical-bottom-bar .is-disabled { cursor: not-allowed; } .tool-lexical-bottom-bar .is-disabled img, .tool-lexical-bottom-bar .is-disabled span { opacity: 0.45; } .tool-lexical-bottom-bar .is-disabled:hover { background-color: transparent; } .tool-lexical-bottom-bar__icon-cell > button[disabled], .tool-lexical-bottom-bar__icon-cell > label[disabled] { cursor: not-allowed; } .tool-lexical-bottom-bar__icon-cell > button[disabled] img { opacity: 0.45; } .tool-lexical-bottom-bar__item img { width: 20px; height: 20px; display: block; } button.tool-lexical-bottom-bar__item, .tool-lexical-bottom-bar__item label { cursor: pointer; display: flex; align-items: center; gap: 6px; } button.tool-lexical-bottom-bar__item:hover { background-color: var(--color-paper-light); } /* Upload sits on the darker toolbar ink, and its cell is 10px in rather than the 15px the right-hand group uses. */ .tool-lexical-bottom-bar__upload { padding: 5px 10px; color: var(--color-dark-yellow); } /* The counters read as one number-plus-label pair, the number in the page's heading colour and the label in the muted ink. */ .tool-lexical-bottom-bar__count span { color: var(--color-black); } [data-theme="dark"] .tool-lexical-bottom-bar__count span { color: #ffffff; } [data-theme="dark"] .tool-lexical-bottom-bar__blogs { color: #eaeaea; } .tool-lexical-bottom-bar__count--words { border-right: 1px solid var(--color-paper-light); } /* The full-screen cell swaps glyphs rather than rotating one. */ .tool-lexical-bottom-bar__fullscreen .icon-collapse, body.tool-lexical-fullscreen .tool-lexical-bottom-bar__fullscreen .icon-expand { display: none; } body.tool-lexical-fullscreen .tool-lexical-bottom-bar__fullscreen .icon-collapse { display: block; } /* |============================================================================== | Themes | | The palette above carries most of it. What cannot ride on a custom property | is the ink baked into the icon SVGs, so those are filtered to the theme's own | ink instead — the same approach, and the same filter chains, home.css uses. |============================================================================== */ [data-theme="dark"] .toolbar-actions__btn img, [data-theme="dark"] .tool-lexical-bottom-bar__item img, [data-theme="dark"] .tool-lexical-bottom-bar__icon-cell img { /* Neutral grey source, so a plain invert lands exactly on #EAEAEA. */ filter: brightness(0) saturate(100%) invert(91.8%); } /* The formatting icons are inline background images on ; one flip covers the lot, and the same rule the mobile editor uses. */ [data-theme="dark"] .toolbar i, [data-theme="dark"] .toolbar .icon, [data-theme="dark"] .dropdown i, [data-theme="dark"] .dropdown .icon, [data-theme="dark"] .floating-text-format-popup i, [data-theme="dark"] .floating-text-format-popup .icon, [data-theme="dark"] .draggable-block-menu .icon, [data-theme="dark"] .typeahead-popover ul li i { filter: brightness(0) invert(1); } [data-theme="dark"] .editor-shell .ContentEditable__root, [data-theme="dark"] .editor-shell .toolbar .toolbar-item .text, [data-theme="dark"] .editor-shell .font-size-input { color: #eaeaea; } [data-theme="dark"] .dropdown, [data-theme="dark"] .typeahead-popover, [data-theme="dark"] .link-editor, [data-theme="dark"] .floating-text-format-popup { background: var(--color-paper); color: #eaeaea; } [data-theme="dark"] .dropdown .item, [data-theme="dark"] .dropdown .text { color: #eaeaea; } /* * The "/" block picker and the ":" emoji picker. * * Their rows are `color: var(--color-black)` on `background: var(--color-white)` * (see ContentEditable's index.css). The palette remaps --color-white to the * dark sheet but leaves --color-black at #000, so the menu painted black text * on a near-black row. The .dropdown rule above already covers the toolbar * menus; this is the same treatment for the typeahead ones. */ [data-theme="dark"] .typeahead-popover li, [data-theme="dark"] .typeahead-popover li .text { color: #eaeaea; } /* * H2 is the one heading the editor theme gives a literal `color: black` * (PlaygroundEditorTheme.css) — H1 and H3 simply inherit the root's ink, which * is why they were readable on the dark sheet and H2 alone was not. Put it back * on the same footing as its siblings. */ [data-theme="dark"] .editor-shell .ContentEditable__root h2 { color: inherit; } /* * A code block keeps its light background in every theme — the syntax colours * the highlighter emits (#0077aa, #9a6e3a, …) are chosen for a light surface * and would need a whole second palette to work on a dark one. What broke is * only the *unhighlighted* text: with no token class of its own it inherited * the dark theme's #eaeaea and went white-on-white. * * Set the base ink on the block itself. The token spans carry their own colour * and are untouched — which is why this deliberately does not reach into them. */ [data-theme="dark"] .editor-shell .ContentEditable__root .PlaygroundEditorTheme__code { color: #1e1f22; } /* * The tool's own copy renders on a white sheet in every theme (see the popup * further down), but darkMode.css colours every
on the page with * `var(--color-dark)` — #EAEAEA here — so the body text of this panel went * white on white while its headings and list items, which that rule does not * name, stayed readable. Restate the colour the light theme gives it, which is * what the
s beside it already use. */ [data-theme="dark"] .tool-content-popup__body p { color: var(--light-border-green, rgba(2, 47, 54, 0.8)); } /* * Links in that same panel. darkMode.css claims every `a` on the page with * `color: var(--color-dark) !important`, so they went white on the white sheet * — hence the !important here, which is the only way past it. * * `revert` rather than a literal: this panel looks the same in every theme, so * its links should too, and in the light theme no author rule touches them at * all — they are the browser's own link colour. Reverting to the user-agent * value reproduces that exactly, visited state included, instead of freezing * one browser's blue into the stylesheet. */ [data-theme="dark"] .tool-content-popup__body a { color: revert !important; } /* |============================================================================== | Dialogs keep the white theme | | The insert dialogs (image, table, columns, equation, poll) and the Excalidraw | window are dense, borrowed UI: text fields, selects, swatch grids, a whole | third-party canvas editor. Their ink is written against a light sheet — the | dialog title alone is `var(--color-black)`, which is #000 in every theme and | so vanished on the dark surface — and Excalidraw draws its own light chrome | regardless of what the page is doing. | | Rather than restate every one of those colours for the dark theme, the sheet | goes back to what they were drawn for. The palette is all tokens, so pinning | them on the dialog root flips the whole subtree at once; these are the | `white` theme's values (see the palette at the top of this file). The site | search does the same thing on the home tool. | | Both alias layers are restated deliberately: the `body` block computes | `--color-white: var(--color-paper)` against body's own palette, and that | computed value is what descendants inherit — redefining `--color-paper` alone | further down would not reach it. |============================================================================== */ [data-theme="dark"] .Modal__overlay, [data-theme="dark"] .ExcalidrawModal__overlay { --color-paper: #ffffff; --color-paper-light: #e4e6e8; --light-font-color: #656252; --placeholder-color: #908b76; --color-dark-yellow: #504e40; --color-white: #ffffff; --color-gray-light: #e4e6e8; --color-gray-accent: #e4e6e8; --bg-gray: #e4e6e8; --placeholder-text: #908b76; --color-paragraph: #504e40; /* The site's inversion pair. darkMode.css paints every button `color: var(--color-dark)`, which is #EAEAEA here — white text on the light button face. These are the light theme's values for the pair. */ --color-dark: #000000; --color-light: #ffffff; --border-color: #e4e6e8; } /* * darkMode.css paints every button `color: #fff` — a literal, not a token, so * pinning the palette above cannot reach it and the dialog's own buttons came * out white on their light faces. Restated here at matching depth. * * Excalidraw's internal buttons are deliberately left out: its UI has its own * light chrome and does not want this. Only the wrapper's own actions are * named. The primary red action keeps its white label — Modal.css sets that at * greater depth than this. */ [data-theme="dark"] .Modal__overlay button, [data-theme="dark"] .ExcalidrawModal__actions button, [data-theme="dark"] .ExcalidrawModal__discardModal button { color: var(--color-dark); } /* * darkMode.css styles the site footer with a bare `footer` selector, and * Excalidraw's floating toolbar strip is a
too — so it was painted * with the page's dark sheet, a black band across the bottom of an otherwise * light drawing window. It is meant to float over the canvas. */ [data-theme="dark"] .ExcalidrawModal__overlay footer { background-color: transparent; } /* Icons inside a dialog must not take the page-wide dark inversion — inverted to white, they would be invisible on the sheet above. */ [data-theme="dark"] .Modal__overlay i, [data-theme="dark"] .Modal__overlay .icon, [data-theme="dark"] .ExcalidrawModal__overlay i, [data-theme="dark"] .ExcalidrawModal__overlay .icon { filter: none; } /* The white theme keeps the paper theme's ink; only the sheet changes, and the palette already handles that. */ /* |============================================================================== | Scrollbar | | A 12px rail with an 8px thumb and a hand-drawn triangle at either end — | Chrome drops the native end buttons as soon as a scrollbar carries any custom | style. Lifted from home.css so the two editors scroll identically; the arrow | glyphs are restated per theme because a data URI cannot read a custom | property. |============================================================================== */ .tool-lexical-page *::-webkit-scrollbar { background-color: transparent; width: 12px !important; cursor: pointer !important; } .tool-lexical-page *::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-rest) !important; background-clip: padding-box !important; border: 2px solid transparent; border-radius: 999px; cursor: pointer !important; } .tool-lexical-page *::-webkit-scrollbar-thumb:hover { background-color: var(--placeholder-color) !important; } .tool-lexical-page *::-webkit-scrollbar-button:vertical:decrement, .tool-lexical-page *::-webkit-scrollbar-button:vertical:increment { height: 12px; background-repeat: no-repeat; background-position: center; background-size: 8px 5px; cursor: pointer !important; } .tool-lexical-page *::-webkit-scrollbar-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M4 0 8 5H0z' fill='%23908B76'/%3E%3C/svg%3E"); } .tool-lexical-page *::-webkit-scrollbar-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M4 5 0 0h8z' fill='%23908B76'/%3E%3C/svg%3E"); } .tool-lexical-page *::-webkit-scrollbar-button:vertical:start:increment, .tool-lexical-page *::-webkit-scrollbar-button:vertical:end:decrement, .tool-lexical-page *::-webkit-scrollbar-button:horizontal { display: none; } body[data-theme="dark"] .tool-lexical-page *::-webkit-scrollbar-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M4 0 8 5H0z' fill='%23676A75'/%3E%3C/svg%3E"); } body[data-theme="dark"] .tool-lexical-page *::-webkit-scrollbar-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M4 5 0 0h8z' fill='%23676A75'/%3E%3C/svg%3E"); } body[data-theme="white"] .tool-lexical-page *::-webkit-scrollbar-thumb:hover { background-color: #8c8c8c !important; } body[data-theme="white"] .tool-lexical-page *::-webkit-scrollbar-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M4 0 8 5H0z' fill='%238C8C8C'/%3E%3C/svg%3E"); } body[data-theme="white"] .tool-lexical-page *::-webkit-scrollbar-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M4 5 0 0h8z' fill='%238C8C8C'/%3E%3C/svg%3E"); } /* |============================================================================== | Drag handle and insert button | | Insert, grab handle, caret and text all sit on one line, in that order. | | Lexical pins this menu 4px from the editor's left edge and never measures it | — `const left = SPACE` in LexicalDraggableBlockPlugin, with no reference to | where the text starts — so the gutter has to be wide enough to hold it: 4px | offset + a 36px menu + 6px of air puts the first character at 46px. That is | the one place the wide layout departs from the design's 24px inset, and it is | what keeps the menu off the first character instead of printed across it. | | The menu only mounts above 1025px (see Editor.tsx), which is why the narrow | layout keeps the design's 24px: there is nothing there to make room for. |============================================================================== */ .editor-shell .ContentEditable__root { padding-left: 46px; } .editor-shell .ContentEditable__placeholder { left: 46px; } /* Centred on the line's own height rather than sitting on its top edge, so the two icons line up with the caret beside them. */ .editor .draggable-block-menu { align-items: center; height: 16px; gap: 3px; padding: 0; } /* The playground's 0.3 all but disappears against the paper; these have to read as an affordance before the pointer finds them. */ .editor .draggable-block-menu .icon { opacity: 0.45; } .editor .draggable-block-menu .icon:hover { opacity: 1; background-color: var(--color-paper-light); } /* The same 0.45 reads much fainter once the glyph is inverted to white and the sheet is near-black — a light mark on a dark field loses more to the eye than a dark mark on a light one. Lift it so the two icons stay an affordance here too. */ [data-theme="dark"] .editor .draggable-block-menu .icon { opacity: 0.75; } /* deepskyblue against the paper is jarring; the drop indicator takes the theme's own ink instead. */ .editor .draggable-block-target-line { background: var(--placeholder-color); height: 2px; border-radius: 2px; } /* |============================================================================== | "About this Tool" content popup | | The tool's own copy, as an overlay panel over the editor rather than a | section below it — the shape the home tool uses. Everything inside the body | is CMS HTML, so the rules here style tags rather than classes. |============================================================================== */ .tool-content-overlay { position: fixed; inset: 0; z-index: 10050; background: var(--modal-backdrop, #00000066); } .tool-content-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10051; width: min(900px, calc(100vw - 32px)); max-height: min(1080px, calc(100dvh - 48px)); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #ffffff; border: 1px solid var(--color-gray-tab, #d5dbdf); } .tool-content-popup[hidden], .tool-content-overlay[hidden] { display: none; } /* The design sits the close control on the first heading's line. The heading comes from the CMS, so the button is positioned rather than laid out beside it, and the body reserves the room. */ .tool-content-popup__close { position: absolute; top: 24px; right: 24px; display: flex; align-items: center; justify-content: center; padding: 4px; background: none; border: 1px solid var(--color-gray-tab, #d5dbdf); border-radius: 999px; cursor: pointer; } .tool-content-popup__close img { width: 20px; height: 20px; display: block; } .tool-content-popup__body > :first-child { padding-right: 48px; } /* | CMS copy. Sizes follow the design: 36/40.5 for the title, 27 for section | headings, 18/28 for body and list text. */ .tool-content-popup__body { display: flex; flex-direction: column; gap: 12px; font-family: Arial, sans-serif; color: var(--light-border-green, #022f36cc); /* The tool shell centres its text; the panel's copy is set left. */ text-align: left; } .tool-content-popup__body h1 { margin: 0; font-size: 36px; line-height: 40.5px; font-weight: 700; color: var(--dark-border-green, #022f36); } .tool-content-popup__body h2 { margin: 0; font-size: 27px; line-height: normal; font-weight: 700; color: var(--dark-border-green, #022f36); } .tool-content-popup__body h3, .tool-content-popup__body h4 { margin: 0; font-size: 22px; line-height: normal; font-weight: 700; color: var(--dark-border-green, #022f36); } .tool-content-popup__body p { margin: 0; padding: 0; font-size: 18px; line-height: 28px; } .tool-content-popup__body ul, .tool-content-popup__body ol { margin: 0; padding-left: 27px; display: flex; flex-direction: column; gap: 4px; } .tool-content-popup__body ul { list-style: disc; } .tool-content-popup__body ol { list-style: decimal; } .tool-content-popup__body li { font-size: 18px; line-height: 28px; } /* The design sets the term in each bullet in the heading colour. */ .tool-content-popup__body li strong, .tool-content-popup__body li b { color: var(--dark-border-green, #022f36); } .tool-content-popup__body a { color: #0000ee; text-decoration: underline; } .tool-content-popup__body img { max-width: 100%; height: auto; } /* The CMS copy carries section rules; keep them as hairlines rather than the browser's default inset bevel. */ .tool-content-popup__body hr { width: 100%; height: 0; margin: 0; border: 0; border-top: 1px solid var(--color-gray-tab, #d5dbdf); } .tool-content-popup__body table { width: 100%; border-collapse: collapse; } .tool-content-popup__ads { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; font-size: 12px; text-align: center; } /* A 12px rail with a 6px rounded thumb, as drawn down the panel's edge. */ .tool-content-popup::-webkit-scrollbar { width: 12px !important; } .tool-content-popup::-webkit-scrollbar-thumb { background-color: var(--color-gray-tab, #d5dbdf) !important; background-clip: padding-box !important; border: 3px solid transparent; border-radius: 999px; } .tool-content-popup::-webkit-scrollbar-button { display: none; } @media (max-width: 1024px) { .tool-content-popup { padding: 16px; gap: 10px; } .tool-content-popup__close { top: 16px; right: 16px; } .tool-content-popup__body h1 { font-size: 26px; line-height: 32px; } .tool-content-popup__body h2 { font-size: 21px; } .tool-content-popup__body h3, .tool-content-popup__body h4 { font-size: 18px; } .tool-content-popup__body p, .tool-content-popup__body li { font-size: 16px; line-height: 24px; } } /* |============================================================================== | Tooltips | | The site's tooltip is a pair of pseudo-elements on the control itself. That | cannot work here: every toolbar control sits inside a horizontally scrolling | strip, and a scroll container clips its cross axis, so the bubble was being | cut off at the toolbar's 40px edge. Suppress it inside the editor and let the | page script draw the same bubble into a fixed layer on instead, where | nothing can clip it. |============================================================================== */ .tool-lexical-page [data-tooltip]::before, .tool-lexical-page [data-tooltip]::after { content: none; } .lexical-tip { position: fixed; top: 0; left: 0; z-index: 100000; max-width: 260px; padding: 6px 8px; background: var(--color-dark); color: var(--color-light); font-family: Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; text-align: center; width: max-content; pointer-events: none; opacity: 0; transition: opacity 100ms; } .lexical-tip.is-visible { opacity: 1; } .lexical-tip::after { content: ""; position: absolute; left: var(--tip-arrow-x, 50%); transform: translateX(-50%); border: 5px solid transparent; } /* Arrow on the side facing the control. */ .lexical-tip.is-below::after { bottom: 100%; border-bottom-color: var(--color-dark); } .lexical-tip:not(.is-below)::after { top: 100%; border-top-color: var(--color-dark); } /* |============================================================================== | Full screen | | The native Fullscreen API drives this, the same way the home editor does it, | and the body class below is what both that and the iOS stand-in switch on. | Pinning the column to the viewport is what makes the stand-in convincing: the | page scrolls (there is copy under the editor), so without it "full screen" | would leave the reader wherever they happened to be. |============================================================================== */ body.tool-lexical-fullscreen { overflow: hidden; } body.tool-lexical-fullscreen .header, body.tool-lexical-fullscreen .footer { display: none; } body.tool-lexical-fullscreen .tool-lexical-page { position: fixed; inset: 0; z-index: 10000; height: 100vh; height: 100dvh; } /* | The bottom bar's copy of the theme picker. It is the one the narrow-viewport | block below switches on; on a wide window the toolbar carries the picker and | this one stays out of the way. */ .tool-lexical-bottom-bar #theme-toggle-tag-container { display: none; gap: 5px; } .tool-lexical-bottom-bar .theme-toggle-tag-heading { font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; text-transform: capitalize; color: var(--color-dark-yellow); } .tool-lexical-bottom-bar .theme-toggle-btns { display: flex; align-items: center; gap: 5px; } .tool-lexical-bottom-bar .theme-toggle-btn { width: 20px; height: 20px; padding: 0; border: 1px solid #908b76; border-radius: 4px; cursor: pointer; background-repeat: no-repeat; background-position: center; background-size: 10px 10px; } /* | Fixed fills, and !important on every one of them. | | These buttons name the theme they select in a `data-theme` attribute, and | darkMode.css carries a bare `[data-theme="dark"] { background-color: | var(--color-darkgray) !important }` — written for , but it matches any | element holding the attribute. So the dark chip was being painted #1E1F22 by | a rule meant for the page itself, on every theme. Only !important outranks | it; the home editor's picker solves the same collision the same way. */ .tool-lexical-bottom-bar .theme-toggle-btn.system-default-theme { background-color: #e5e1b8 !important; } .tool-lexical-bottom-bar .theme-toggle-btn.dark-theme { background-color: #000000 !important; } .tool-lexical-bottom-bar .theme-toggle-btn.light-theme { background-color: #ffffff !important; } .tool-lexical-bottom-bar .theme-toggle-btn.active { background-image: url("/web_assets/frontend/images/home/theme-active-icon.svg"); } .tool-lexical-bottom-bar .theme-toggle-btn.dark-theme.active { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1.5 5.35714L3.6 7.5L8.5 2.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* |============================================================================== | Narrow viewports | | The formatting strip loses its labels and its group rules and scrolls as a | row of icons, with a hairline thumb along its bottom edge standing in for a | scrollbar. The bottom bar becomes two rows: theme and the counters above, | the three file actions below. |============================================================================== */ @media (max-width: 1024px) { .toolbar-scroll { gap: 8px; } .editor-shell .toolbar .divider { display: none; } /* Icon and chevron only — none of the labels fit. */ .editor-shell .toolbar-item.font-family, .editor-shell .toolbar-item.block-controls { width: 56px; justify-content: center; } .editor-shell .toolbar-item.font-family .text, .editor-shell .toolbar .block-controls .dropdown-button-text, .editor-shell .toolbar-item.spaced .text { display: none; } /* The whole right-hand cluster is switched off in the design here — theme moves to the bottom bar, copy and download move to its icon row, and pop out and clear are dropped. */ .toolbar-actions { display: none; } /* The design's content box: 24px in from the left, 10px from the top and the right. The extra bottom padding is slack so the last line never sits against the bar. */ .editor-shell .ContentEditable__root { padding: 10px 10px 40px 24px; } .editor-shell .ContentEditable__placeholder { top: 10px; left: 24px; right: 10px; } /* 16/20 for body and 24/36 bold for headings, as specified. The editor otherwise inherits the playground's 1.7, which reads too airy at this width and pushes a third of the design's copy off the screen. The placeholder is included deliberately: it stands in for the first paragraph and overlays it, so on any other line height its glyphs sit off the line the caret is actually on. */ .editor-shell .ContentEditable__root .PlaygroundEditorTheme__paragraph, .editor-shell .ContentEditable__placeholder { line-height: 20px; } .editor-shell .ContentEditable__root .PlaygroundEditorTheme__h1 { line-height: 36px; font-weight: 700; } /* | The bottom bar's two rows: 30px of Blogs + theme + counters above, 40px of | five evenly spaced icons below. */ /* Scoped through the row so these outrank `button.…__item`, which carries a type selector and would otherwise keep the wide-only cells on screen. */ .tool-lexical-bottom-bar__row .tool-lexical-bottom-bar__wide-only, .tool-lexical-bottom-bar__row .tool-lexical-bottom-bar__spacer { display: none; } .tool-lexical-bottom-bar__row .tool-lexical-bottom-bar__narrow-only { display: flex; } /* Matched to the base rule's specificity, which scopes through the bar. */ .tool-lexical-bottom-bar .tool-lexical-bottom-bar__row--icons { display: flex; height: 40px; border-top: 1px solid var(--color-paper-light); } /* Blogs takes the slack so the counters stay against the right edge. */ .tool-lexical-bottom-bar__blogs { flex: 1; min-width: 0; align-items: center; padding: 5px 10px; border-left: 0; border-right: 1px solid var(--color-paper-light); color: var(--color-dark-yellow); text-decoration: none; } .tool-lexical-bottom-bar #theme-toggle-tag-container { display: flex; gap: 6px; padding: 5px 12px; border-left: 0; border-right: 1px solid var(--color-paper-light); } /* No room for the word "Theme:" beside the chips at this width. */ .tool-lexical-bottom-bar .theme-toggle-tag-heading { display: none; } .tool-lexical-bottom-bar__count { padding: 5px 10px; border-left: 0; } .tool-lexical-bottom-bar__count--words { border-right: 1px solid var(--color-paper-light); } /* Five equal cells, hairlines between but not at the outer edges. */ .tool-lexical-bottom-bar__icon-cell { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--color-paper-light); } .tool-lexical-bottom-bar__icon-cell:first-child { border-left: 0; } .tool-lexical-bottom-bar__icon-cell > button, .tool-lexical-bottom-bar__icon-cell > label { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 10px 15px; margin: 0; border: 0; background: none; cursor: pointer; } .tool-lexical-bottom-bar__icon-cell img { width: 20px; height: 20px; display: block; } /* The language list opens upwards — the bar is on the bottom edge. */ .tool-lexical-bottom-bar__language { position: relative; } .tool-lexical-bottom-bar__language-menu { display: none; position: absolute; bottom: 100%; left: 0; min-width: 140px; max-height: 50vh; overflow-y: auto; z-index: 20; background: var(--color-paper); border: 1px solid var(--color-paper-light); } .tool-lexical-bottom-bar__language.is-open .tool-lexical-bottom-bar__language-menu { display: block; } .tool-lexical-bottom-bar__language-menu a { display: block; padding: 8px 12px; font-size: 14px; line-height: 20px; color: var(--color-dark-yellow); text-decoration: none; } .tool-lexical-bottom-bar__language-menu a:hover, .tool-lexical-bottom-bar__language-menu a.active { background: var(--color-paper-light); } }