/* Visually hidden but exposed to assistive technology — the standard
clip-rect pattern. Used by the off-screen model-derived accessibility tree
(#a11yDocument, docs/67 row 9). */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* WCAG 2.4.1 (Level A). Arriving on the page, or returning from the ribbon,
used to mean tabbing past Search, Save, Properties, Settings, eight menus,
five ribbon tabs and the whole Home band — roughly 150 controls — before
reaching the document (docs/104 HF-074). #pages is already tabindex=0, so it
is a real tab target for the link to hand over to. Off-screen until focused,
then placed over the chrome so it is visibly the first stop. */
/* Hidden by CLIPPING, not by being parked 9,999px to the left. The old trick
made the page 11,279px wide the moment the interface went right-to-left —
`left: -9999px` measures from the RTL origin, so the document grew leftwards
and opened scrolled away from itself: an Arabic editor that painted a blank
window. Clipping takes no space in either direction (docs/124 §3.5). */
.skip-link {
position: absolute;
top: 0;
inset-inline-start: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
z-index: 100;
}
.skip-link:focus {
inset-inline-start: 8px;
top: 8px;
width: auto;
height: auto;
overflow: visible;
clip-path: none;
padding: 8px 12px;
border-radius: 6px;
background: var(--surface);
color: var(--ink);
outline: 2px solid var(--accent);
outline-offset: 1px;
}
/* The DOCUMENT is not the interface (docs/124 §3.5).
When the chrome goes right-to-left for an Arabic or Hebrew reader, these
surfaces do not follow: a left-to-right `.docx` is left-to-right whoever
opens it, and inheriting `rtl` here would reverse its punctuation, its list
markers, its table column order and the caret's idea of "next". Direction
inside a document belongs to that document's own `w:bidi`, applied per
paragraph by the renderer — never to the reader's locale. */
.page-wrap,
.page,
.ruler,
.pages-panel {
direction: ltr;
}
/* ---- Color contract (docs/104 theme T-08) ------------------------------------
Colour is defined in exactly two kinds of place, and nowhere else:
1. THIS theme-independent block — geometry, elevation, the settable accent,
and the "paper layer" (see below), none of which change with the theme.
2. The three palette blocks that follow — the light block and BOTH dark
entry points. Every semantic colour token is declared in all three.
Feature CSS below never writes a bare hex. A literal in a rule is a colour
with no dark value, which is how tracked-change text ended up at 2.4:1 on the
dark surface: the review chrome was written in light-mode Google hexes and
the dark blocks had no idea it existed. `tests/style_tokens.test.mjs` fails
the build on a bare hex outside these blocks, and on a token that is declared
in the light block but missing from either dark block — the duplication
between the two dark blocks is unavoidable in plain CSS (one lives inside a
media query), so the test is what keeps them in step. */
:root {
/* Redesign default accent — Studio blue. main.js also sets --accent inline
from persisted Settings, so this is the fallback/first-paint value.
`--accent` is the FILL: it keeps the user's chosen value in both themes,
because accent fills are read against `--accent-ink`, not against the
theme surface. `--accent-text` (per-theme, below) is the same accent as
foreground/edge on a theme surface, where a dark blue on a dark panel is
unreadable — use that one for `color:`, `border-color:` and `outline:`. */
--accent: #3355c4;
--accent-strong: color-mix(in srgb, var(--accent) 82%, var(--ink));
--accent-ink: #ffffff;
--accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
--accent-line: color-mix(in srgb, var(--accent) 42%, transparent);
/* ---- Paper layer ----------------------------------------------------------
The document sheet is white in BOTH themes — the editor themes its chrome,
not the page being authored. Anything painted onto or over the raster (the
caret, the IME preedit, crop handles, the review markers on the glyphs)
therefore has a fixed contrast partner and must NOT follow the theme: a
dark-mode green marker would be drawn onto white paper at ~2:1. These are
the paper's own colours, and they are deliberately theme-independent. */
--paper: #ffffff;
--paper-ink: #111318;
--paper-insert: #188038;
--paper-delete: #d93025;
--paper-comment: #c58b00;
/* The spelling squiggle. Declared HERE rather than in the three theme blocks
(as docs/114 §5.7 proposed) for the reason stated above: it is painted onto
the white sheet in both themes, so a dark-theme value would put a pale red
on white paper. It shares its value with --paper-delete because both are
"the platform's red on paper" — but it is its own token, because a squiggle
and a tracked deletion are not the same thing and one may move. */
--paper-spelling: #d93025;
/* The grammar mark. A different colour from the spelling one because
Word and Docs both distinguish them, and a reader has to be able to
tell "this word is misspelled" from "this sentence is wrong" without
opening a menu. Blue on white paper, in the paper layer for the same
reason as its neighbours. */
--paper-grammar: #1a73e8;
/* THE REFLOW SURFACE (docs/151 §6.2, corrected). In reflow there
is no page and therefore no desk: one background fills the writing surface
edge to edge and the measure is simply where the text is. Google renames
the control for exactly this reason — in Pages it is *Page color*, in
Pageless it is *Background color*, because there is one region rather than
two (support.google.com/docs/answer/10296604, first-party).
IT IS A MEMBER OF THE PAPER LAYER, NOT OF THE CHROME PALETTE, and that is
the load-bearing part rather than an implementation detail. The engine
fills a tile's raster with the document's own `w:background` — white by
default (`Surface::with_background`, `casual-doc-render`) — so the surface
the CSS paints has to be the same colour as the bitmap laid on top of it or
a seam appears at every tile edge. And everything painted ONTO that raster
(the caret, the IME preedit, the review markers, the fold chevron, the four
`--paper-*` marks above) is calibrated against white for the reason the
comment above gives. Declaring this as `var(--paper)` means the surface
cannot drift away from the ink that is drawn on it: carry one and the other
comes with it. `tests/style_tokens.test.mjs` asserts the two resolve equal.
So a reader on a dark theme gets a WHITE reflow surface, deliberately —
the chrome is themed, the document is not. A dark reading
surface is a real want and a separate piece of work, because it needs an
ink rule for author colours before it can be safe; ONLYOFFICE's HSL
lightness flip (`darkModeCorrectColor2`) is the prior art to study. Do not
redefine this token in a theme block without that rule. */
--paper-surface: var(--paper);
/* The document scroller's thumb, for when that scroller's track IS the paper
surface. This is the first thing the uniform surface broke and it is the
same defect the paper comment above was written about, one surface out:
`--scrollbar-thumb` is a CHROME token, so in dark theme it is
`rgba(232, 234, 237, 0.28)` — a near-white translucent thumb, which over a
white track is a scrollbar you cannot see. Same figures as the LIGHT
theme's, because the ground is the same near-white; held to that by
`tests/style_tokens.test.mjs` rather than by indirection, so the chrome
palette is not made to depend on the paper layer to say it. */
--paper-scrollbar-thumb: rgba(74, 78, 85, 0.3);
--paper-scrollbar-thumb-hover: rgba(74, 78, 85, 0.52);
/* ---- Stacking ladder ------------------------------------------------------
One ordered list for every body-level floating surface, so "what paints
over what" is answered here instead of by 27 scattered z-index values.
A modal is the top of the ladder by definition: while one is open it owns
the interaction, so nothing else may paint over it (docs/104 HF-089 — the
pinned tracked-change card used to float above the scrim with live
Accept/Reject buttons). Surfaces INSIDE the viewport (rulers, page chrome,
running-band markers) form their own local stacking contexts and keep their
small local values; they are not part of this ladder. */
--z-bar: 30;
--z-selection-toolbar: 40;
--z-link-chip: 45;
--z-drawer: 45;
--z-find: 55;
--z-menu: 60;
--z-submenu: 61;
--z-paste-options: 62;
--z-inspector: 65;
--z-review-popover: 66;
--z-review-card: 67;
--z-palette: 90;
/* The touch loupe. Above the floating selection bar and the link chip, which
it is meant to be read over, and below the modal layer: a dialog is the
only thing in front of the document and the magnifier is not an exception
to that (`105` UX-018). */
--z-magnifier: 95;
--z-modal: 100;
/* Above the modal, for the same reason the tooltip below is: the toast is a
`pointer-events: none` card that never receives input, so it cannot let a
user act on chrome a modal has taken control of — and a refusal raised BY a
dialog (a page-setup change Suggesting cannot track) has to be readable
while that dialog is still on screen. */
--z-toast: 110;
/* Above the modal on purpose, and the only thing that is: a tooltip is a
`pointer-events: none` hint that never receives input, so it cannot let a
user act on chrome the modal has taken control of. */
--z-tooltip: 1000;
/* Rounded shell, from the owner's prototype (Downloads/preview (1).html).
This SUPERSEDES the earlier near-square pass recorded in docs/63: the shell
reads as softly rounded rather than flat-gridded. 6px on controls keeps a
34px button in proportion; 8px on surfaces. Floating popovers keep a small radius so they still
detach from the surface (and #outlinePanel stays 10px, asserted by
shell-reference-polish.spec). */
--radius: 8px;
--radius-sm: 6px;
--radius-md: 8px;
/* Floating surfaces keep their own radius so they detach from the flat
canvas — and both are asserted by tests (#outlinePanel 10px in
shell-reference-polish; dialog cards 12px in header-menu). */
--radius-popover: 10px;
--radius-dialog: 12px;
--shadow-popover: 0 10px 34px rgba(20, 22, 28, 0.24);
--shadow-lg: 0 18px 48px rgba(20, 22, 28, 0.28);
/* Two layers, not one 30%-opacity slab: a tight contact shadow that seats the
card, plus a wide soft one for depth. The single heavy shadow read as a
drop-shadowed box from a decade ago, which is most of why the dialogs felt
heavier than the chrome around them. */
--shadow-dialog: 0 1px 2px rgba(20, 22, 28, 0.12), 0 16px 48px rgba(20, 22, 28, 0.18);
/* Named type, control-height, and icon grids from doc 69 §3.3/§4.1/§4.2.
Values preserve the existing shell except where the design explicitly
consolidates equivalent caption/icon roles. */
--fs-micro: 9px;
--fs-caption: 10px;
--fs-small: 12px;
--fs-body: 13px;
--fs-medium: 15px;
--fs-title: 16px;
--fs-ribbon-caption: 10.5px;
--fs-ribbon-tab: 13.5px;
--h-control: 30px;
--h-search: 34px;
--h-field: 36px;
/* The ribbon tab strip, now that it shares the header with the document
title. 28px is ONLYOFFICE's `@toolbar-height-tabs-top-title`
(`apps/common/main/resources/less/variables.less:104`) — the height they
use for exactly this arrangement, against 32px for a tab strip on a row of
its own. Ours was 34px on a row of its own; see docs/123 §3. */
--h-tab: 28px;
--h-rail-control: 50px;
--h-footer: 30px;
/* The band above the footer that the status toast owns, and that a
narrow-screen DRAWER therefore may not extend into (`109` HF-233).
The toast is pinned to the viewport's bottom-start corner and a drawer is
pinned to the whole right-hand side, so below the drawer breakpoint the two
fixed surfaces share the bottom edge and nothing arbitrates between them —
the toast lands on the drawer's footer ACTION, which is the one thing there
that a reader has to be able to see and press. Reserving the band is the
arbitration, and it is one rule for every drawer rather than a z-index
argument per panel: the toast keeps the corner, the drawer stops above it.
Reserved UNCONDITIONALLY rather than only while a toast is up, because a
drawer that grew and shrank as announcements came and went would move the
control under the reader's finger — a jump is worse than 56px.
56px is three lines of `--fs-small` at 1.45 plus the card's own padding and
border, which is the tallest a refusal gets before it wraps past what a
transient card should carry at all. A toast taller than that still grows
upward over the drawer's LIST, which is scrollable content and not a
control; the guarantee the guard holds is about the footer action. */
--h-toast-band: 56px;
/* The header is two bands now (see `.bar`): the document's title row over the
navigation row. 26 + 28 + 5 + 4 of padding = 63. It was 58 while the two
rows measured 24 + 28 + 9 = 61, so the chrome overflowed its own bar by 3px
and `align-items: center` hid the fact by splitting the difference. */
--h-header-title: 26px;
--h-header: 63px;
/* The ribbon band. Content-sized in reality, so this number has to be kept
honest by a test rather than by arithmetic; responsive-shell.spec.mjs
asserts the panels below actually clear the ribbon's measured bottom edge.
It was 92px while every group carried an uppercase caption under it;
deleting that row (docs/123 §4 — ONLYOFFICE's groups have no captions at
all) took the tallest band, Home, down to ~72px, which is within a couple
of pixels of their own 66px `@toolbar-height-controls`. */
--h-ribbon-band: 90px;
/* The compact toolbar's height — the prototype's --toolbar-h. Declared here
so `--chrome-bottom` and the bar itself read the same number. */
--h-compact-bar: clamp(38px, 3.4vh, 46px);
/* Chrome card: the ribbon band and the compact bar are the same object at
different densities, so they share one radius and one inset. Both scale —
a fixed 16px reads heavy on a small window and mean on a large one. */
--chrome-card-radius: clamp(10px, 1.1vw, 18px);
--chrome-card-inset-y: clamp(1px, 0.25vh, 4px);
/* ONE height for every ribbon band. It used to be whatever the tallest group
on the active tab happened to be — Home 79px (two control rows), Insert /
Layout / References 58px, Review / View 48px — so changing tab moved the
document up to 31px under the reader's cursor. Word and ONLYOFFICE both pin
the band and let the groups align inside it.
This is the two-control-row height the Home band needs, and it is a MINIMUM
rather than a fixed height on purpose: if Home ever grows a taller control,
the band grows with it and `ribbon-band-height.spec.mjs` fails until this
token is re-measured, rather than Home silently clipping. */
--ribbon-band-h: 90px;
/* The card inset is CONTENT WIDTH the band no longer has. The Home band needs
1254px of groups at 1280px, so the whole chrome overhead — this inset plus
the panel's own padding — has to stay under 26px or the overflow pass
exiles a group. The first version of this token cost 15.4px on its own and
put the band 9px over, which is how Styles ended up in the "⋯" menu on an
ordinary 1280px desktop. Keep it small at desktop widths and let it grow
only where there is width to spare. `webapp/tests/e2e/ribbon-home.spec.mjs`
guards the budget. */
--chrome-card-inset-x: clamp(2px, 0.3vw, 10px);
/* Dialog rhythm. One scale for every dialog and panel, so tightening the
density is one edit rather than thirty. The old values were a flat 18-20px
on head, body and foot alike, which made every dialog tall without making
any of it more legible. */
/* Dialog rhythm. These were declared and referenced NOWHERE — every dialog
hardcoded `18px var(--space-5) 14px` instead — so the responsive padding
the design called for never reached a pixel. They are wired into
.dialog-head/.dialog-body/.dialog-foot below, and `dialog_density`
fails if a dialog goes back to hardcoding its chrome padding. */
--dlg-pad-x: clamp(14px, 2.2vw, 22px);
--dlg-pad-y: clamp(10px, 1.4vh, 16px);
/* PANEL rhythm — the same mechanism as the dialog pair above, for the side
panels, which had no shared shell at all.
*
MEASURED, 2026-10-05, Chromium at 1280x720 and 1440x900, on this branch's
parent: `.panel-head` was `padding: 0 8px 0 14px` and `.panel-body` was
`padding: 6px`, so head and body disagreed by 8px in EVERY side panel —
Outline's title sat at x=101.09 over a body whose content box started at
93.09, Compare's title at 101.09 over its first paragraph at 93.09, Version
History's title at 967 over a body at 959. Five panels then overrode even
those (`.glyph-body` 10px, `.version-list` 4px 6px, the two properties
bodies 13px 14px 16px), so there were four insets in a family of nine
surfaces and the head/body step was different in each.
*
The values are not invented: they are what `.find-panel-head` and
`.find-panel-body` already used — `var(--space-2) var(--space-4)` — and the
find panel was the ONE panel whose head and body agreed. One pair, declared
here, is why 23 dialogs have 23 identical left edges; the panels now take
their inset the same way. `dialog_density.test.mjs` fails if a panel goes
back to hardcoding its chrome padding, and
`e2e/panel-alignment.spec.mjs` measures the result. */
--pnl-pad-x: var(--space-4);
--pnl-pad-y: var(--space-2);
/* The File page's reading measure (HF-265 D4). The pane is 960px wide at
1280 and 1600px at 1920 — it is a two-column backstage, not a card — and
the content inside it was capped at a flat 760px while the HEADING over
that content was not capped at all. Measured: the heading ran 152px past
its own column at 1280 and 792px past it at 1920, which is a title that
stops looking like it belongs to the thing under it.
The fix is the measure, not the alignment: the heading joins the column
rather than the column chasing the heading. Centring a 760px column inside
a pane that is CHOSEN FROM A LEFT NAV would put the content nowhere near
the row that opened it (ONLYOFFICE's backstage, Word's File page and Google
Docs' settings all left-align a measured column under a heading of the same
width), and letting the column grow to 1600px is the "a four-field dialog as
wide as a twenty-field one" defect this stylesheet already names. One token,
read by the heading, the blurb and the pane, so the three cannot drift. */
--file-page-measure: 760px;
/* Bottom edge of the fixed shell chrome: header bar (which now carries the
tab strip) + ribbon band. Anything that floats over the workarea from a viewport-fixed
position anchors to THIS, never to a literal, so the ribbon's right-hand
group and its "⋯" overflow button can never end up underneath a panel
(HF-084). Redefined below for the collapsed ribbon, where the band is gone. */
--chrome-bottom: calc(var(--h-header) + var(--h-ribbon-band));
--icon-compact: 16px;
--icon-control: 18px;
--icon-rail: 20px;
/* The dialog width scale. Four rungs, and the fourth is here because
`.settings-dialog` had already invented it in raw pixels (960px) while
`--dialog-width-wide` was declared and referenced nowhere — a scale with a
dead rung and an undeclared one is not a scale. `dialog_density.test.mjs`
now fails on ANY unused token in this family rather than on a two-name
list, which is what let the dead rung sit here. */
--dialog-width-compact: 380px;
--dialog-width-standard: 640px;
--dialog-width-wide: 760px;
--dialog-width-xwide: 960px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
}
/* Light palette (default + explicit). */
:root,
:root[data-theme="light"] {
/* Warm "Studio" light palette from the approved editor redesign: paper-white
canvas (#FBFAF8), quiet stone surfaces (#F2F1ED), warm-grey hairlines
(#EDEBE6 / #DEDBD4), and graphite ink (#14161A). Everything downstream is
tokenized, so this single block re-skins the whole chrome. */
/* Google-Docs-family cool greys, from the owner's prototype. The previous
scale was a WARM cream (#fbfaf8 / #f2f1ed / #edebe6) which read bright and
flat and looked nothing like Docs.
Regions separate by SHADE, not by hairline: canvas is the darkest, chrome
and panels are white on top of it, and the page is white against the darker
canvas so it reads as paper. Borders are a last resort, not the mechanism. */
--bg: #eef1f7; /* app chrome strip — the header/toolbar band */
--bg-2: #f4f6fb; /* sunken panes and the toolbar pill */
--surface: #ffffff; /* panels, dialogs, dropdowns, the page */
--surface-alt: #f4f6fb;
--ink: #1f1f1f;
/* Like their dark counterparts, --muted and --faint are pinned to clear WCAG
AA (4.5:1) against the darkest surface they are painted on — here --bg-2,
not --surface. --faint was #6f747c, which passes on white (4.70:1) and fails
on --bg-2 (4.16:1), so the search box's "⌘⇧P" hint and the footer's "Mode"
label were the two places it showed. Guarded by theme-contrast.spec.mjs. */
--muted: #5f6368;
/* --faint was #8a8e95 = 3.29:1 on --surface, below the 4.5:1 body-text floor,
and it is the colour of every menu shortcut hint and empty state — the prose
a first-time user needs most (docs/104 HF-093). #6f747c measures 4.70:1 on
--surface and 4.51:1 on --bg. */
/* #686b70 is the LIGHTEST value that still clears AA (4.5:1) on the darkest
surface it is painted on — the #eceef1 canvas, where it measures 4.60:1.
The prototype's own #747775 measures 3.90:1 there and would fail. */
--faint: #686b70;
--line: #e3e8f1;
--line-strong: #cfd6e4;
--scrollbar-thumb: rgba(74, 78, 85, 0.3);
--scrollbar-thumb-hover: rgba(74, 78, 85, 0.52);
--shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.05);
--shadow-page: 0 1px 3px rgba(20, 22, 26, 0.12), 0 10px 30px rgba(20, 22, 26, 0.09);
/* Graphite primary action (redesign): the mock's "Open" / "Save .docx" /
"Apply" buttons are solid ink, not the tinted accent. Kept theme-aware so
dark mode gets an inverse (light) primary instead of an unreadable dark one. */
--primary-bg: #14161a;
--primary-bg-hover: #2c2f35;
--primary-ink: #fbfaf8;
/* The accent as foreground/edge on a theme surface. Identical to the fill in
light mode; the dark blocks mix it toward white so a user-chosen accent
cannot land unreadable on a dark panel however dark they picked it. */
--accent-text: var(--accent);
/* Semantic status colours. `-line` is the border/edge weight (3:1 UI bar),
`-soft` the tinted background. Measured against --surface. */
--success: #137333;
--success-line: #188038;
--success-soft: color-mix(in srgb, var(--success-line) 12%, var(--surface));
--warning: #b06000;
--warning-line: #f9ab00;
--warning-soft: color-mix(in srgb, var(--warning-line) 16%, var(--surface));
--danger: #b3261e;
--danger-line: #d93025;
--danger-soft: color-mix(in srgb, var(--danger-line) 12%, var(--surface));
--info: #1a56c4;
--info-line: #1a73e8;
--info-soft: color-mix(in srgb, var(--info-line) 12%, var(--surface));
/* Review roles. Insertion/deletion/replacement reuse the status ramp so a
tracked change reads the same as any other affirmative/destructive signal;
move and formatting need their own hues to stay distinguishable from it. */
--review-insert: var(--success);
--review-insert-line: var(--success-line);
--review-insert-soft: var(--success-soft);
--review-delete: var(--danger);
--review-delete-line: var(--danger-line);
--review-delete-soft: var(--danger-soft);
--review-replace-line: var(--info-line);
--review-format-line: #9334e6;
--review-move: #0b8043;
color-scheme: light;
}
/* Dark palette — via system pref (only when no explicit theme) or explicit
choice.
`--muted` and `--faint` are pinned to clear WCAG AA (4.5:1) against
`--surface-alt`, the darkest surface either one is painted on. They used to be
#969ba3/#8b9199, which measured 4.42:1 under the ribbon's group captions —
UNDO, CLIPBOARD, FONT, PARAGRAPH, STYLES, EDITING, MODE. Nine-pixel text
failing AA is not a rounding error: those captions are the smallest type in
the product and they were the labels telling you what the toolbar groups are.
The light palette passed, so only dark was affected, which is why it read as
"dark mode is broken in the toolbar" rather than as a palette bug.
`tests/e2e/theme-contrast.spec.mjs` measures this on the live ribbon in both
themes, so re-darkening either token fails the build.
The two blocks below are byte-identical on purpose and MUST stay so:
a user who picks Dark on a light OS gets only the second one, which is how
half the theme used to be missing for them (docs/104 HF-092). Plain CSS
cannot share one declaration list across a media query and a bare selector,
so `tests/style_tokens.test.mjs` asserts the two agree instead. Add a token
to one and the test fails until it is in the other, and in the light block. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--bg: #141619;
--bg-2: #191c20;
--surface: #212429;
--surface-alt: #282c31;
--ink: #e8eaed;
--muted: #a8aeb6;
--faint: #9aa0a8;
--line: #2e323a;
--line-strong: #383d46;
--scrollbar-thumb: rgba(232, 234, 237, 0.28);
--scrollbar-thumb-hover: rgba(232, 234, 237, 0.5);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-page: 0 1px 3px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
--primary-bg: #e8eaed;
--primary-bg-hover: #ffffff;
--primary-ink: #16181c;
--accent-text: color-mix(in srgb, var(--accent) 58%, #ffffff);
--success: #81c995;
--success-line: #5bb974;
--success-soft: color-mix(in srgb, var(--success-line) 20%, var(--surface));
--warning: #fdd663;
--warning-line: #e0b25c;
--warning-soft: color-mix(in srgb, var(--warning-line) 20%, var(--surface));
--danger: #f28b82;
--danger-line: #ee675c;
--danger-soft: color-mix(in srgb, var(--danger-line) 20%, var(--surface));
--info: #8ab4f8;
--info-line: #669df6;
--info-soft: color-mix(in srgb, var(--info-line) 20%, var(--surface));
--review-insert: var(--success);
--review-insert-line: var(--success-line);
--review-insert-soft: var(--success-soft);
--review-delete: var(--danger);
--review-delete-line: var(--danger-line);
--review-delete-soft: var(--danger-soft);
--review-replace-line: var(--info-line);
--review-format-line: #d7aefb;
--review-move: #6dd58c;
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--bg: #141619;
--bg-2: #191c20;
--surface: #212429;
--surface-alt: #282c31;
--ink: #e8eaed;
--muted: #a8aeb6;
--faint: #9aa0a8;
--line: #2e323a;
--line-strong: #383d46;
--scrollbar-thumb: rgba(232, 234, 237, 0.28);
--scrollbar-thumb-hover: rgba(232, 234, 237, 0.5);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-page: 0 1px 3px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
--primary-bg: #e8eaed;
--primary-bg-hover: #ffffff;
--primary-ink: #16181c;
--accent-text: color-mix(in srgb, var(--accent) 58%, #ffffff);
--success: #81c995;
--success-line: #5bb974;
--success-soft: color-mix(in srgb, var(--success-line) 20%, var(--surface));
--warning: #fdd663;
--warning-line: #e0b25c;
--warning-soft: color-mix(in srgb, var(--warning-line) 20%, var(--surface));
--danger: #f28b82;
--danger-line: #ee675c;
--danger-soft: color-mix(in srgb, var(--danger-line) 20%, var(--surface));
--info: #8ab4f8;
--info-line: #669df6;
--info-soft: color-mix(in srgb, var(--info-line) 20%, var(--surface));
--review-insert: var(--success);
--review-insert-line: var(--success-line);
--review-insert-soft: var(--success-soft);
--review-delete: var(--danger);
--review-delete-line: var(--danger-line);
--review-delete-soft: var(--danger-soft);
--review-replace-line: var(--info-line);
--review-format-line: #d7aefb;
--review-move: #6dd58c;
color-scheme: dark;
}
* {
box-sizing: border-box;
}
/* Baseline keyboard-focus ring (docs/104 HF-067). Anything the chrome styles
explicitly still wins on specificity; this only guarantees that a control
nobody remembered to style is never focused invisibly. Deliberately
`:focus-visible`, so a pointer click does not paint a ring. */
:focus-visible {
outline: 2px solid var(--accent-text);
outline-offset: 1px;
}
/* ---- Scrollbars: one thin, quiet, overlay-style treatment everywhere --------
Per the doc 63 design system, every `overflow:auto` surface (the single
document scrollbar on `.viewport`, plus dialog bodies, menus, the command
list, and side panels) shares one minimal bar: a transparent track and a
translucent thumb that darkens on hover. Applied globally so no default
chunky OS bar leaks through, then reinforced on the known scroll surfaces. */
* {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) transparent;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border: 2px solid transparent;
border-radius: 8px;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
background-clip: padding-box;
}
::-webkit-scrollbar-corner {
background: transparent;
}
html,
body {
margin: 0;
height: 100%;
/* The shell is a FRAME, not a page. Nothing here overflows — the header, the
band, the work area and the status bar are a flex column that fits, and
`#viewport` does all the scrolling — but `overscroll-behavior: auto` still
lets the browser rubber-band the ROOT when a gesture starts over a part
that cannot scroll. The owner's report: dragging on the header or the
toolbar moved the whole frame and it sprang back on release. Nothing that
is not a scroller should move under a scroll. */
overscroll-behavior: none;
}
body {
display: flex;
flex-direction: column;
/* `--brand-font` is a white-label seam (docs/126 phase 3): a host names a face
they placed NEXT TO the editor and `src/brand.css` declares an @font-face for
it. Never a CDN — `src/fonts.css` self-hosts Inter and Material Symbols and
`tests/chrome_fonts.test.mjs` asserts no remote font reference, because the
chrome has to paint with the network off. Our own stack stays behind it, so a
face that fails to load leaves readable chrome rather than a system serif. */
font:
var(--fs-body)/1.5 var(--brand-font, "Inter"), -apple-system, BlinkMacSystemFont, "SF Pro Text",
"Segoe UI", Roboto, sans-serif;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
button,
select,
input {
font: inherit;
}
/* ---- Header bar ------------------------------------------------------------ */
/* TWO BANDS, Google Docs' arrangement: row 1 is the document (title + state),
row 2 is the application (navigation + how it is presented). Word splits the
same way — a title bar over the ribbon row, with Ribbon Display Options on
the ribbon row, not beside the filename.
It was one flex row, so `.controls` centred itself over BOTH bands at once
and the state chip, the toolbar-mode toggle, the finding count and the two
icon buttons all landed on a line that belonged to neither. The grid puts
each control in the band that owns it, and `.document-chrome` / `.controls`
are `display: contents` so their children place into these rows directly. */
.bar {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-rows: var(--h-header-title) var(--h-tab);
grid-template-areas:
"brand title docstate"
"brand nav apptools";
align-items: center;
column-gap: 12px;
height: var(--h-header);
padding: 5px 14px 4px;
/* Same grey as the toolbar, status bar and desk — one field, separated from
the page by SHADE rather than by a rule. */
background: var(--bg);
border-bottom: 0;
box-shadow: none;
z-index: var(--z-bar);
}
/* Visible ⌘K entry point (doc 69 §1.4.1/§1.2) — the palette itself already
existed and worked; it only lacked a discoverable trigger. Wired to the
same openCmd() the keyboard shortcut calls, in main.js. */
.search-trigger {
display: flex;
align-items: center;
gap: 8px;
height: var(--h-search);
padding: 0 10px;
margin-left: 6px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--muted);
cursor: pointer;
flex: 0 1 240px;
min-width: 0;
}
.search-trigger:hover {
background: var(--bg-2);
border-color: var(--muted);
}
.search-trigger .ms {
flex: 0 0 auto;
font-size: var(--icon-compact);
}
.search-trigger .search-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
font-size: var(--fs-body);
}
.search-trigger kbd {
flex: 0 0 auto;
font: 600 var(--fs-caption)/1 inherit;
color: var(--faint);
background: var(--bg-2);
border-radius: 4px;
padding: 2px 6px;
}
.brand {
grid-area: brand;
display: flex;
align-items: center;
gap: 9px;
flex: 0 0 auto;
min-width: 0;
}
.brand .mark {
font-weight: 700;
font-size: var(--fs-medium);
letter-spacing: -0.02em;
}
/* The brand mark. Painted from a TOKEN rather than from an ``, so a
white-labelled deployment changes it in `brand.json` and regenerates
`src/brand.css` — no markup edit, which is what `docs/126` phase 3's "no code
changes" gate means in practice. The `var()` carries our own mark as its
fallback so a deployment WITHOUT `brand.css` still shows a mark rather than an
empty box, and so `style.css` does not read a token it never defines
(`tests/style_tokens.test.mjs`). */
/* The mark as a link back to the host's product (ONLYOFFICE
`customization.logo.url`). Generated only when `brand.json` names a `markHref`,
and it carries the product name in `.sr-only` text rather than on an
`aria-hidden` wrapper — a focusable node inside `aria-hidden` is the axe
violation the repository forbids outright. */
.brand-logo-link {
display: block;
line-height: 0;
border-radius: var(--radius);
}
.brand-logo-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.brand-logo {
display: block;
width: 26px;
height: 26px;
background-image: var(--brand-mark, url("../opendoc-mark.svg"));
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* Both wrappers dissolve into `.bar`'s grid: each child places itself into the
band that owns it. They stay in the DOM because scripts and the embedding
classes address them by class. */
.controls,
.document-chrome {
display: contents;
}
.controls-doc,
.controls-app {
display: flex;
align-items: center;
gap: 8px;
justify-self: end;
min-width: 0;
}
.controls-doc {
grid-area: docstate;
}
.controls-app {
grid-area: apptools;
}
/* `[hidden]` has to beat `display: contents`, and it has to take the children
with it — which `display: none` on the contents box does. */
.document-chrome[hidden] {
display: none;
}
.document-title-row {
grid-area: title;
display: flex;
align-items: center;
min-width: 0;
height: var(--h-header-title);
gap: 7px;
}
.document-state {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
gap: 4px;
padding: 1px 7px 1px 5px;
border: 1px solid var(--line);
border-radius: 3px;
background: var(--surface-alt);
color: var(--muted);
font-size: var(--fs-small);
white-space: nowrap;
}
.document-state .ms {
font-size: var(--icon-compact);
}
.document-state[data-state="edited"] {
color: var(--accent-strong);
}
.document-state[data-state="downloaded"] {
color: var(--success);
}
/* The bar scrolls horizontally with its scrollbar suppressed, so when the
header ran out of room the trailing menus (Tools, Help) were cut off mid-row
with no fade, no chevron and no bar — they simply were not there, and nothing
said they existed (HF-097). The trailing mask makes the clip legible: it
fades whatever is cut instead of slicing it, which is the standard "there is
more this way" cue for a hidden-scrollbar strip. It costs no height, which
matters because the 58px header band is fully committed — a visible scrollbar
would have to come out of the menu row itself.
It is self-revealing rather than always-on: the bar is a flex box that fills
`.document-chrome`, so when every menu fits, the last 22px are empty and the
fade falls on nothing. This is the affordance half only; collecting the
overflow into a "⋯" button the way the ribbon does needs the measuring pass
in main.js (`updateRibbonOverflow`), which is not a stylesheet change. */
.app-menu-bar {
grid-area: nav;
display: flex;
align-items: center;
min-width: 0;
height: 21px;
margin-left: 1px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(to right, black calc(100% - 22px), transparent);
mask-image: linear-gradient(to right, black calc(100% - 22px), transparent);
}
.app-menu-bar::-webkit-scrollbar {
display: none;
}
.app-menu-button {
flex: 0 0 auto;
height: 21px;
padding: 1px 7px;
border: 0;
border-radius: 4px;
background: transparent;
color: var(--ink);
font-size: var(--fs-body);
line-height: 19px;
cursor: pointer;
}
.app-menu-button:hover,
.app-menu-button[aria-expanded="true"] {
background: var(--bg-2);
}
/* HF-067: hover and keyboard focus used to share this one 1.13:1 background
change, so arrowing across File/Edit/View — the app's primary command
surface — showed nothing at all. Focus is a ring, hover is a tint; they are
different states and now read as different states. */
.app-menu-button:focus-visible {
background: var(--bg-2);
outline: 2px solid var(--accent-text);
outline-offset: -1px;
}
/* ---- Buttons --------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: var(--h-control);
padding: 0 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--line-strong);
background: var(--surface);
color: var(--ink);
font-weight: 550;
cursor: pointer;
white-space: nowrap;
transition: background 0.12s, border-color 0.12s, opacity 0.12s;
}
/* Unified icon grid (doc 69 §4.2): header/menu icons are 18px, matching
.fmt's ribbon icons instead of a separate 17px size. */
.btn .ms {
font-size: var(--icon-control);
}
.btn:hover:not(:disabled) {
background: var(--bg-2);
border-color: var(--muted);
}
.btn:disabled {
opacity: 0.45;
cursor: default;
}
.btn-primary {
background: var(--primary-bg);
border-color: var(--primary-bg);
color: var(--primary-ink);
}
.btn-primary:hover:not(:disabled) {
background: var(--primary-bg-hover);
border-color: var(--primary-bg-hover);
}
.btn.icon-only {
width: 30px;
padding: 0;
justify-content: center;
}
.save-format {
height: var(--h-control);
max-width: 132px;
padding: 0 26px 0 9px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--ink);
cursor: pointer;
}
.save-format:hover:not(:disabled) {
background: var(--bg-2);
border-color: var(--muted);
}
.save-format:disabled {
opacity: 0.45;
cursor: default;
}
/* A neutral status CHIP, the same object as `.document-state` beside it — not
accent-blue prose. As bare blue text with no container this was the loudest
thing in the chrome ("185 import findings") and read as an unexplained error;
Word's and Docs' conversion notices are neutral status, and the count is
reassurance that loss was DETECTED, not a failure. Same shape as its
neighbour so the two read as one cluster of document state. */
.compatibility-status {
display: inline-flex;
align-items: center;
flex: 0 1 auto;
max-width: 170px;
padding: 1px 7px;
border: 1px solid var(--line);
border-radius: 3px;
background: var(--surface-alt);
overflow: hidden;
color: var(--muted);
font-size: var(--fs-small);
text-overflow: ellipsis;
white-space: nowrap;
}
/* `hidden` is a UA `display: none`, and the author `display` above beats it, so a
clean document's chip painted as an empty 16x4 bordered box. As a BUTTON that
would be a focusable control with nothing to say, so the attribute is honoured
here explicitly. */
.compatibility-status[hidden] {
display: none;
}
/* It opens the findings, so it reads as something to press. */
button.compatibility-status {
cursor: pointer;
}
button.compatibility-status:hover {
border-color: var(--line-strong);
color: var(--ink);
}
/* The findings dialog (`compat_findings.mjs`): one section per kind of outcome,
one compact row per finding. A feature id is a technical token and may be long,
so it wraps anywhere rather than pushing the card wider. */
.findings-group + .findings-group {
margin-top: var(--space-4);
}
.findings-group-title {
margin: 0 0 var(--space-2);
font-size: var(--fs-body);
font-weight: 600;
}
.findings-total {
color: var(--muted);
font-weight: 400;
font-variant-numeric: tabular-nums;
}
.findings-list {
margin: 0;
padding: 0;
list-style: none;
}
.findings-row {
display: flex;
flex-wrap: wrap;
gap: 0 var(--space-3);
align-items: baseline;
padding: 2px 0;
}
/* What the finding IS, in words (`109` FID-AT-05) — the row's primary text. */
.findings-name {
min-width: 0;
overflow-wrap: anywhere;
}
/* The engine's stable id, kept for support and read last: muted and smaller,
so it is findable without competing with the words. */
.findings-feature {
min-width: 0;
color: var(--muted);
font-size: var(--fs-caption);
overflow-wrap: anywhere;
}
.findings-count,
.findings-where {
color: var(--muted);
font-size: var(--fs-small);
font-variant-numeric: tabular-nums;
}
.findings-where {
overflow-wrap: anywhere;
}
.findings-note {
margin: 0 0 var(--space-2);
color: var(--muted);
font-size: var(--fs-small);
}
/* Word's own bookkeeping: a real disclosure inside its kind group, collapsed
until asked. A full-width row so the whole line is the target; 44px under a
coarse pointer, the touch floor every other row in this editor keeps. */
.findings-bookkeeping {
margin-top: var(--space-2);
}
.findings-disclosure {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
min-height: 28px;
padding: 2px var(--space-1);
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--ink);
font: inherit;
text-align: start;
cursor: pointer;
}
.findings-disclosure:hover {
background: var(--accent-soft);
}
.findings-disclosure:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.findings-disclosure .ms {
flex: 0 0 auto;
color: var(--muted);
font-size: 18px;
line-height: 1;
}
/* `chevron_right` points the way the row reads; in a right-to-left locale that
is left. */
.findings-disclosure:dir(rtl)[aria-expanded="false"] .ms {
transform: scaleX(-1);
}
.findings-bookkeeping-total {
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.findings-bookkeeping-panel {
padding-inline-start: calc(18px + var(--space-2) + var(--space-1));
}
.findings-bookkeeping-panel[hidden] {
display: none;
}
@media (pointer: coarse) {
.findings-disclosure {
min-height: 44px;
}
}
.file {
position: relative;
}
.doc-title {
font: inherit;
font-size: var(--fs-body);
font-weight: 550;
color: var(--ink);
width: auto;
max-width: 300px;
min-width: 0;
flex: 1 1 auto;
padding: 3px 6px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: text;
}
.doc-title:hover {
background: var(--bg-2);
}
.doc-title:focus {
outline: none;
cursor: text;
background: var(--surface);
border-color: var(--accent-text);
box-shadow: 0 0 0 2px var(--accent-soft);
text-overflow: clip;
}
.app-menu-popover {
position: fixed;
z-index: var(--z-menu);
width: min(286px, calc(100vw - 16px));
max-height: min(560px, calc(100vh - var(--h-header) - 16px));
padding: 6px;
overflow-y: auto;
border: 1px solid var(--line-strong);
border-radius: var(--radius-popover);
background: var(--surface);
box-shadow: var(--shadow-popover);
overscroll-behavior: contain;
}
.app-menu-popover[hidden] {
display: none;
}
.app-menu-item,
.app-menu-item-parent {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
width: 100%;
min-height: 31px;
padding: 5px 9px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--ink);
text-align: left;
cursor: pointer;
}
/* A band folded behind one row. The flyout is positioned against the wrapper,
which is why the wrapper is the positioned box and not the popover: a flyout
anchored to the popover would have to know the row's offset, and the row
already knows it. */
.app-menu-item-submenu {
position: relative;
}
/* The chevron sits in the row's trailing column — the same slot a shortcut
occupies, so a menu of mixed rows keeps one right edge. */
.app-menu-item-chevron {
color: var(--muted);
font-size: var(--fs-small);
line-height: 1;
}
.app-menu-item-parent[aria-expanded="true"] {
background: var(--surface-alt);
}
/* FIXED, not absolute. The popover scrolls (`overflow-y: auto`), and an
overflow container clips on BOTH axes — so an absolutely positioned flyout at
`left: 100%` was cut off at the popover's right edge. Measured: the popover
ended at x=562 and the flyout ran 555..735, so 173px of it simply was not
painted, while `hidden` was correctly false the whole time. Fixed positioning
takes it out of that context; `command_menu.mjs` places it against its
parent row. */
.app-menu-item-flyout {
position: fixed;
z-index: var(--z-menu);
width: max-content;
min-width: 180px;
max-width: min(286px, calc(100vw - 16px));
max-height: min(420px, calc(100vh - var(--h-header) - 16px));
padding: 6px;
overflow-y: auto;
border: 1px solid var(--line-strong);
border-radius: var(--radius-popover);
background: var(--surface);
box-shadow: var(--shadow-popover);
overscroll-behavior: contain;
}
.app-menu-item-flyout[hidden] {
display: none;
}
/* ON A PHONE A SUBMENU DRILLS, IT DOES NOT FLY OUT.
The menus are bottom sheets at this width (`docs/148`), and a sideways
flyout in a sheet is either off-screen or a horizontal scroller — and no
horizontal scrolling is the property that layout is guarded on. So the
flyout opens INLINE beneath its parent, indented, which is the same shape a
phone settings screen uses. */
@media (max-width: 620px) {
.app-menu-item-flyout {
position: static;
width: auto;
min-width: 0;
max-width: none;
max-height: none;
margin: 2px 0 2px 12px;
padding: 2px 0 2px 8px;
border: 0;
border-left: 1px solid var(--line);
border-radius: 0;
box-shadow: none;
background: transparent;
}
.app-menu-item-parent[aria-expanded="true"] .app-menu-item-chevron {
transform: rotate(90deg);
}
.app-menu-item-chevron {
display: inline-block;
transition: transform 0.12s ease;
}
}
.app-menu-item:hover:not(:disabled),
.app-menu-item-parent:hover {
background: var(--bg-2);
}
.app-menu-item:focus-visible,
.app-menu-item-parent:focus-visible {
background: var(--accent-soft);
outline: 2px solid var(--accent-text);
outline-offset: -2px;
}
.app-menu-item:disabled {
color: var(--faint);
cursor: default;
}
.app-menu-item-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-menu-item-hint {
margin-left: 18px;
color: var(--muted);
font-size: var(--fs-small);
white-space: nowrap;
}
.app-menu-item:disabled .app-menu-item-hint {
color: var(--faint);
}
/* A band of related rows. It was a `.app-menu-separator` div between runs of
* rows; it is now the rows' own container, so the band has a name a screen
* reader can announce and the rule is the container's top edge rather than an
* element that exists only to be a line (`command_menu.mjs` says why the group
* won over the separator). Same 1px in the same token — no visual change to
* the hairline itself, only to what it is drawn ON. */
.app-menu-item-group + .app-menu-item-group {
margin-top: 5px;
padding-top: 5px;
border-top: 1px solid var(--line);
}
/* The compact bar's Table dropdown renders the SAME bands from the SAME
* declaration, so it gets the same rule. `.menu-group` rather than a
* table-specific class: the next dropdown built out of `APP_MENU_SECTIONS`
* inherits it without a second stylesheet block. */
.menu-group + .menu-group {
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid var(--line);
}
/* ---- Settings dialog ------------------------------------------------------ */
/* It was a popover anchored to the header's gear, and it grew past the height
* of the window as settings were added — spelling and grammar were the last
* two — so Reset and the autosave controls were unreachable and scrolling it
* scrolled the document behind. The owner's report: "its height exceed .. so
* that panel doesnt makes any sense now .. even for compact view .. see dialog
* instead". Google Docs' Preferences and Word's Options are both modal
* dialogs. It is one now, in the shared `.dialog-overlay` shell, so it inherits
* the scrim, the scroll containment and the one modal contract — and the shape
* the File page already knows how to borrow. */
/* Wide enough for two columns of settings; see `.settings-body`. It was 520px
and one column, which put 779px of content into 542px of body — the worst
overflow of any dialog here, and the 237px below the fold held Autosave and
both proofing toggles.
Qualified by `.dialog-card` on purpose: that rule is declared LATER in this
file at the same specificity, so a bare `.settings-dialog { width }` loses to
its 640px and the card silently comes out narrower than it asks for — which
is also why the previous value here was expressed as `max-inline-size`. At
640 the reviewer-identity pair no longer fits side by side and stacks, so
this is load-bearing rather than cosmetic. */
/* Wide enough for THREE columns, which is what keeps every section above the
fold.
*
* At 720px the `column-width: 17rem` track below fits exactly two columns, so
* the body's height is half the total content — and when the measurement-units
* section arrived (105px plus its 20px group margin) that half grew past the
* card's own box: 571px of content in a 560px body at 1280x720, which
* `dialog-fit.spec.mjs` fails by 11px. The body already scrolls, so nothing was
* unreachable, but that guard asserts something stronger and correct — a
* settings dialog that hides a section below a fold is one nobody discovers.
*
* Three columns rather than a taller card or a trimmed section: the comment
* below already says the point of the multi-column flow is to put more than one
* topic in view at once, and the 720px cap was the only thing holding it to
* two. 960px fits 3x17rem plus two gaps inside the padding, still leaves a
* margin either side of a 1280px laptop, and collapses to two columns and then
* one on narrower viewports with no breakpoint enumerated — the same mechanism,
* one number changed. */
/* `--dialog-width-xwide`, not a fourth raw pixel value (HF-265 D8). 960 was
* already the widest card in the product while `--dialog-width-wide` sat
* declared and unused — so the scale had a dead rung and this dialog had an
* unnamed one. Same number, stated in the scale. */
.dialog-card.settings-dialog {
width: min(var(--dialog-width-xwide), 100%);
max-inline-size: min(100%, var(--dialog-width-xwide));
}
/* Six topics, read down one column then down the next.
*
* Every section here is a heading plus one short control — a three-button
* segmented, seven 26px swatches, one select — so a single column spent its
* height on headings and left 250-280px of every row empty beside the control
* that row exists for. Word's Options answers the same problem with a category
* rail and Google Docs' Preferences with a much tighter list; both put more than
* one topic in view at once, which is the part that matters.
*
* Multi-column rather than a grid, and it is the mechanism `.shortcuts-body`
* already uses for the same shape: a grid equalises row heights, so pairing a
* 54px Accent with a 129px Reviewer identity would pay 75px for the privilege.
* Columns flow instead, so each section is only as tall as it is.
*
* `column-count: 2` is a CEILING, not a target — the used count is the smaller
* of it and what `column-width` fits, so this is one column on a phone and two
* in the File page's wide pane, with no breakpoint enumerated. The width is in
* `rem` and not `vw`: this card is 720px whatever the viewport is, so a
* viewport-relative track would silently fall back to one column on a large
* monitor — the opposite of what it reads like. */
.settings-body {
column-count: 2;
column-width: 17rem;
column-gap: clamp(20px, 2.4vw, 32px);
}
/* A setting and its own note must not be split across the column break. */
.settings-section {
break-inside: avoid;
}
/* 20px between groups, the same figure `.page-setup-fields` and
`.watermark-body` already use, so a group boundary is one distance in every
dialog. 14px was close enough to the 8px heading gap that a heading floated
between the group above it and the group it names. */
.settings-section {
margin-bottom: var(--space-5);
}
/* Settings had its OWN heading style — 10px, 700, uppercase, `--faint` — while
every other dialog names a group with `.dialog-group legend` at 13px/650 in
`--ink`. Two consequences, both visible in a screenshot: Settings did not
look like Page setup sitting next to it, and inside Settings the group
heading "REVIEWER IDENTITY" was SMALLER and fainter than the field labels
"Name" and "Initials" underneath it — the hierarchy inverted. It is the
shared group heading now; see `.dialog-group legend`. (The uppercase micro
label survives where it means something different: `.bookmark-list-head` and
`.shortcuts-group h3` mark sections of a LIST, not groups of a form.) */
.settings-label,
.dialog-group legend,
.metadata-section h3,
.metadata-disclosure summary {
margin: 0 0 var(--space-2);
padding: 0;
color: var(--ink);
font-size: var(--fs-body);
font-weight: 650;
letter-spacing: normal;
text-transform: none;
}
.segmented {
display: flex;
gap: 2px;
padding: 3px;
background: var(--bg-2);
border-radius: 9px;
}
.segmented button {
flex: 1;
height: 28px;
border: none;
border-radius: 6px;
background: transparent;
color: var(--muted);
font-weight: 550;
cursor: pointer;
}
/* Both spellings: a segmented control is a toggle set (aria-pressed) except
where the choices are mutually exclusive, which makes it a radio group
(aria-checked) — the Theme control is the latter, per docs/104 HF-070. */
.segmented button[aria-pressed="true"],
.segmented button[aria-checked="true"] {
background: var(--surface);
color: var(--ink);
box-shadow: var(--shadow-sm);
}
/* A segmented control laid out as a column, for a radio group whose options are
sentences rather than words — Restrict Editing's five levels read "No changes
(read only)" and "Filling in forms", which is Word's own wording and will not
fit five abreast at any dialog width. Same control, same ARIA, same checked
treatment; only the axis changes, so nothing about the token system moves. */
.segmented-stacked {
flex-direction: column;
align-items: stretch;
}
.segmented-stacked button {
height: auto;
min-height: 28px;
padding: 5px 10px;
text-align: start;
}
.swatches {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.acc {
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid transparent;
background: var(--c, var(--accent));
cursor: pointer;
padding: 0;
box-shadow: inset 0 0 0 1.5px var(--surface);
}
.acc[aria-pressed="true"] {
border-color: var(--ink);
}
.acc-custom {
display: inline-grid;
place-items: center;
background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
overflow: hidden;
}
/* The input FILLS its swatch rather than overhanging it by 14px in each
direction. It was 40px inside a 26px circle — invisible, because the swatch
clips, but it is still content painted outside the box that holds it, which
is what `dialog-contract`'s clipping guard caught the moment Settings became
a dialog and came under that contract. The hit target is the swatch. */
.acc-custom input[type="color"] {
width: 100%;
height: 100%;
border: none;
background: none;
cursor: pointer;
opacity: 0;
}
.settings-note {
margin: 8px 0 0;
color: var(--muted);
font-size: var(--fs-small);
line-height: 1.4;
}
/* ---- Modal dialogs --------------------------------------------------------- */
body.modal-open {
overflow: hidden;
}
.dialog-overlay {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: grid;
place-items: center;
padding: var(--space-6);
/* No `backdrop-filter`. A 2px blur over a full-viewport scrim is re-rasterised
on every frame that anything above it scrolls, and the 42% scrim is already
what separates the dialog from the document — the blur was decoration
bought at the price of a class of scroll jank. */
background: rgba(20, 22, 28, 0.42);
}
.dialog-overlay[hidden] {
display: none;
}
.dialog-card {
display: flex;
width: min(var(--dialog-width-standard), 100%);
max-height: min(720px, calc(100vh - 48px));
flex-direction: column;
overflow: hidden;
/* No border. A card that carries BOTH a 1px outline and a 72px drop shadow is
saying the same thing twice, and the ribbon band next to it already
established the house rule — "white on grey, so it separates by SHADE and
needs no border". The dialog sits on a scrim, so the shadow alone lifts it. */
border-radius: var(--radius-dialog);
background: var(--surface);
box-shadow: var(--shadow-dialog);
}
.dialog-card-compact {
width: min(var(--dialog-width-compact), 100%);
}
/* Two of the compact cards are smaller than the 380px constant and one is
* bigger, so both are stated per dialog rather than by moving a constant that
* four dialogs share. See `.field-dialog` for why the spelling is the bare
* `fit-content` keyword.
*
* SPLIT CELL. Word's Split Cells is one of the smallest dialogs it ships — a
* title, two spinners, OK and Cancel — and ours was a 380px card holding two
* 144px boxes for a number between 1 and 20, because `.dialog-field-grid`'s
* shared track floor is 7rem. That floor is right for the margin and paper
* fields it was written for; it is not right for a cell count, so this dialog
* states its own. The card then falls to what the ACTION ROW needs, which is
* the widest thing left in it. */
/* `body:not(.phone-mode)` is load-bearing, not decoration (HF-265 D5).
* `#splitCellDialog .dialog-card` is specificity (1,1,0) and the phone bottom
* sheet is `body.phone-mode .dialog-card` at (0,2,0), so an ID written here
* outranked the rung no matter where it was declared — measured on a 390px
* phone, Split cell rendered as a 292px slab pinned to the bottom-LEFT of the
* screen instead of a full-width sheet. `#confirmDialog` below has the same
* shape and only reached full width when its runtime message happened to be
* long enough. The desktop qualifier is what makes the two cascades disjoint
* rather than making the phone rule shout `!important`.
* `e2e/phone-dialog-sheet.spec.mjs` measures every dialog's left edge. */
body:not(.phone-mode) #splitCellDialog .dialog-card {
width: fit-content;
max-inline-size: min(100%, 46ch);
}
#splitCellDialog .dialog-field-grid {
grid-template-columns: repeat(2, max-content);
}
/* Two digits and a stepper. In `ch` so it follows the font rather than being a
* pixel that happened to fit Inter on one machine; the clipping contract in
* `dialog-contract.spec.mjs` is what catches it if a font makes this too tight. */
#splitCellDialog .dialog-field > input {
width: 11ch;
}
/* CONFIRM. The one card here that was too NARROW, and measurably so: at 380px
* the footer could not fit "Save the .docx first to keep your work." beside
* "Keep editing" and "Discard and open", so `.dialog-foot`'s `flex-wrap` put
* the buttons on their own line and the row stood 86px tall instead of 52px —
* 34px spent on a wrap nobody asked for — while the message above it broke
* across four lines. Word and Google Docs both set a confirmation wider than
* this and keep its buttons on one line.
*
* `fit-content` rather than another constant because this dialog's text is
* supplied at runtime by `confirmModal()`: a short question gets a small card,
* and the ceiling is the width at which the longest action row this product
* builds still fits on one line. */
/* Desktop-qualified for the reason `#splitCellDialog` above is. */
body:not(.phone-mode) #confirmDialog .dialog-card {
width: fit-content;
max-inline-size: min(100%, 56ch);
}
/* `hidden` is the weakest promise in the platform: it is a UA `display: none`,
* and ANY author `display` beats the entire UA sheet. So a rule as ordinary as
* `display: flex` un-hides every element it matches, silently — the markup
* still says `hidden` and the JS still sets it.
*
* Two of these were live in these dialogs, both found by looking rather than by
* reading. `.link-mode-panel { display: flex }` was painting the INACTIVE tab
* panel of the link dialog: with "Web address" chosen, the dialog also showed
* the bookmark picker reading "No bookmarks in this document" and its note —
* 52px of a 509px dialog that the user had not asked for, which also made the
* two tabs look inert. `.bookmark-list { display: flex }` was painting an empty
* hidden list at 416x0, whose only effect was to spend one 16px flex gap in the
* middle of the "No bookmarks yet" empty state.
*
* The stylesheet answers this per component in about a dozen places
* (`.ribbon-panel[hidden]`, `.side-panel[hidden]`, `.context-menu[hidden]`, …),
* and every one of those is a rule somebody had to remember. Inside a dialog it
* is answered once. `!important` is the point rather than a shortcut: the rule
* has to outrank an author `display` it has never seen, which is the only thing
* that can go wrong here. Guarded by `dialog-contract.spec.mjs` — "nothing it
* has hidden is painted", over every modal. */
.dialog-card [hidden] {
display: none !important;
}
/* No rule under the head, and none over the foot — see `.dialog-body` below for
what replaces them. A dialog was three stacked bands: a white head, a
hairline, a white body, a hairline, and a GREY footer. Three bands is a box
drawn twice inside a box, and it is the largest remaining reason these read
as heavier than the rest of the app: the footer alone is a 49px full-width
slab in a different colour from everything above it. Neither Word's dialogs
nor Google Docs' divide a dialog this way — the card is one surface, and the
action row sits on it. */
.dialog-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
padding: var(--dlg-pad-y) var(--dlg-pad-x);
}
.dialog-heading {
display: flex;
min-width: 0;
align-items: center;
gap: var(--space-3);
}
.dialog-heading-icon {
display: grid;
width: 36px;
height: 36px;
flex: 0 0 36px;
place-items: center;
border-radius: var(--radius-md);
background: var(--accent-soft);
color: var(--accent-text);
font-size: var(--icon-rail);
}
/* Chrome text interpolates user data — filenames, style names, search terms —
* and a filename is routinely one unbreakable token: CSS does not break on an
* underscore, so `General_Loan_On_lend_and_loan_from_SMSF_Agreement.docx` is a
* single 48-character word. A `fit-content` card cannot shrink below it, and
* the text was painted past the card's right edge and clipped mid-word. The
* measured guard missed it because its fixture was `opendoc-demo.docx`.
*
* `anywhere` rather than `break-word`: `break-word` still lets the unbreakable
* token set the element's min-content width, so a `fit-content` ancestor keeps
* sizing to it and the overflow comes back. `anywhere` lets the break count
* toward min-content, which is the whole point here. Applied at the text
* elements rather than the card so a deliberately non-wrapping control —
* a button label — is unaffected. */
.dialog-heading h2,
.dialog-heading p,
.dialog-body,
.dialog-note {
overflow-wrap: anywhere;
}
.dialog-heading h2 {
margin: 0;
color: var(--ink);
/* One step down from `--fs-title`. A dialog title names a task in a box the
user already chose to open; it is not a page heading and does not need to
compete with the document. Word and Docs both set theirs at body weight
plus a little. */
font-size: var(--fs-body);
font-weight: 600;
letter-spacing: -0.01em;
}
.dialog-heading p {
margin: 2px 0 0;
color: var(--muted);
font-size: var(--fs-small);
}
/* A confirmation has no `.dialog-body`: its whole message IS this paragraph, so
on those cards it is the content and not a subtitle. It was being painted at
12px in `--muted` — "Opening another file replaces X. Your edits have not been
saved and there is no copy of them anywhere else." set smaller and quieter
than the title above it, which is the one sentence in the product a user most
needs to read. Word and Docs both set a confirmation's message at body size
in body colour. Structural rather than per-dialog: any card that carries its
message in the head gets this, and any card with a body is unaffected. */
.dialog-card:not(:has(.dialog-body)) .dialog-heading p {
margin-top: var(--space-2);
color: var(--ink);
font-size: var(--fs-body);
line-height: 1.45;
}
.dialog-close {
display: grid;
width: var(--h-control);
height: var(--h-control);
flex: 0 0 var(--h-control);
place-items: center;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--muted);
cursor: pointer;
}
.dialog-close .ms {
font-size: var(--icon-control);
}
.dialog-close:hover {
background: var(--bg-2);
color: var(--ink);
}
/* Scroll shadows, the established answer to "where did the divider go".
*
* The two hairlines the head and foot used to carry were painted whether or not
* there was anything on the other side of them, so on About — six lines of
* content — they drew a boundary around nothing. What a divider is actually for
* is saying "there is more content above/below the fold", and that is a state,
* not a constant. The technique is Roman Komarov's `background-attachment:
* local` pair: two cover gradients painted in the SCROLLER's coordinates hide
* two shade gradients painted in the VIEWPORT's, so each shade is revealed
* exactly when that edge has content scrolled past it. No JS, no scroll
* listener, and it is correct on the first frame.
*
* `color-mix` rather than a new token: the shade is --ink at 11%, so it follows
* the theme by construction and adds no colour literal to feature CSS. */
.dialog-body {
min-height: 0;
overflow: auto;
padding: var(--dlg-pad-y) var(--dlg-pad-x);
overscroll-behavior: contain;
background:
linear-gradient(var(--surface) 30%, transparent) top / 100% 18px no-repeat local,
linear-gradient(transparent, var(--surface) 70%) bottom / 100% 18px no-repeat local,
linear-gradient(color-mix(in srgb, var(--ink) 11%, transparent), transparent) top / 100% 7px
no-repeat scroll,
linear-gradient(transparent, color-mix(in srgb, var(--ink) 11%, transparent)) bottom / 100% 7px
no-repeat scroll,
var(--surface);
}
/* Keyboard shortcuts reference (HF-151). Two columns on a wide card so the
* whole keymap is scannable without scrolling past the group you want; one
* column as soon as that would squeeze the key chips.
*
* Measured at 1280x720: the card took the 760px "wide" constant, which gave the
* body 716px and two multicol columns of 346px. The widest GROUP in the keymap
* — a group is only as wide as its widest label plus its widest chord — is
* 250px (REVIEW), and five of the eight are under 200px. So 96px of every
* column, 192px of the card, was empty gutter: a constant, not a measure.
*
* The width is in `ch` rather than pixels because what it has to hold is TEXT.
* The groups grow with the font and so does this, which a pixel tuned on one
* machine's Inter would not — and the Linux runner's fonts are not these.
* 80ch leaves the two columns about 36px of slack over the widest group here,
* and `.shortcuts-group` below now wraps its label column rather than
* overflowing if a translation or a substituted font eats that slack. */
/* 80ch was the wrong UNIT for this card, and that is why it overflowed
* (HF-265 D3). Measured at 1280x720 before this change: 80ch resolved to about
* 560px, which left the body 516px of inner width — and `.shortcuts-body`'s
* multicol track is `clamp(15rem, 22vw, 17rem)`, i.e. 272px at this viewport,
* so only ONE column fitted. One column of the whole keymap is 872px of
* content in a 612px box: the reference ran off the bottom of a card that had
* no footer under it either.
*
* The card's width here is not set by how wide its TEXT wants to be — it is set
* by how many `rem`-sized multicol tracks have to fit, so it is stated in the
* same pixel scale the tracks are: `--dialog-width-xwide` (960px) holds three
* 272px tracks plus two gaps inside the dialog padding and still leaves a
* margin either side of a 1280px laptop. Below that the track count falls to
* two and then one with no breakpoint enumerated, exactly as before. Keyboard
* shortcuts is in `dialog-fit`'s roster now — with all 23 of them — so neither
* the overflow nor the single column can come back unnoticed. */
.shortcuts-dialog {
width: min(var(--dialog-width-xwide), 100%);
}
/* About is a short fact list, so it is sized by its CONTENT rather than by a
dialog-width constant — the habit that makes a four-field dialog as wide as
a twenty-field one and leaves the middle empty. `fit-content` with a ceiling
keeps it honest at every viewport, including 390px. */
.about-dialog {
/* `fit-content`, NOT `min(fit-content, 100%)` — see `.field-dialog`. */
width: fit-content;
/* Three facts and three links. A `ch` ceiling keeps the description from
dragging the card out to the 640px standard constant, which is nearly
three times what the content needs. */
max-inline-size: min(100%, 46ch);
}
/* Two columns: term and value on one line, the way a properties sheet reads.
`auto auto` so neither column is wider than the text it holds. */
/* The brand mark in place of a generic info glyph: About is the one dialog
whose subject IS the product. */
.about-mark {
flex: none;
width: 36px;
height: 36px;
}
.about-facts {
display: grid;
grid-template-columns: auto auto;
gap: var(--space-2) var(--space-5);
margin: 0;
align-items: baseline;
}
.about-facts dt {
color: var(--ink-2, var(--ink));
font-size: var(--fs-caption, 12px);
}
.about-facts dd {
margin: 0;
font-variant-numeric: tabular-nums;
}
.about-links {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin: var(--space-5) 0 0;
}
.about-links a {
color: var(--accent-text);
}
/* The deployment's own identity (ONLYOFFICE `customization.customer`), rendered
by `about_dialog.mjs` only when `brand.json` configures one — so the shipped
build pays nothing for it. Separated from the product's own facts by a rule,
because "who wrote this editor" and "who runs this deployment" are two
different answers and running them together would read as one. */
.about-customer {
margin-top: var(--space-5);
padding-top: var(--space-5);
border-top: 1px solid var(--line);
}
/* One element in both themes, painted from a token the renderer sets inline.
The dark rule falls back to the light value, so a host who named only `logo`
is correct everywhere and a host who named both is correct in all three theme
entry points — the third being a reader who chose Dark on a light OS, which is
the one `docs/104` HF-092 was shipped without. */
.about-customer-mark {
display: block;
width: 28px;
height: 28px;
margin-bottom: var(--space-2);
background: var(--about-customer-mark, none) center / contain no-repeat;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .about-customer-mark {
background-image: var(--about-customer-mark-dark, var(--about-customer-mark, none));
}
}
:root[data-theme="dark"] .about-customer-mark {
background-image: var(--about-customer-mark-dark, var(--about-customer-mark, none));
}
.about-customer-name {
margin: 0;
font-weight: 600;
}
.about-customer-info,
.about-customer-line {
margin: var(--space-1) 0 0;
color: var(--muted);
}
.about-customer .about-links {
margin-top: var(--space-4);
}
.shortcuts-body {
/* Column COUNT derives from the width available, rather than being fixed at
two and overridden at one breakpoint: four fit on the 960px card, two at a
620px window, one at 390, and nothing in between has to be enumerated.
*
The track was `clamp(15rem, 22vw, 17rem)`, and the `22vw` term is why the
clamp never did what it looks like it does: at 1280 it resolves to 281.6px
and is pulled back to the 17rem ceiling, so the floor was unreachable and
the track was a constant 272px at every desktop width. Three such tracks
put 643px of keymap in a 560px body on a 1280x720 laptop (measured), which
is the overflow `dialog-fit.spec.mjs` now covers for this dialog.
*
A flat 13rem instead. The label column is `minmax(0, max-content)`, so a
label that does not fit a track WRAPS inside it and cannot paint across the
next column — which is what makes a narrower track safe here, and it is
already the reason that spelling was chosen.
MEASURED AFTER, and the two steps reported separately because they are not
the same size: four columns of 211px take the eleven groups from 643px to
540px, and the group margin below takes 540 to 532, in a body whose ceiling
on this viewport is 560.
THAT 28px OF HEADROOM WAS NOT REAL, and the argument that made it look safe
was wrong. It ran: this card's type is SELF-HOSTED, so the Linux runner lays
these rows out in the same faces a Mac does. The faces are the same; the
METRICS are not. CI measured the same body at 577px against the same 560px
ceiling — `#shortcutsDialog hides 17px of its content below the fold` — a
45px platform delta on a 28px margin. Same font file is not same line box.
So `.shortcuts-group` lets a group break across columns, which is the 57px
the previous pass measured and declined. Four configurations, all measured
at 1280x720 through `modal-roster`'s own open path, with the CI delta
applied:
break-inside | track | local | projected CI (+45px)
avoid | 13rem | 532 | 577 <- what CI rejected
avoid | 10rem | 517 | 562 <- still over the 560 ceiling
auto | 13rem | 475 | 520 <- taken
auto | 10rem | 453 | 498
A narrower track alone cannot fix this: `break-inside: avoid` means no
column is shorter than the tallest group and Paragraph alone is 281px, so
10rem buys 15px where 45px is needed. The track stays at 13rem rather than
going to 10rem, because narrowing it is a SECOND readability cost on top of
the split and 520px already clears the ceiling by more than the delta that
produced this failure.
The cost is real and is the one the previous pass named: a keymap is read by
scanning a group, and a group split down a column boundary is the thing
multicol is normally asked not to do. It is accepted because the
alternative on a 1280x720 laptop is content below the fold, and a group a
reader cannot see at all is worse than one that continues in the next
column. Multicol preserves reading order, so a split group continues where
a reader's eye is already going. */
columns: auto;
column-width: 13rem;
column-gap: var(--space-6);
}
/* The GROUP owns the two columns, not each row.
*
* Every row was its own `max-content max-content` grid, so each chord started
* wherever its own label happened to end: inside MOVING AROUND the keys began
* at seven different x positions in seven consecutive rows, and a keymap is
* read by scanning the key column. Aligning per ROW is what the previous pass
* fixed away from — it had been `space-between` across a 347px column, leaving
* a 235px median gap. Per GROUP is the third option and the one both reference
* products use: the pair still sits together, because the group is only as wide
* as its widest label plus its widest chord, and the column is straight.
*
* `display: contents` on the row hands its two cells to this grid; the row
* padding it drops comes back as `row-gap`. */
.shortcuts-group {
break-inside: auto;
display: grid;
/* `minmax(0, max-content)` on the LABEL column, not bare `max-content`: the
card is now sized to the measured width of these groups, so a group that
grew — a longer translation, a substituted font on another platform — has
to wrap inside its column instead of painting across the next one. The
chord column stays `max-content`: a key chord must never break. */
grid-template-columns: minmax(0, max-content) max-content;
justify-content: start;
align-items: baseline;
column-gap: clamp(8px, 1vw, 16px);
row-gap: 6px;
/* One step down from `--space-5` (HF-265 D3). Eleven groups paid that margin
eleven times — 220px spread over four columns — and the uppercase group
heading is what separates the groups anyway, as it always was. Measured:
540px of content to 532px, in a 560px box. A small step, reported as one:
the track correction above is what did the work, this is the last 8px. */
margin: 0 0 var(--space-4);
}
.shortcuts-group .shortcuts-row {
display: contents;
}
/* Still the uppercase micro label rather than the form group heading: this
marks a section of a reference LIST, which is a different job from naming a
group of controls. Same reason `.bookmark-list-head` keeps it. */
.shortcuts-group h3 {
grid-column: 1 / -1;
margin: 0 0 var(--space-2);
font-size: var(--fs-small);
font-weight: 650;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--faint);
}
.shortcuts-row {
/* `space-between` pushed the key chip to the far edge of a fixed 347px
column, so the gap between a label's last glyph and its chord measured a
median of 235px — 68% of every row was empty. The pair now sits together
and the row is as wide as it needs to be. */
display: grid;
grid-template-columns: max-content max-content;
justify-content: start;
align-items: baseline;
column-gap: clamp(8px, 1vw, 16px);
padding: 3px 0;
}
.shortcuts-row span:first-child {
color: var(--ink);
}
.shortcuts-keys {
flex: 0 0 auto;
font-size: var(--fs-small);
font-variant-numeric: tabular-nums;
color: var(--muted);
white-space: nowrap;
}
.dialog-foot {
display: flex;
align-items: center;
justify-content: space-between;
/* The action row WRAPS rather than clipping. With `nowrap` the note and the
two buttons were squeezed into one line of a 380px compact card and the
labels broke inside boxes that could not grow (see `.dialog-button`). */
flex-wrap: wrap;
gap: var(--space-4);
/* The action row needs less vertical air than the body: it holds one line of
buttons. On the compact dialogs head+foot were eating 55% of the card.
No fill and no rule (see `.dialog-head`): the buttons sit on the card, as
they do in Word and in Google Docs. The extra bottom padding is what now
separates them from the edge — it was the grey band doing that before. */
padding: calc(var(--dlg-pad-y) * 0.8) var(--dlg-pad-x) var(--dlg-pad-y);
}
.dialog-note {
/* Takes the leftover width, but gives the buttons their line when what is
left is too narrow to read: the note is the least important thing in the
footer, and it must never be what forces a label to break. */
flex: 1 1 16ch;
min-width: 0;
color: var(--muted);
font-size: var(--fs-small);
}
.dialog-actions {
display: flex;
align-items: center;
flex: 0 0 auto;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-2);
margin-left: auto;
}
.dialog-button {
/* `min-height`, not `height`. A fixed height is a promise that every label
fits on one line, and the app writes its own labels at runtime:
`confirmModal({ confirmLabel: "Discard and open" })` wrapped to two lines
and reported a 59px content height inside this 32px box, so the second
line was simply not painted. `nowrap` keeps the normal case on one line —
the rendering is unchanged for every label that already fitted — and
`min-height` lets the box grow instead of cutting anything that does not. */
min-height: var(--h-search);
flex: 0 0 auto;
white-space: nowrap;
min-width: 80px;
padding: 0 16px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--ink);
font-weight: 600;
cursor: pointer;
}
.dialog-button:hover:not(:disabled) {
border-color: var(--muted);
background: var(--bg-2);
}
/* A disabled dialog button has to LOOK disabled.
*
* `.dialog-button` had no `:disabled` rule and its `:hover` applied regardless,
* so a button that ships disabled-with-a-reason rendered identically to a live
* one — same ink, `opacity: 1`, `cursor: pointer` — and lit up on hover. Found
* by screenshotting the version-history panel: "Show changes" is genuinely
* `disabled` and carries the right title ("Comparing one version with another
* is not built yet"), and it was indistinguishable from "Restore this version"
* beside it. `SKILL.md` §10's rule is that a command which cannot run ships
* disabled WITH A REASON rather than as a button that does nothing — a reason
* only a tooltip can reveal, on a control that looks live, is the second half of
* that rule unmet.
*
* The values are the ones the rest of the chrome already uses (`.btn:disabled`,
* `.save-format:disabled`), not new ones: one treatment for one meaning. */
.dialog-button:disabled {
opacity: 0.45;
cursor: default;
}
.dialog-button-primary {
border-color: var(--primary-bg);
background: var(--primary-bg);
color: var(--primary-ink);
}
/* `:not(:disabled)` is load-bearing, not symmetry with the rule above.
Without it this selector is (0,2,0) and `.dialog-button:hover:not(:disabled)`
is (0,3,0), so the GENERIC hover won on a primary button and repainted it
`--bg-2` while leaving the white primary text in place: measured
rgb(251,250,248) on rgb(244,246,251), about 1.03:1, in every dialog in the
product. It was invisible to the contrast sweep because the sweep reads
resting state, and invisible to every behavioural test because the button
still worked — it was found by hovering one and looking. `docs/63`'s AA floor
is 4.5:1 for text. */
.dialog-button-primary:hover:not(:disabled) {
border-color: var(--primary-bg-hover);
background: var(--primary-bg-hover);
}
/* ---- Document properties --------------------------------------------------- */
/* Two columns, because the dialog holds two topics.
*
* Measured at 1280x720, the laptop where the complaint shows: the card was
* 640x672 — the full height the shell allows — and the body still reported 696px
* of content in 560px of box. 136px of the dialog was below the fold, and what
* was below it was the file's own facts: Revision, Language, Content status,
* Version, and the whole "Producer and saved statistics" disclosure.
*
* The cause is that one column was carrying two unrelated things: six fields you
* TYPE, then eight facts you READ. Word does not stack those either — its
* Properties dialog puts them on separate tabs (Summary, Statistics). Tabs need a
* script and a second dismissal surface, so the same separation is spatial here:
* the form on the left, the facts on the right, both visible at once, which is
* strictly more than a tab strip gives.
*
* `auto-fit` rather than two fixed tracks so the phone case needs no breakpoint:
* below ~570px of body only one 268px track fits and the two halves stack, which
* is the layout this replaces and the right one at that width. */
.properties-dialog {
/* Unchanged at the 640px standard constant. The fix here is the SHAPE, not
the width: two 268px tracks and the gap floor need 556px and the body has
596px, so the split costs nothing on the horizontal and a wider card would
only take more of the screen for the same content. */
width: min(var(--dialog-width-standard), 100%);
}
.properties-body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
/* No ROW gap. There is only ever one row here, except when the two halves
stack — and there the facts block brings its own 20px margin and 16px
inset back with the separator, so a row gap on top of that would spend an
extra 20px on the narrowest screen, which is the one with none to spare. */
gap: 0 clamp(20px, 2.4vw, 32px);
align-content: start;
/* So the rule below can ask whether the two halves are actually side by side
— see the `@container` query. A grid stretched by its parent's width does
not size to its contents, which is the condition `inline-size` containment
requires. */
container-type: inline-size;
}
.properties-facts {
min-width: 0;
}
/* The rule and the 36px of air above "File details" separated it from the form
when the form was directly ABOVE it. Beside the form, the same rule separates
it from the top of the card instead, and the column edge already says what
the hairline was saying — so it goes.
It comes back when the two halves stack, which is a fact about the container
and not about the viewport: the same body is wide in a dialog, wide in the
File page's pane, and narrow on a phone. 555px is one pixel under the two
268px tracks plus the 20px gap floor, i.e. exactly the width at which
`auto-fit` gives up on the second column — so the two rules can never
disagree about which layout is on screen. The disclosures under it keep their
separator in both, because there the boundary is still between two stacked
things. */
.properties-facts > .metadata-section:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
@container (max-width: 555px) {
.properties-facts > .metadata-section:first-child {
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--line);
}
}
/* 16px between rows against the 6px that binds a label to its own input: a
label must be visibly closer to the control it names than to the one above
it, and at 14px against 6px that ratio was 2.3 — near enough to ambiguous
that the eye had to read the words to pair them. Word and Docs both run
about 3:1 here. */
.properties-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4) var(--space-5);
}
.field-wide {
grid-column: 1 / -1;
}
.dialog-field {
display: flex;
min-width: 0;
flex-direction: column;
gap: 6px;
color: var(--muted);
font-size: var(--fs-small);
font-weight: 600;
}
.dialog-field > input,
.dialog-field > textarea {
width: 100%;
min-width: 0;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: var(--fs-body);
font-weight: 450;
}
.dialog-field > input {
height: var(--h-field);
padding: 0 10px;
}
.dialog-field > textarea {
min-height: 76px;
padding: 9px 10px;
line-height: 1.45;
resize: vertical;
}
.dialog-field > input:focus,
.dialog-field > textarea:focus,
.number-control:focus-within {
outline: none;
border-color: var(--accent-text);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.metadata-section,
.metadata-disclosure {
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--line);
}
/* Typography lives with the shared group heading (`.settings-label` block). */
.metadata-disclosure summary {
cursor: pointer;
}
.metadata-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 18px;
margin: 0;
}
/* Rows, not cards. These eight facts are READ-ONLY metadata; boxing each one in
a filled, outlined card gave the dialog eight more rectangles than it has
pieces of information, which is most of what made it read as boxy. Word's
Info pane and Docs' Document details both list them as plain label/value
pairs with a hairline between. The row separator carries the structure the
box used to, at a fraction of the weight. */
.metadata-facts > div {
min-width: 0;
padding: 7px 0;
border-bottom: 1px solid var(--line);
}
.metadata-facts dt {
margin-bottom: 3px;
color: var(--muted);
font-size: var(--fs-caption);
font-weight: 600;
}
.metadata-facts dd {
margin: 0;
overflow: hidden;
color: var(--ink);
font-size: var(--fs-small);
font-weight: 550;
line-height: 1.35;
text-overflow: ellipsis;
}
.metadata-facts dd.metadata-empty {
color: var(--faint);
font-weight: 450;
}
.metadata-disclosure:not([open]) summary {
margin-bottom: 0;
}
.metadata-facts-compact {
gap: 8px 12px;
}
.metadata-fact-wide {
grid-column: 1 / -1;
}
/* ---- Page setup dialog ----------------------------------------------------- */
.page-setup-dialog {
/* Driven by what it holds, not by the "wide" constant. With the preview
sized to its thumbnail and the spinners sized to five characters, the
content no longer fills 760px, and a dialog that stays wide after its
contents shrink is exactly the "bigger but not more useful" complaint.
The ch ceiling keeps a long margin label from stretching it back out. */
/* This declaration DOES NOT PARSE and never has — see `.field-dialog`, which
explains why, and `dialog_density.test.mjs`, which ratchets it. Left as
written rather than corrected in passing: `fit-content` on its own would size
this card to its content, and what this dialog needs is the opposite — a
stated width wide enough to hold two columns of groups. The declaration below
is the one that applies. */
width: min(fit-content, 100%);
/* A STATED width. MEASURED, on a 1280x720 laptop: the body held 602px of
content in a 560px box, so 42px of this dialog — the bottom of the Columns
group — was already below the fold before this round added anything, and
`dialog-fit.spec.mjs` did not cover it. Two more groups (a Gutter field, which
`auto-fit` absorbs into the existing Margins rows for free, and Vertical
alignment, which does not) would have made that 108px. The fix is two balanced
columns of groups, which needs a width the single tall stack did not.
756px AND NOT WIDER, and the ceiling is not arbitrary: `--dialog-width-wide` is
760px, the widest constant in this file's dialog scale, and
`header-menu.spec.mjs` asserts this card stays under it. A first attempt at
this layout used 900px, which made Page setup wider than any token in the
design system — that is a change to the scale, and it belongs to the owner
rather than to a section-properties round. It reddened `header-menu` (received
900, expected < 760), and that is why the two declarations below exist.
What 756px costs, and how it is paid — every figure measured, not estimated:
at 756 the two columns are 265px each, and `.dialog-field-grid`'s shared track
floor is 144px at this viewport, so each column held ONE field and the five
margin fields stacked into 701px of content in a 560px box — WORSE than the 602
it started at. So the preview column gives back 32px it was not using, and the
field floor is lowered FOR THIS DIALOG ONLY to 7.75rem, which puts two fields
back in a column. Result: 485px of content in 485px of box, card 596px tall.
Page setup is in `dialog-fit`'s roster now, so neither the overflow nor the
width can come back unnoticed. */
width: min(756px, 100%);
/* The stated ceiling, from the scale rather than from a `ch` count that
happened to land near it: `--dialog-width-wide` IS the 760px this comment
already names, and `header-menu.spec.mjs` asserts this card stays under it.
It does not bind (the width above caps at 756), so nothing renders
differently — but the token is now read where the prose already relied on
it, which is the point of a scale (HF-265 D8). */
max-inline-size: min(100%, var(--dialog-width-wide));
}
/* `min(fit-content, 100%)` IS NOT VALID CSS, and it is written on five cards in
* this file — every one that was meant to be sized by its contents. `min()`
* takes terms and `fit-content` is a sizing KEYWORD, so the
* whole declaration is dropped at parse time: `CSS.supports("width",
* "min(fit-content, 100%)")` is `false` in Chromium, and the computed width of
* every one of those cards was still `.dialog-card`'s own `min(640px, 100%)`.
*
* So what they actually had was the 640px constant clamped by their
* `max-inline-size` ch ceiling — a constant, which is the very thing they were
* written to stop being. Insert field measured 426px, which is exactly its
* 52ch ceiling and not the 357px its rows add up to.
*
* `fit-content` on its own is the correct spelling and needs no clamp: it is
* defined as `min(max-content, max(min-content, stretch))`, so it already
* cannot exceed the space available to it. `dialog_density.test.mjs` requires
* the keyword form on the cards it names and ratchets the broken one, because
* the broken spelling is the obvious way to write this and reads as correct.
*
* Insert field is a six-row picker whose widest row measures 313px; at the
* inherited constant, 69px of the card and 69px of every row were empty. */
.field-dialog {
width: fit-content;
max-inline-size: min(100%, 52ch);
}
.page-setup-body {
display: grid;
/* The preview column was a hard 250px and stretched to the full row height —
587px of box around a 150x212 sheet, about a fifth of the whole dialog.
It is now sized by the thumbnail and pinned to the top, as Word's is.
Narrowed again from `clamp(120px, 13vw, 160px)`: the sheet inside it is
`min(150px, 100%)` and a laptop resolved that clamp to its 160px cap, so 32px
of the column was empty. Those 32px are what let the field grid below keep two
fields per column inside a card that stays under the 760px wide constant — see
`.page-setup-dialog`. */
grid-template-columns: clamp(110px, 10vw, 128px) minmax(0, 1fr);
gap: clamp(16px, 2vw, 28px);
align-items: start;
}
/* No frame. The preview was a 190x288 filled, outlined, 22px-padded card around
a 150x212 picture of a sheet — a box drawn round a box drawn round a box, and
the single biggest rectangle left in any of these dialogs. Word's page-setup
preview is the sheet alone on the dialog's own surface, and the sheet already
carries a border and a shadow that say "this is paper". Dropping the frame
also gives the field column back ~50px, which is where the dialog was short. */
.page-preview {
display: flex;
align-self: start;
block-size: fit-content;
align-items: center;
justify-content: center;
flex-direction: column;
gap: var(--space-3);
padding: 2px 0 0;
}
.page-preview-sheet {
position: relative;
/* `min()`, not a constant: landscape is 210px and the preview column clamps
to as little as 120px, so a fixed width painted the sheet outside the
column that holds it. The portrait default fits today, which is the only
reason the clipping guard has not seen it — the guard opens the dialog in
its default state and landscape is one click away. */
width: min(150px, 100%);
aspect-ratio: var(--page-ratio, 8.27 / 11.69);
overflow: hidden;
border: 1px solid var(--line-strong);
border-radius: 2px;
background: var(--paper);
box-shadow: 0 4px 14px rgba(20, 22, 28, 0.13);
transition: width 0.16s ease, aspect-ratio 0.16s ease;
}
.page-preview-sheet[data-orientation="landscape"] {
width: min(210px, 100%);
}
.page-preview-margins {
position: absolute;
inset:
var(--preview-margin-top, 8%)
var(--preview-margin-right, 8%)
var(--preview-margin-bottom, 8%)
var(--preview-margin-left, 8%);
display: flex;
flex-direction: column;
gap: 7px;
padding-top: 4px;
border: 1px dashed var(--line-strong);
}
.page-preview-margins span {
display: block;
height: 2px;
margin-inline: 10%;
border-radius: 999px;
background: var(--bg-2);
}
.page-preview-margins span:nth-child(2) {
width: 68%;
}
.page-preview-margins span:nth-child(3) {
width: 82%;
}
.page-preview-margins span:nth-child(4) {
width: 54%;
}
.page-preview-label {
color: var(--muted);
font-size: var(--fs-small);
font-variant-numeric: tabular-nums;
}
/* Balance independent groups across three columns on a laptop. With the
presets and document controls, two columns held 712px of content in a 560px
body at 1280x720. Three columns fit the same controls in 530px without
reducing their font or touch size. Keep each group whole and preserve DOM
tab order; the narrow-screen rule below returns to one column. */
.page-setup-fields {
min-width: 0;
columns: 3;
column-gap: clamp(16px, 2vw, 20px);
}
/* Text labels carry orientation without the decorative icons in these narrow
tracks. Action labels may wrap; their buttons grow with the text. */
.page-setup-fields .orientation-segmented {
height: auto;
}
.page-setup-fields .orientation-segmented.segmented button {
height: auto;
min-height: 28px;
padding-inline: 6px;
white-space: nowrap;
}
.page-setup-fields .orientation-segmented .ms {
display: none;
}
.page-setup-fields .chip-btn {
height: auto;
min-height: 24px;
white-space: normal;
}
/* The rhythm is a bottom margin rather than the flex `gap` this was, because a
gap does not exist between multi-column boxes. `.dialog-group` zeroes its own
margin, so this is scoped to the children of this one container. */
.page-setup-fields > .dialog-group {
margin-bottom: 20px;
break-inside: avoid;
}
/* A LOWER track floor than the shared one, for this dialog only.
`.dialog-field-grid`'s floor is `clamp(7rem, 20vw, 9rem)`, and `20vw` is the
VIEWPORT's width, not the column's — so on any laptop it resolves to the 9rem
cap, 144px. That floor was written for fields laid out across the full width of a
dialog body. Here they sit inside a 265px multi-column column, where 144px means
exactly one field per row and five margin fields stacking into a 701px body.
7.75rem (124px) fits two, which is what the Top/Bottom and Left/Right pairs are
supposed to be — `.dialog-field-grid`'s own comment refuses stacking them, and at
this column width this is the only way to honour that. Scoped, because the shared
floor is right everywhere else it applies. */
.page-setup-fields .dialog-field-grid {
grid-template-columns: repeat(auto-fit, minmax(clamp(7rem, 20vw, 7.75rem), max-content));
}
/* ---- Caption and Cross-reference (`109` OO-005) ---------------------------- */
/* These two dialogs shipped with NO CSS AT ALL. Every class their markup declared
— `.caption-body`, `.caption-label-actions`, `.caption-preview-row`,
`.crossref-targets`, `.crossref-list` and both card classes — had zero rules in
this file, so they fell back to default block layout: a 596px-wide text input
beside 98px selects, the two label buttons orphaned on a row of their own, and
the cross-reference target LIST — the thing you have to pick from — 55px tall
inside a 289px card. Measured before writing any of this.
The arrangement follows ONLYOFFICE, whose `CaptionDialog.js:61-120` is a
four-column table: caption text with Position beside it, then the Label combo
with its Add and Delete buttons ON THE SAME ROW bottom-aligned, then exclude,
numbering, the chapter pair, and the example last. Ours stacked all of that
full-width, which is what made it read as a wall. */
.caption-body,
.crossref-body {
/* The shared `.dialog-body` already owns padding and scrolling; this only sets
the rhythm between groups, which is what was missing. */
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* Caption text takes the room it needs; Position is a two-option select and does
not (`CaptionDialog.js:69-71` gives it 75px beside a full-width caption box). */
.caption-text-row {
display: grid;
grid-template-columns: minmax(0, 1fr) max-content;
gap: var(--space-3);
align-items: end;
}
/* Label + its two actions on ONE row, bottom-aligned, as theirs are
(`CaptionDialog.js:75-85`). They were a 596x34 strip of their own. */
.caption-label-row {
display: grid;
grid-template-columns: minmax(0, 1fr) max-content max-content;
gap: var(--space-2);
align-items: end;
}
/* A pair of selects reads as a pair when the columns match. `.dialog-field-grid`
sizes cells by content on purpose — right for a Top/Bottom number pair, wrong
here, where it gave 98px beside 170px and 218px beside 130px. */
.caption-pair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
align-items: end;
}
/* Numbering is one narrow select. Left it in the flow rather than stretching it
across the card, which is where 490px of the emptiness came from. */
.caption-numbering {
max-inline-size: 16ch;
}
/* A grid cell only equalises the CELL. `.dialog-select` sizes to its longest
option, so the pairs still came out 218px beside 130px and 106px beside 231px
until the control was told to fill the column it was given. `min-inline-size: 0`
because a select's intrinsic minimum otherwise refuses to shrink and pushes the
grid wider than the card. */
.caption-text-row .dialog-field,
.caption-label-row .dialog-field,
.caption-pair .dialog-field {
min-inline-size: 0;
}
.caption-text-row > .dialog-field > input,
.caption-label-row > .dialog-field > .dialog-select,
.caption-pair > .dialog-field > .dialog-select {
inline-size: 100%;
min-inline-size: 0;
}
.caption-preview-row {
display: flex;
gap: var(--space-2);
align-items: baseline;
margin: 0;
padding-top: var(--space-2);
border-top: 1px solid var(--line);
}
.caption-preview-label {
color: var(--muted);
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.caption-preview {
font-weight: 600;
}
/* The target list is the CONTENT of the cross-reference dialog, not a footnote to
it. ONLYOFFICE gives theirs 368x161 (`CrossReferenceDialog.js:91`); ours had 55
and the reader had to scroll a five-item list. A min-height rather than a fixed
one so a short document does not leave a hole. */
.crossref-targets {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-height: 0;
}
.crossref-list {
min-height: 9.5rem;
max-height: 16rem;
}
/* ---- Watermark (`109` OO-006) --------------------------------------------- */
/* Sized by what it holds, like `.page-setup-dialog` above: the widest row is
the three-cell Font/Size/Color grid, so the 640px standard constant would
leave a third of every row empty. */
.watermark-dialog {
/* `fit-content` on its own, NOT `min(fit-content, 100%)` — see `.field-dialog`
for why that spelling never parsed. `fit-content` already cannot exceed the
available space, so the `min()` bought nothing even in intent. */
width: fit-content;
max-inline-size: min(100%, 56ch);
}
/* ---- Header and footer settings ------------------------------------------- */
/* Sized by what it holds, like the cards above: the widest row is the Position
pair, and the standard 640px constant would leave a third of every row empty.
`fit-content` on its own, NOT the unparseable `min(fit-content, …)` — see
`.field-dialog`. */
.header-footer-settings-dialog {
/* A STATED width, not `fit-content`. Sized to the content this card measured
476px and held 598px of groups in a 542px body — 56px below the fold on a
1280x720 laptop, the same defect `dialog-fit.spec.mjs` was written for. The
four groups are short and the card was narrow, so the fix is the same balanced
two-column flow Page setup now uses, and that needs a width that fits two
`.dialog-field-grid` cells per column (2 x 144px plus the gaps). */
width: min(620px, 100%);
max-inline-size: min(100%, 76ch);
}
/* Balanced across two columns, for the reason `.page-setup-fields` records: a grid
would align rows and pin a short group's row to a tall neighbour's height. */
.header-footer-settings-body {
min-width: 0;
columns: 2;
column-gap: clamp(20px, 2.4vw, 28px);
}
.header-footer-settings-body > .dialog-group {
margin-bottom: 20px;
break-inside: avoid;
}
/* Apply to and Position run the FULL width rather than living in a column.
Measured: at two columns this card gives each one 274px, and a
`.dialog-field-grid` cell is 144px — so "Header from top" and "Footer from
bottom" stacked, which is precisely the outcome `.dialog-field-grid`'s own
comment refuses for a pair of short number fields. Spanning gives that pair the
whole 588px and keeps it side by side, and the two taller groups below then
balance against each other, which is what the two columns are for. */
.header-footer-settings-body > .dialog-group-span {
column-span: all;
}
/* Rhythm on the ROWS and not as a gap on the fieldset, for the reason
`.watermark-body` records: `fieldset { display: flex }` takes the legend out of
the flow inconsistently across engines, and these legends are what a screen
reader reads the checkboxes and radios out under. */
.header-footer-settings-body .dialog-check + .dialog-check,
.header-footer-settings-body .dialog-check + .dialog-note,
.header-footer-settings-body .dialog-check + .dialog-field,
.header-footer-settings-body .dialog-field-grid + .dialog-check {
margin-top: 12px;
}
/* "Start at" and its spinner read across, so the number belongs to the words
beside it rather than sitting under them. */
.header-footer-settings-body .dialog-check {
flex-wrap: wrap;
}
/* The reason a disabled control carries, under the control it explains. Indented
to the checkbox's text so it reads as that row's footnote and not as a note
about the whole group. */
#headerFooterLinkReason {
margin-top: 6px;
padding-inline-start: 26px;
}
/* ---- Drop cap ------------------------------------------------------------- */
.drop-cap-dialog {
/* `fit-content`, not the unparseable `min()` — see `.field-dialog`. */
width: fit-content;
max-inline-size: min(100%, 52ch);
}
.drop-cap-body {
display: grid;
gap: var(--space-4);
}
.drop-cap-options {
display: grid;
grid-template-columns: repeat(3, minmax(92px, 1fr));
gap: var(--space-2);
}
.drop-cap-choice {
position: relative;
display: grid;
min-width: 0;
gap: var(--space-2);
padding: var(--space-3);
border: 1px solid var(--line-strong);
border-radius: var(--radius-md);
color: var(--muted);
font-size: var(--fs-small);
cursor: pointer;
}
.drop-cap-choice:has(input:checked) {
border-color: var(--accent-text);
background: var(--accent-soft);
color: var(--ink);
}
/* `outline-offset: 2px` outside an already-accent 1px border drew TWO
concentric blue rings around the selected tile — and the dialog focuses the
checked radio as it opens, so that is what it looks like every single time it
is used. One ring, seated on the border. */
.drop-cap-choice:focus-within {
outline: 2px solid var(--accent-text);
outline-offset: -1px;
}
.drop-cap-choice input {
position: absolute;
opacity: 0;
}
/* `min-height`, never `height`. The swatch holds a 47px letter whose LINE BOX is
the font's business, not ours: Georgia renders it 48px tall, and the Linux CI
runner — which has no Georgia and falls back to its own serif — renders it 54.
A fixed 52px box therefore fit on one platform and clipped on the other, which
is how the previous attempt at this passed locally and failed in CI. Sizing to
the content instead is correct for any face, which is the only thing that can
be true on every platform we run on. */
.drop-cap-sample {
display: grid;
min-height: 52px;
grid-template-columns: 24px 1fr;
align-items: start;
overflow: hidden;
color: var(--ink);
}
.drop-cap-sample b {
align-self: start;
font-family: Georgia, serif;
font-size: 20px;
font-weight: 600;
line-height: 1;
}
.drop-cap-sample i {
height: 38px;
margin-top: 3px;
background: repeating-linear-gradient(to bottom, var(--line-strong) 0 2px, transparent 2px 11px);
}
/* `auto`, not a pixel column: the 47px sample glyph measures ~36px in Georgia
and was painting over the ruled lines beside it out of a 24px column — the
opposite of what a drop cap does, which is RESERVE the width the text then
wraps around. A fixed column also cannot be right on both platforms, since
the Linux runner has no Georgia and falls back to a serif of its own metrics.
Letting the column size to the letter is correct for any face.
`line-height: normal` for the same reason: 0.92 made the box shorter than the
glyph's own line box, so the element reported content taller than its box. */
.drop-cap-sample[data-mode="drop"],
.drop-cap-sample[data-mode="margin"] {
grid-template-columns: auto 1fr;
}
.drop-cap-sample[data-mode="drop"] b,
.drop-cap-sample[data-mode="margin"] b {
grid-row: span 2;
font-size: 47px;
line-height: normal;
}
.drop-cap-sample[data-mode="margin"] {
overflow: visible;
}
.drop-cap-sample[data-mode="margin"] b {
transform: translateX(-5px);
}
.drop-cap-sample[data-mode="margin"] i {
padding-left: 5px;
border-left: 1px solid var(--line-strong);
background-clip: content-box;
}
/* Sized by what it holds, like `.number-control`: this takes 1 to 10, and it
was a 128px box for two digits. The allowance is four characters plus the
input's own padding plus Chromium's spin buttons, which is the same
arithmetic `.number-control` documents.
The label sits BESIDE the value rather than above it. `.dialog-field` stacks
its label, which is right for a full-width text input and wrong for a
two-digit one: it spent a 60px row on a 69px control and left 267px of that
row empty. Word's Drop Cap dialog writes it inline — "Lines to drop: [3]" —
and so does every options row in this product's own menus (`.menu-row`).
Grid rather than flex so the bare "Lines" text node becomes a real item. */
.drop-cap-lines {
display: grid;
width: fit-content;
grid-template-columns: max-content max-content;
align-items: center;
gap: 0 var(--space-3);
}
.drop-cap-lines > input {
inline-size: calc(4ch + 2.25rem);
}
.drop-cap-lines:has(input:disabled) {
opacity: 0.55;
}
.watermark-body {
display: flex;
min-width: 0;
flex-direction: column;
gap: 20px;
}
/* The rhythm inside a fieldset is carried by margins on the rows, not by a gap
on the box: `fieldset { display: flex }` takes the legend out of the flow
inconsistently across engines, and this dialog's legends are load-bearing
(they are what a screen reader reads the radio group out under). */
.watermark-body .dialog-check + .dialog-check,
.watermark-body .dialog-field + .dialog-field-grid,
.watermark-body .dialog-field-grid + .dialog-check,
.watermark-body .dialog-check + .segmented {
margin-top: 12px;
}
/* The kind radios read across. Three short phrases stacked cost 84px and left
~320px empty beside each one; on one line they cost 20px and the whole
decision — none, text, picture — is one glance instead of three. They wrap to
a second line on their own when the card is narrower than they are, which is
what happens at 400px. */
.watermark-kinds {
display: flex;
flex-wrap: wrap;
gap: 10px clamp(14px, 2.4vw, 22px);
}
/* The stacked-row rhythm above does not apply inside a row. */
.watermark-kinds .dialog-check + .dialog-check {
margin-top: 0;
}
/* Font, Size and Colour on ONE row. The shared `.dialog-field-grid` gives every
cell a 9rem floor, which is right for a pair of margin spinners and wrong for
a colour well: three 9rem tracks plus gaps need 456px and the body is 415px,
so the grid wrapped and Colour took a 60px row of its own with a 216px swatch
in it — a control stretched to its container, which is the defect the last
pass removed everywhere else. Sized to content here: the selects already
report their widest option (`.dialog-body .dialog-select`), and the well is
sized by the swatch rather than by a label it does not have. */
#watermarkTextFields .dialog-field-grid {
grid-template-columns: minmax(0, max-content) minmax(0, max-content) max-content;
}
/* A disabled choice is still carrying a sentence — the reason the picture half
is not offered — so it reads as unavailable rather than as absent. */
.watermark-body .dialog-check:has(input:disabled) {
color: var(--muted);
cursor: not-allowed;
}
/* The fields greyed while "No watermark" is chosen. `fieldset[disabled]` already
stops every control inside it, which is the behaviour; this is what says so. */
#watermarkTextFields:disabled {
opacity: 0.55;
}
#watermarkColor {
/* A swatch, not a field: it has no text to fit, so it is sized by the
~3.5rem of colour a user needs to see rather than by the cell around it. */
inline-size: 3.5rem;
height: var(--h-field);
padding: 2px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--surface);
cursor: pointer;
}
/* ---- Table properties inspector ------------------------------------------ */
.table-properties-grid {
display: flex;
min-width: 0;
flex-direction: column;
}
.table-property-section {
display: flex;
min-width: 0;
flex-direction: column;
gap: 12px;
padding: 15px 0 17px;
border-bottom: 1px solid var(--line);
}
.table-property-section legend {
margin: 0;
padding: 0;
}
/* Bound to the field above it at the shared 6px, against this section's own
12px stack gap. */
.table-property-section > .dialog-field-note {
margin-top: -6px;
}
.table-property-section:first-child {
padding-top: 0;
}
.table-property-section:last-child {
padding-bottom: 4px;
border-bottom: none;
}
/* `.dialog-field select` is here too, because the object inspector builds five of
them from a template string with no class, and they were rendering raw OS chrome
in the middle of a product panel (docs/114 §6). */
.dialog-select,
.dialog-field select {
width: 100%;
height: var(--h-field);
padding: 0 30px 0 10px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: var(--fs-body);
}
.dialog-select:focus,
.dialog-field select:focus {
outline: none;
border-color: var(--accent-text);
box-shadow: 0 0 0 3px var(--accent-soft);
}
/* A control is as wide as the choices it holds, not as wide as the dialog.
*
* Measured: Settings' Theme toggle was three 155px buttons spanning 476px to
* hold "System", "Light" and "Dark"; Page setup's Orientation was two 148px
* buttons; the Section dropdown was 303px to show "Section 1" and the Language
* dropdown 476px to show "System default (English)". This is the same defect
* the number spinners had before the last pass — a control stretched to the
* container instead of sized to its content — and it is most of why these
* dialogs read as big without being informative. Word and Docs size both of
* these to their content.
*
* Scoped to `.dialog-body` so the side panels, whose narrow measure genuinely
* is the control's width, are untouched. */
.dialog-body .segmented {
width: fit-content;
max-width: 100%;
}
.dialog-body .segmented button {
flex: 0 1 auto;
padding: 0 14px;
}
.dialog-body .dialog-select,
.dialog-body .dialog-field > select {
/* `fit-content` on a select is its widest OPTION, so the box still fits every
value it can show. The floor keeps a one-digit list ("Columns ▸ Number")
from collapsing to a stub, and `100%` is the ceiling in a narrow cell. */
inline-size: fit-content;
min-inline-size: 11ch;
max-inline-size: 100%;
}
.dialog-check {
display: flex;
align-items: flex-start;
gap: 9px;
color: var(--ink);
font-size: var(--fs-small);
cursor: pointer;
}
.dialog-check input {
margin: 2px 0 0;
accent-color: var(--accent);
}
.dialog-check span {
display: flex;
min-width: 0;
flex-direction: column;
gap: 2px;
}
.dialog-check strong {
font-weight: 600;
}
.dialog-check small,
.dialog-field-note {
color: var(--muted);
font-size: var(--fs-caption);
font-weight: 450;
line-height: 1.35;
}
/* A POSITIVE bind distance. `-4px` was written to claw back a flex `gap` that
the note's container happened to apply, and it is wrong wherever there is no
gap to claw back: in "Create a style" the body is a plain block, so the note
was pulled four pixels up and painted across the bottom edge of the input it
describes, straight through the focus ring. The two flex forms that DO carry
a gap (`.link-body`, `.bookmark-add`) pull the note back to this same 6px
themselves, via `--dlg-bind`, so the distance is now one number rather than a
correction to a number. */
.dialog-field-note {
margin: 6px 0 0;
}
/* The panel's own 6px gap already places this one. */
.link-mode-panel > .dialog-field-note {
margin-top: 0;
}
/* ---- Bookmark manager ---------------------------------------------------- */
/* Measured at 1280x720: a 460px card whose body's max-content is 338px — the
* "No bookmarks yet" line, which is the widest thing in it — so a quarter of
* every row was empty. Word's Bookmark dialog is about 360px wide and Google
* Docs' is a narrow list; a bookmark name is a few words, not a sentence.
*
* `fit-content` so a document with three short bookmarks gets a small card, and
* a ch ceiling so a 200-character bookmark name cannot drag it out — the name
* is ellipsised at any width, but `text-overflow` does not shrink an element's
* max-content contribution, so without the ceiling one long name would set the
* card width. */
.bookmark-dialog {
width: fit-content;
max-inline-size: min(100%, 46ch);
}
.bookmark-body {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* Proofing languages (docs/146 §3, ADR-042): Word's Options ▸ Language table,
one row per language. A real `
` rather than a list of flex rows, because
the columns are headed and a screen reader reads "Proofing, Installed" from the
header association rather than from a guess. */
.proof-lang-dialog {
width: fit-content;
max-inline-size: min(100%, 60ch);
}
.proof-lang-body {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.proof-lang-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-body);
}
.proof-lang-table th,
.proof-lang-table td {
padding: 6px 8px;
text-align: left;
vertical-align: middle;
}
.proof-lang-table thead th {
border-bottom: 1px solid var(--line);
color: var(--muted);
font-size: var(--fs-caption);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.proof-lang-row + .proof-lang-row th,
.proof-lang-row + .proof-lang-row td {
border-top: 1px solid var(--line);
}
.proof-lang-name {
font-weight: 550;
}
.proof-lang-state,
.proof-lang-size,
.proof-lang-words {
color: var(--muted);
white-space: nowrap;
}
.proof-lang-actions {
text-align: right;
}
.proof-lang-action {
white-space: nowrap;
}
/* Insert-field picker: a compact list of field kinds, styled to match the
bookmark manager's rows and the graphite dialog chrome. */
.field-body {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.field-list {
display: flex;
flex-direction: column;
gap: 2px;
max-height: 360px;
margin: 0;
padding: 0;
overflow: auto;
list-style: none;
overscroll-behavior: contain;
}
/* 58px per row for a label and a six-word note put 350px of list in a 500px
dialog. A picker's rows are the densest thing in either reference product —
Word's Field dialog is a plain listbox — so the row keeps its note and loses
the air around it. */
.field-choice {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
padding: 6px 8px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
}
.field-choice:hover {
background: var(--bg-2);
}
.field-choice:focus-visible {
outline: 2px solid var(--accent-text);
outline-offset: 1px;
}
.field-choice-icon {
flex: 0 0 auto;
color: var(--muted);
font-size: 19px;
}
.field-choice:hover .field-choice-icon {
color: var(--accent-text);
}
.field-choice-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.field-choice-label {
font-size: var(--fs-body);
font-weight: 550;
}
.field-choice-note {
color: var(--muted);
font-size: var(--fs-small);
font-weight: 450;
}
/* ---- Insert ▸ Symbol / Emoji pickers ------------------------------------- */
.glyph-panel-content {
display: flex;
min-height: 0;
flex: 1;
flex-direction: column;
}
/* Two lines of heading. No padding and no `height: auto` of its own any more:
* `.panel-head` is `min-height` plus `var(--pnl-pad-*)`, so a head that needs
* to grow simply grows and keeps the shell's inset (HF-265 D2). */
.glyph-panel .panel-head {
min-height: 58px;
align-items: flex-start;
}
.glyph-panel .panel-head .dialog-heading {
display: flex;
min-width: 0;
align-items: center;
gap: 9px;
}
.glyph-panel .panel-head small {
display: block;
color: var(--muted);
font-size: var(--fs-caption);
line-height: 1.3;
}
.glyph-panel-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
/* The shell's inset — see `.version-foot`. */
padding: var(--pnl-pad-y) var(--pnl-pad-x);
border-top: 1px solid var(--line);
color: var(--muted);
font-size: var(--fs-caption);
}
.glyph-body {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.glyph-search {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--bg-2);
color: var(--ink);
font: inherit;
}
.glyph-search:focus-visible {
outline: 2px solid var(--accent-text);
outline-offset: 1px;
}
.glyph-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.glyph-tab {
padding: 4px 10px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--muted);
font: inherit;
font-size: var(--fs-small);
line-height: 1.4;
cursor: pointer;
}
.glyph-tab:hover {
background: var(--bg-2);
color: var(--ink);
}
.glyph-tab:focus-visible {
outline: 2px solid var(--accent-text);
outline-offset: 1px;
}
.glyph-tab.is-active {
background: var(--accent-soft, var(--bg-2));
border-color: var(--accent-text);
color: var(--ink);
}
.glyph-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
gap: 4px;
max-height: 320px;
overflow: auto;
padding: 2px;
overscroll-behavior: contain;
}
.glyph-cell {
display: grid;
place-items: center;
aspect-ratio: 1 / 1;
min-height: 44px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--ink);
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.glyph-grid-emoji .glyph-cell {
font-size: 24px;
}
.glyph-cell:hover {
background: var(--bg-2);
border-color: var(--line);
}
.glyph-cell:focus-visible {
outline: 2px solid var(--accent-text);
outline-offset: 1px;
}
.glyph-empty {
margin: 0;
padding: 12px 4px;
color: var(--muted);
font-size: var(--fs-small);
}
/* ---- Insert/edit link dialog --------------------------------------------- */
.link-dialog {
width: min(460px, 100%);
}
/* One rhythm for a stacked form, shared with `.bookmark-add` below.
*
* Measured, before: EVERY vertical gap in this dialog was 12px. "Text to
* display" sat exactly as far from its own input as that input sat from the
* next label, so nothing in the form was grouped — the eye had to read the
* words to work out which label belonged to which box. `.dialog-field`, which
* the rest of the dialogs use, has bound its label at 6px all along; this
* dialog and the bookmark manager are the two that build their labels by hand
* and so never inherited it.
*
* So: 16px between rows, and the element directly after a label is pulled back
* to 6px — the same 6/16 the `.dialog-field` + `.properties-grid` pair produce,
* and the same ratio Word and Docs use. A helper note is bound to the control
* ABOVE it by the same amount, because that is what it is about. */
.link-body,
.bookmark-add {
/* Pulls a bound element back from the row gap to the 6px label distance. */
--dlg-bind: calc(6px - var(--space-4));
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.link-body > label + *,
.link-body > .dialog-field-note,
.bookmark-add > label + *,
.bookmark-add > .dialog-field-note {
margin-top: var(--dlg-bind);
}
.link-body > label {
color: var(--muted);
font-size: var(--fs-small);
font-weight: 600;
}
.link-optional {
color: var(--muted);
font-weight: 450;
}
.link-field-label {
color: var(--muted);
font-size: var(--fs-small);
font-weight: 600;
}
/* "Link to" beside its tab strip instead of over it. `wrap`, not `nowrap`:
at 400px, or with a translation that makes the two tab labels longer than
the card, the strip drops to its own line rather than being squeezed — which
is the stacked layout this replaces, reached only when it is needed. */
.link-mode-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
}
.link-body input,
.link-body select {
width: 100%;
height: var(--h-field);
padding: 0 10px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
/* `background-color`, NOT the `background` shorthand: this rule is (0,1,1) and the
shared select treatment is (0,1,0), so the shorthand would win on specificity
regardless of order and reset the caret image to none. `styles-control.spec.mjs`
caught exactly that here, from computed style. */
background-color: var(--surface);
color: var(--ink);
font: inherit;
font-size: var(--fs-body);
font-weight: 450;
}
/* Room on the right for the shared select caret. After the shorthand above, which
would otherwise reset it (same specificity, later wins). */
.link-body select {
padding-right: 26px;
}
.link-body input:focus,
.link-body select:focus {
outline: none;
border-color: var(--accent-text);
box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Sized to its two choices, for the same reason as `.dialog-body .segmented`:
this is the same control idiom under a different class, and it was a 416px
strip holding two labels. */
.link-mode {
display: flex;
width: fit-content;
max-width: 100%;
gap: 4px;
padding: 3px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--bg-2);
}
.link-mode-tab {
flex: 0 1 auto;
height: var(--h-search);
padding: 0 10px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--muted);
font: inherit;
font-size: var(--fs-small);
font-weight: 600;
cursor: pointer;
}
.link-mode-tab:hover {
color: var(--ink);
}
.link-mode-tab.is-active {
border-color: var(--line-strong);
background: var(--surface);
color: var(--ink);
}
.link-mode-tab:focus-visible {
outline: 2px solid var(--accent-text);
outline-offset: 1px;
}
.link-mode-panel {
display: flex;
flex-direction: column;
gap: 6px;
}
/* "ScreenTip (optional)" was painting as "ScreenTip(optional)": the space
before this span is the label's trailing whitespace, and it collapses away at
the end of the text run. The gap belongs to the word, so it is set here. */
.link-optional {
margin-inline-start: 0.35em;
}
#linkDialogNote.error,
#linkPlaceEmpty {
color: var(--danger);
font-weight: 550;
}
#linkPlaceEmpty {
color: var(--muted);
font-weight: 450;
}
/* Layout and rhythm share `.link-body`'s rule above. */
.bookmark-add > label {
color: var(--muted);
font-size: var(--fs-small);
font-weight: 600;
}
.bookmark-add-row {
display: flex;
gap: var(--space-2);
}
.bookmark-add-row > input {
flex: 1 1 auto;
min-width: 0;
height: var(--h-field);
padding: 0 10px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: var(--fs-body);
font-weight: 450;
}
.bookmark-add-row > input:focus {
outline: none;
border-color: var(--accent-text);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.bookmark-add .dialog-button {
flex: 0 0 auto;
}
#bookmarkAddNote.error {
color: var(--danger);
font-weight: 550;
}
.bookmark-list-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
color: var(--muted);
font-size: var(--fs-caption);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.bookmark-sort {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 7px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--muted);
font: inherit;
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
}
.bookmark-sort:hover {
background: var(--bg-2);
color: var(--ink);
}
.bookmark-sort .ms {
font-size: 15px;
}
.bookmark-list {
display: flex;
flex-direction: column;
gap: 2px;
max-height: 320px;
margin: 0;
padding: 0;
overflow: auto;
list-style: none;
overscroll-behavior: contain;
}
.bookmark-row {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 4px 4px 4px 8px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
}
.bookmark-row:hover {
background: var(--bg-2);
}
.bookmark-row.editing {
background: var(--bg-2);
border-color: var(--line);
}
.bookmark-goto {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
padding: 5px 6px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--ink);
font: inherit;
font-size: var(--fs-body);
font-weight: 550;
text-align: left;
cursor: pointer;
}
.bookmark-goto .ms {
flex: 0 0 auto;
color: var(--muted);
font-size: 17px;
}
.bookmark-goto:hover {
color: var(--accent-text);
}
.bookmark-goto:hover .ms {
color: var(--accent-text);
}
.bookmark-goto:focus-visible {
outline: 2px solid var(--accent-text);
outline-offset: 1px;
}
.bookmark-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bookmark-rename-input {
flex: 1 1 auto;
min-width: 0;
height: 30px;
padding: 0 8px;
border: 1px solid var(--accent-text);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: var(--fs-body);
font-weight: 550;
}
.bookmark-rename-input:focus {
outline: none;
box-shadow: 0 0 0 3px var(--accent-soft);
}
.bookmark-row-actions {
display: flex;
flex: 0 0 auto;
gap: 2px;
}
.bookmark-action {
display: grid;
width: 28px;
height: 28px;
place-items: center;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--muted);
cursor: pointer;
}
.bookmark-action .ms {
font-size: 17px;
}
.bookmark-action:hover {
background: var(--surface);
color: var(--ink);
box-shadow: inset 0 0 0 1px var(--line);
}
.bookmark-action.danger:hover {
color: var(--danger);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger-line) 40%, transparent);
}
.bookmark-action:focus-visible {
outline: 2px solid var(--accent-text);
outline-offset: 1px;
}
.bookmark-empty {
margin: 0;
/* The body's own 16px gap already separates this from the list head; 18px on
top of it opened a 34px void above one sentence. */
padding: var(--space-2) 4px var(--space-3);
color: var(--muted);
font-size: var(--fs-small);
text-align: center;
}
/* The legend's typography lives with the shared group heading, up beside
`.settings-label`, so the two cannot drift apart again. */
.dialog-group {
min-width: 0;
margin: 0;
padding: 0;
border: none;
}
.dialog-field-grid {
display: grid;
/* Pairs (Top/Bottom, Left/Right) stay side by side wherever two will fit,
and the cells are as wide as their content rather than half the dialog.
The old `@media (max-width: 620px) { 1fr }` override made phones WORSE by
stacking two 5-character fields into one 302px-wide column each; Word and
Docs keep those pairs paired at phone widths. */
grid-template-columns: repeat(auto-fit, minmax(clamp(7rem, 20vw, 9rem), max-content));
justify-content: start;
gap: clamp(8px, 1vw, 12px);
}
.orientation-segmented button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
}
.orientation-segmented .ms {
font-size: var(--icon-control);
}
.number-control {
display: grid;
/* A margin or a column count is at most five characters wide. Stretching the
box to `1fr` made it 182px at 1280 and 302px at 390 — wider on the phone,
where space is scarcest. Sized to its content instead, with the stepper
keeping its own fixed column. */
inline-size: fit-content;
/* Five characters ("22.00"), the input's own 14px of padding, AND the native
spin buttons Chromium lays out inside the input — roughly 17px, which the
old `1.25rem` allowance did not include. An A4 height of 11.69 needed 66px
of content in the 60px box that produced, so the last digit was cut off.
Same defect as the dialog button below: a fixed box, a label that grew. */
grid-template-columns: calc(5ch + 2.25rem) 32px;
height: var(--h-field);
overflow: hidden;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--surface);
}
.number-control input {
width: 100%;
min-width: 0;
padding: 0 4px 0 10px;
border: none;
outline: none;
background: transparent;
color: var(--ink);
font: inherit;
font-size: var(--fs-body);
font-variant-numeric: tabular-nums;
}
/* The unit sits INSIDE the field, not in a filled compartment beside it. A
ruled, shaded box around "in" made every measurement look like two controls
where there is one value, and Page setup alone shows six of them. Word and
Docs both render the unit as quiet text inside the field. */
.number-control > span {
display: grid;
place-items: center;
padding-inline-end: 2px;
color: var(--muted);
font-size: var(--fs-small);
font-weight: 500;
}
.oss {
font-size: var(--fs-caption);
color: var(--faint);
}
.link {
border: none;
background: none;
color: var(--accent-text);
font-weight: 600;
cursor: pointer;
padding: 0;
}
/* ---- Right-click context menu ---------------------------------------------- */
.context-menu {
position: fixed;
/* Above the floating selection toolbar (z-index 40) so a right-click on a
selection never has its menu occluded — or its items click-intercepted — by
the toolbar that hovers the same selection. */
z-index: var(--z-menu);
min-width: 224px;
max-width: min(340px, calc(100vw - 16px));
max-height: calc(100vh - 16px);
overflow: auto;
padding: 5px;
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--radius-popover);
box-shadow: var(--shadow-popover);
color: var(--ink);
overscroll-behavior: contain;
}
.context-menu[hidden] {
display: none;
}
.menu-item {
display: grid;
grid-template-columns: 18px minmax(0, 1fr) auto;
align-items: center;
column-gap: 10px;
width: 100%;
text-align: left;
padding: 5px 9px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--ink);
font-size: var(--fs-body);
cursor: pointer;
white-space: nowrap;
}
/* Leading-icon gutter — reserved on every row so labels align whether or not
a row carries an icon (Word / Google Docs convention). */
.menu-item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
opacity: 0.72;
}
.menu-item.active .menu-item-icon,
.menu-item:hover .menu-item-icon,
.menu-item:focus-visible .menu-item-icon {
opacity: 1;
}
/* Submenu affordance + the flyout that opens to the side. */
.menu-item-caret {
justify-self: end;
color: var(--faint);
font-size: 15px;
line-height: 1;
}
.menu-item.active .menu-item-caret,
.menu-item:hover .menu-item-caret,
.menu-item:focus-visible .menu-item-caret {
color: inherit;
}
/* Keep a submenu-parent lit while focus is inside its open flyout, so the
open path stays visible. */
.menu-item.has-submenu[aria-expanded="true"] {
background: var(--accent-soft);
color: var(--accent-text);
}
.editor-submenu {
z-index: var(--z-submenu);
}
.menu-item:hover,
.menu-item.active,
.menu-item:focus-visible {
background: var(--accent-soft);
color: var(--accent-text);
outline: none;
}
.menu-item.danger:hover,
.menu-item.danger.active,
.menu-item.danger:focus-visible {
background: color-mix(in srgb, var(--danger) 12%, transparent);
color: var(--danger);
}
.menu-item:disabled {
cursor: not-allowed;
color: var(--faint);
background: transparent;
}
.menu-item-label {
overflow: hidden;
text-overflow: ellipsis;
}
.menu-item-hint {
max-width: 150px;
overflow: hidden;
color: var(--faint);
font-size: var(--fs-small);
text-overflow: ellipsis;
}
/* Disabled rows are greyed in place (Google Docs style): the label, any
shortcut hint, and the leading icon all mute, and no reason text is shown. */
.menu-item:disabled .menu-item-icon {
opacity: 0.4;
}
.menu-item:disabled .menu-item-hint {
color: var(--faint);
}
.menu-divider {
height: 1px;
margin: 4px 6px;
background: var(--line);
}
.table-style-menu {
min-width: 220px;
display: grid;
gap: 4px;
}
.table-style-choice {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
border: 0;
border-radius: var(--radius-sm);
padding: 7px 9px;
background: transparent;
color: var(--ink);
text-align: left;
cursor: pointer;
}
.table-style-choice:hover {
background: var(--accent-soft);
}
.table-style-swatch {
display: grid;
grid-template-rows: repeat(3, 4px);
width: 42px;
overflow: hidden;
border: 1px solid var(--line-strong);
border-radius: 3px;
}
.table-style-swatch i:nth-child(1) { background: var(--accent); }
.table-style-swatch i:nth-child(2) { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.table-style-swatch i:nth-child(3) { background: var(--surface-alt); }
.table-style-clear { font-size: var(--fs-small); }
/* ---- Line & paragraph spacing menu ----------------------------------------- */
.spacing-menu {
/* Wide enough for "Remove space before paragraph" — Word's and Docs' own
wording — because a row truncated to "R…" is not a row. */
min-width: 264px;
}
/* An explanation under a field, for the state where the field is empty because
the value comes from somewhere else. `--faint` is the same tone the menu's
own headings use. */
.menu-note {
margin: 0;
padding: 0 10px 6px 37px;
color: var(--faint);
font-size: var(--fs-small);
line-height: 1.35;
}
/* A control showing a value the paragraph INHERITED from its style rather than
one it set itself. The number is the real, effective number — Word shows the
resolved value and Docs ticks the resolved preset — so this cannot be a
greyed-out "nothing here" treatment; it is an italic that says "not written
on this paragraph", with the sentence under the field carrying the meaning and
`--muted` (not `--faint`) keeping the value itself at AA against the menu. */
.spacing-menu [data-from-style] {
font-style: italic;
color: var(--muted);
}
.table-format-menu {
width: min(286px, calc(100vw - 16px));
max-height: calc(100vh - 16px);
overflow: auto;
overscroll-behavior: contain;
}
.menu-heading {
padding: 4px 10px 6px;
font-size: var(--fs-caption);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--faint);
}
.table-context {
padding: 0 10px 6px;
color: var(--muted);
font-size: var(--fs-small);
font-variant-numeric: tabular-nums;
}
/* Line-spacing rows carry a leading check column; the check shows on the
currently-applied value. */
.spacing-line {
display: flex;
align-items: center;
gap: 8px;
}
.menu-check {
width: 14px;
height: 14px;
flex: 0 0 14px;
opacity: 0;
background: currentcolor;
-webkit-mask: var(--check-svg) center / contain no-repeat;
mask: var(--check-svg) center / contain no-repeat;
--check-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}
.spacing-line[aria-checked="true"] .menu-check {
opacity: 1;
}
.spacing-line[aria-checked="true"] {
color: var(--accent-text);
}
.menu-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
font-size: var(--fs-body);
color: var(--ink);
}
.menu-row input {
margin-left: auto;
width: 56px;
height: 26px;
padding: 0 8px;
text-align: right;
border: 1px solid var(--line-strong);
border-radius: 6px;
background: var(--surface);
color: var(--ink);
font: inherit;
font-variant-numeric: tabular-nums;
}
.menu-row input:focus {
outline: none;
border-color: var(--accent-text);
}
.menu-row .menu-select {
margin-left: auto;
}
.menu-select {
height: 26px;
padding: 0 6px;
border: 1px solid var(--line-strong);
border-radius: 6px;
background: var(--surface);
color: var(--ink);
font: inherit;
cursor: pointer;
}
.menu-select:focus {
outline: none;
border-color: var(--accent-text);
}
.menu-unit {
color: var(--muted);
font-size: var(--fs-small);
width: 14px;
}
/* ---- Paragraph-options menu (shading + line/page-break flags) --------------- */
.menu-check-row {
display: flex;
align-items: center;
gap: 9px;
padding: 6px 10px;
font-size: var(--fs-body);
color: var(--ink);
cursor: pointer;
border-radius: 6px;
}
.menu-check-row:hover {
background: var(--accent-soft);
}
.menu-check-row input {
width: 15px;
height: 15px;
accent-color: var(--accent);
cursor: pointer;
}
.shade-row {
justify-content: space-between;
}
.shade-pick {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.shade-pick input[type="color"] {
width: 26px;
height: 26px;
padding: 0;
border: 1px solid var(--line-strong);
border-radius: 6px;
background: none;
cursor: pointer;
}
.chip-btn {
height: 26px;
padding: 0 12px;
border: 1px solid var(--line-strong);
border-radius: 6px;
background: var(--surface);
color: var(--muted);
font: inherit;
font-size: var(--fs-small);
cursor: pointer;
}
.chip-btn:hover {
background: var(--accent-soft);
color: var(--accent-text);
border-color: var(--accent-text);
}
.chip-row {
display: flex;
gap: 4px;
}
/* ---- Insert-table grid picker ---------------------------------------------- */
.grid-picker {
padding: 8px;
}
.grid-cells {
display: grid;
grid-template-columns: repeat(10, 15px);
gap: 2px;
}
.grid-cells .gc {
width: 15px;
height: 15px;
border: 1px solid var(--line-strong);
border-radius: 2px;
background: var(--surface);
cursor: pointer;
padding: 0;
}
.grid-cells .gc.on {
background: var(--accent-soft);
border-color: var(--accent-text);
}
.grid-label {
margin-top: 7px;
text-align: center;
font-size: var(--fs-small);
color: var(--muted);
font-variant-numeric: tabular-nums;
}
/* A finger cannot hit a 15px cell. Drawn for a mouse — Docs' own hover grid is
about this size — and measured at 15x15 on a phone, under this file's own
floor: WCAG 2.5.8 Target Size (Minimum), Level AA, which `phone_chrome.mjs`
exports as `MIN_TOUCH_TARGET_PX = 24`. Keyed on the POINTER, like every other
touch rule here, so a touchscreen laptop gets the same grid as a phone. Ten
24px columns and nine 2px gaps are 258px: an anchored popover still fits a
320px window with its 8px gutters. */
@media (pointer: coarse) {
.grid-cells {
grid-template-columns: repeat(10, 24px);
}
.grid-cells .gc {
width: 24px;
height: 24px;
}
}
/* ---- Command palette (⌘K) -------------------------------------------------- */
.cmd-overlay {
position: fixed;
inset: 0;
z-index: var(--z-palette);
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 12vh;
background: rgba(20, 22, 28, 0.34);
}
.cmd-overlay[hidden] {
display: none;
}
.cmd-box {
width: min(560px, 92vw);
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--radius-popover);
box-shadow: var(--shadow-popover);
overflow: hidden;
}
.cmd-search {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
}
.cmd-search-icon {
color: var(--muted);
font-size: var(--icon-control);
flex: 0 0 auto;
}
.cmd-search input {
flex: 1;
/* A flex item defaults to `min-width: auto`, which refuses to shrink below the
item's INTRINSIC width — and a text input's intrinsic width is its character
`size`, not its content. So this row's width depended on the platform's font
metrics: it fitted a 320px window on macOS (input 187px, row scrollWidth 292
== clientWidth) and overflowed on CI's Linux faces (scrollWidth 366 against a
292px client), which is how a genuine sideways scroller reached `main` while
every local run was green. `min-width: 0` is the textbook fix and makes the
row's width depend on the window instead of on the font. */
min-width: 0;
border: none;
background: none;
color: var(--ink);
font: inherit;
font-size: var(--fs-medium);
outline: none;
}
.cmd-kbd {
font-size: var(--fs-caption);
color: var(--faint);
border: 1px solid var(--line);
border-radius: 5px;
padding: 2px 6px;
}
.cmd-list {
max-height: 340px;
overflow: auto;
padding: 6px;
overscroll-behavior: contain;
}
.cmd-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--ink);
font: inherit;
font-size: var(--fs-body);
text-align: left;
cursor: pointer;
}
.cmd-item .cmd-group {
color: var(--faint);
font-size: var(--fs-small);
}
.cmd-item .cmd-hint {
margin-left: auto;
color: var(--faint);
font-size: var(--fs-small);
}
.cmd-item.sel,
.cmd-item:hover {
background: var(--accent-soft);
color: var(--accent-text);
}
.cmd-empty {
padding: 16px;
text-align: center;
color: var(--faint);
font-size: var(--fs-body);
}
/* ---- Find / replace -------------------------------------------------------- */
.find-panel {
position: fixed;
top: calc(var(--h-header) + 88px);
right: 18px;
z-index: var(--z-find);
display: flex;
flex-direction: column;
width: min(440px, calc(100vw - 36px));
max-height: calc(100vh - var(--h-header) - 104px);
overflow: hidden;
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--radius-popover);
box-shadow: var(--shadow-popover);
}
.find-panel[hidden] {
display: none;
}
/* Find and replace keeps its GEOMETRY — fixed, top-right, so it does not cover
* the text you are searching, which is Word's and Google Docs' model and not a
* defect — but takes the shell's PADDING from the same pair as every other
* panel. It was already the only panel whose head and body agreed, and
* `var(--space-2) var(--space-4)` is where `--pnl-pad-y`/`--pnl-pad-x` came
* from; naming them here is what stops the two drifting apart again. The right
* inset was `--space-3` and is now symmetric, as the dialog heads are. */
.find-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-height: 48px;
padding: var(--pnl-pad-y) var(--pnl-pad-x);
border-bottom: 1px solid var(--line);
}
.find-panel-head > div {
display: flex;
min-width: 0;
align-items: baseline;
gap: var(--space-2);
}
.find-panel-title {
color: var(--ink);
font-size: var(--fs-medium);
font-weight: 650;
}
.find-panel-body {
display: grid;
min-height: 0;
overflow: auto;
gap: var(--space-3);
padding: var(--pnl-pad-y) var(--pnl-pad-x);
overscroll-behavior: contain;
}
.find-search-row {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--h-control) var(--h-control);
align-items: center;
gap: 6px;
}
.find-panel input[type="text"] {
width: 100%;
min-width: 0;
height: var(--h-field);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--ink);
padding: 0 8px;
font: inherit;
font-size: var(--fs-body);
outline: none;
}
.find-panel input[type="text"]:focus {
border-color: var(--accent-text);
box-shadow: 0 0 0 2px var(--accent-soft);
}
.find-panel .btn.icon-only {
height: var(--h-control);
}
.find-status {
color: var(--muted);
font-size: var(--fs-small);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.find-status.miss {
color: var(--danger);
}
.find-status:empty {
display: none;
}
.find-options {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.find-option {
display: flex;
align-items: center;
gap: 6px;
min-height: var(--h-control);
padding: 4px 9px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
color: var(--muted);
font-size: var(--fs-small);
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
.find-option:has(input:checked) {
background: var(--accent-soft);
color: var(--accent-text);
border-color: var(--accent-text);
}
.find-option input {
width: 14px;
height: 14px;
margin: 0;
accent-color: var(--accent);
}
.find-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
padding-top: var(--space-1);
}
.chip-btn-primary {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
}
.chip-btn-primary:hover {
filter: brightness(1.05);
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
}
/* ---- Floating selection toolbar -------------------------------------------- */
.sel-toolbar {
position: fixed;
z-index: var(--z-selection-toolbar);
display: flex;
align-items: center;
gap: 2px;
padding: 4px 6px;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--radius-popover);
box-shadow: var(--shadow-popover);
}
.sel-toolbar[hidden] {
display: none;
}
.sel-divider {
width: 1px;
height: 20px;
background: var(--line-strong);
margin: 0 3px;
}
.sel-toolbar .fmt {
color: var(--ink);
}
.sel-toolbar .fmt:hover:not(:disabled) {
background: var(--bg-2);
}
.sel-toolbar .fmt[aria-pressed="true"] {
color: var(--accent-text);
background: var(--accent-soft);
border-color: var(--accent-line);
}
/* Text-color / highlight buttons on the floating bar: a glyph over a swatch bar,
matching the ribbon's color-apply half, opening the same swatch popovers. */
.sel-toolbar .sel-color-btn {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--ink);
cursor: pointer;
transition: background 0.11s;
}
.sel-toolbar .sel-color-btn .color-apply-glyph {
font-size: 14px;
font-weight: 700;
line-height: 1;
}
.sel-toolbar .sel-color-btn .ms.color-apply-glyph {
font-size: var(--icon-control);
font-weight: 400;
}
.sel-toolbar .sel-color-btn:hover {
background: var(--bg-2);
}
.sel-toolbar .sel-color-btn[aria-expanded="true"] {
background: var(--accent-soft);
color: var(--accent-text);
}
.sel-toolbar .sel-color-btn:focus-visible {
outline: 2px solid var(--accent-text);
outline-offset: 1px;
}
/* A host-owned affordance for canvas-painted links. The engine supplies the
exact authored range/target; this chip supplies visible, policy-checked
activation without making DOM text authoritative. */
.link-chip {
position: fixed;
z-index: var(--z-link-chip);
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
width: max-content;
max-width: min(440px, calc(100vw - 24px));
min-width: min(300px, calc(100vw - 24px));
padding: 8px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-popover);
background: var(--surface);
box-shadow: var(--shadow-popover);
}
.link-chip[hidden] {
display: none;
}
.link-chip-icon {
display: grid;
width: 30px;
height: 30px;
place-items: center;
border-radius: var(--radius-sm);
color: var(--accent-text);
background: var(--accent-soft);
}
.link-chip-icon .ms {
font-size: 17px;
}
.link-chip-copy {
display: flex;
min-width: 0;
flex-direction: column;
line-height: 1.25;
}
.link-chip-kind {
color: var(--faint);
font-size: var(--fs-caption);
font-weight: 700;
letter-spacing: 0.045em;
text-transform: uppercase;
}
.link-chip-target {
overflow: hidden;
color: var(--ink);
font-size: var(--fs-small);
font-weight: 550;
text-overflow: ellipsis;
white-space: nowrap;
}
.link-chip-action {
height: 30px;
padding: 0 11px;
border: 1px solid var(--accent-line);
border-radius: var(--radius-sm);
color: var(--accent-text);
background: var(--accent-soft);
font-weight: 650;
cursor: pointer;
}
.link-chip-action:hover:not(:disabled) {
filter: brightness(1.05);
}
.link-chip-action:disabled {
border-color: var(--line);
color: var(--faint);
background: var(--bg-2);
cursor: default;
}
.link-chip-danger {
color: var(--danger);
}
/* Border presets: a row of buttons each showing a mini box with the relevant
edge(s) emphasized (CSS-drawn — no icon assets). */
.border-row {
justify-content: space-between;
}
.border-presets {
display: flex;
gap: 2px;
}
.border-btn {
display: grid;
place-items: center;
width: 27px;
height: 27px;
padding: 0;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
cursor: pointer;
}
.border-btn:hover {
background: var(--bg-2);
}
.border-btn[aria-pressed="true"] {
background: var(--accent-soft);
border-color: var(--accent-line);
}
.border-btn .bx {
width: 15px;
height: 15px;
border: 1px solid var(--faint);
}
.border-btn[data-border="none"] .bx {
border-style: dashed;
}
.border-btn[data-border="box"] .bx {
border: 1.5px solid var(--ink);
}
.border-btn[data-border="top"] .bx {
border-top: 2px solid var(--ink);
}
.border-btn[data-border="bottom"] .bx {
border-bottom: 2px solid var(--ink);
}
.border-btn[data-border="left"] .bx {
border-left: 2px solid var(--ink);
}
.border-btn[data-border="right"] .bx {
border-right: 2px solid var(--ink);
}
.border-color input[type="color"] {
width: 26px;
height: 26px;
padding: 0;
border: 1px solid var(--line-strong);
border-radius: 6px;
background: none;
cursor: pointer;
}
/* ---- Ribbon (tabbed toolbar) ----------------------------------------------- */
/* Canvas/grid ribbon (redesign): full-bleed and flat — no floating rounded
card. It is one horizontal band of the shell grid, separated from the bar
above and the workarea below by single hairlines. */
.ribbon {
background: var(--bg);
border-radius: var(--radius);
margin: 0;
border: none;
border-bottom: 0;
border-radius: 0;
overflow: hidden;
z-index: 2;
}
/* The tab strip is NOT a row of its own any more — it sits in the header, in
the slot the compact chrome gives its menu bar (docs/123 §3). So it carries
no horizontal padding of its own (the header's 14px is the page gutter, and
the strip aligns with the title above it) and no bottom rule (there is no
band edge to draw here; the selected tab's own underline is the indicator).
It scrolls under a trailing fade exactly as `.app-menu-bar` does, and for the
same reason: the 58px header is fully committed, a visible scrollbar would
have to come out of the strip's own height, and a name cut off with no cue is
`109` HF-097. The chevron is a sibling, so it never scrolls away. */
.ribbon-nav {
grid-area: nav;
display: flex;
align-items: center;
gap: 2px;
min-width: 0;
}
/* The strip takes the whole row so the chevron lands at the far right, where
both references put the ribbon's fold control (Word's caret at the ribbon's
right edge; Google Docs' `^` at the right end of its toolbar, measured).
Left to shrink-wrap it sat flush against the last tab and read as a 9th one. */
.ribbon-nav .ribbon-tabs {
flex: 1 1 auto;
}
.ribbon-tabs {
display: flex;
align-items: stretch;
gap: 2px;
height: var(--h-tab);
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(to right, black calc(100% - 22px), transparent);
mask-image: linear-gradient(to right, black calc(100% - 22px), transparent);
}
.ribbon-tabs::-webkit-scrollbar {
display: none;
}
/* Compact ↔ ribbon view toggle: collapses the whole band to just the tab strip
(Word's "collapse the ribbon"), giving the document more room. */
.ribbon-view-toggle {
margin-left: auto;
align-self: center;
display: inline-grid;
place-items: center;
width: 28px;
height: 26px;
border: 1px solid transparent;
border-radius: 6px;
background: none;
color: var(--muted);
cursor: pointer;
}
.ribbon-view-toggle:hover {
background: var(--bg-2);
color: var(--ink);
}
.ribbon-view-toggle .ms {
font-size: 20px;
}
.ribbon.is-collapsed {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.ribbon.is-collapsed .ribbon-body {
display: none;
}
/* Compact view deletes the band, so the chrome's bottom edge moves up with it
and every panel anchored to `--chrome-bottom` follows. `:has()` reads the
ribbon's own state rather than requiring a second class on , so the
token can never disagree with what is actually on screen. */
body:has(.ribbon.is-collapsed) {
/* The tab strip lives in the header now, so a collapsed ribbon contributes
nothing at all and the chrome ends where the header ends. */
--chrome-bottom: var(--h-header);
}
/* Compact chrome replaces the whole ribbon — tab strip AND band — with one
44px toolbar, so the chrome's bottom edge moves up by more than the collapsed
case above and every `--chrome-bottom`-anchored panel has to follow. Without
this the object/size, paragraph and table panels sit ~80px too low, hanging
off their own top edge.
Matches the sibling rule's approach: read the state that is actually on
screen (`body.compact-mode`, set by `setChromeMode`) so the token cannot
disagree with the rendered chrome. */
body.compact-mode {
/* Header plus the compact toolbar's own height and bottom hairline. */
--chrome-bottom: calc(var(--h-header) + var(--h-compact-bar) + 14px);
}
/* 12px of side padding, which is ONLYOFFICE's own tab metric
(`.toolbar .tabs li > a { padding: 0 12px }` — `toolbar.less`, and the same
value in their shipped 9.4.1 stylesheet). It was 14px, chosen by nobody;
across 8 tabs that is 32px the header does not have to spare. */
.ribbon-tab {
height: var(--h-tab);
padding: 0 12px;
border: none;
background: none;
color: var(--muted);
font: inherit;
font-size: var(--fs-ribbon-tab);
font-weight: 600;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.ribbon-tab:hover:not(:disabled) {
color: var(--ink);
}
.ribbon-tab[aria-selected="true"] {
color: var(--accent-text);
border-bottom-color: var(--accent-text);
}
.ribbon-tab:disabled {
opacity: 0.4;
cursor: default;
}
.ribbon-body {
position: relative;
}
.ribbon-panel {
display: flex;
align-items: stretch;
/* The band is a rounded card floating on the grey chrome field — the same
treatment the compact toolbar gets, so the two modes read as one system
rather than one pill and one full-bleed strip. White on grey, so it
separates by SHADE and needs no border. */
background: var(--surface);
margin: var(--chrome-card-inset-y) var(--chrome-card-inset-x);
border-radius: var(--chrome-card-radius);
/* Vertical padding is free; horizontal padding is not — it comes straight out
of the band's group budget (see --chrome-card-inset-x). The groups carry
their own inline padding, so the panel needs only enough to keep the first
control off the card's rounded edge. */
padding: 6px clamp(2px, 0.35vw, 8px) 5px;
/* No horizontal scrollbar ever (docs/64): a single no-wrap row whose
overflowing groups collapse into the "⋯" menu instead. */
overflow: hidden;
min-width: 0;
/* Every band is the same height, so switching tabs never moves the document.
`.rgroup` already centres its rows and `align-items: stretch` above makes a
one-row group fill the band, so its separator runs the full height — which
is what makes Review and View read as the same object as Home rather than
as a thinner strip. */
min-height: var(--ribbon-band-h);
}
.ribbon-panel[hidden] {
display: none;
}
/* With the captions gone (docs/123 §4) the vertical rule and the spacing are
the ONLY thing that says where one group ends and the next begins, so both
are ONLYOFFICE's: `.group { padding-left: 6px }` plus a `.separator` with
`margin-left: 6px` — 12px of air around a one-pixel rule
(`apps/common/main/resources/less/toolbar.less:498,545`). It was 2px a side
around a `--line` hairline, which under a caption row was enough and without
one is not: at 4px the Font group's last control sat against the Paragraph
group's first. `--line-strong` rather than `--line` for the same reason. */
.rgroup {
display: flex;
flex-direction: column;
align-items: center;
/* Controls fill the band, caption pinned under them — Word's group box. */
justify-content: space-between;
gap: 3px;
padding: 1px 8px 0;
border-right: 1px solid var(--line-strong);
flex: 0 0 auto;
}
.rgroup:last-child {
border-right: none;
}
.rgroup-ctl {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 32px;
}
.rgroup-mini-divider {
width: 1px;
height: 22px;
margin-inline: 2px;
background: var(--line);
}
.table-ribbon .fmt {
position: relative;
}
/* The badge's containing block is the BUTTON that carries it, wherever that
button is. It was only ever made so for `.table-ribbon .fmt` above, so the
one badge placed outside the Table band — a "G" on Review ▸ Grammar — had
no positioned button to anchor to and resolved against `.ribbon-body`
instead: `right: 2px; bottom: 1px` of the whole ribbon, painted as a stray
"G" in the band's bottom-right corner, ~600px from the control it labelled.
Stated on the badge's owner rather than on a band, so a badge cannot escape
its control again by being used somewhere new.
`ribbon-glyphs.spec.mjs` asserts nothing in a band paints outside the
control that holds it. */
.fmt:has(> .table-command-badge) {
position: relative;
}
.table-ribbon .table-danger:hover:not(:disabled) {
background: color-mix(in srgb, var(--danger) 12%, transparent);
color: var(--danger);
}
.table-command-badge {
position: absolute;
right: 2px;
bottom: 1px;
display: grid;
min-width: 10px;
height: 10px;
place-items: center;
border-radius: 3px;
background: var(--surface);
color: var(--muted);
font-size: 7px;
font-weight: 750;
line-height: 1;
}
.table-context-group {
min-width: 132px;
max-width: 190px;
justify-content: center;
text-align: left;
}
.table-context-group .rgroup-hint {
text-align: left;
}
/* Ribbon-group captions ARE drawn, which is Word's ribbon and is the standard
the rest of this chrome already commits to: the tab strip is Word's tab set
(File · Home · Insert · Layout · References · Review · View) with a
contextual Table tab appended Word's way.
docs/123 §4 removed them and followed ONLYOFFICE, whose band has no caption
element at all. Seen on screen that left a band with no stated structure —
the only grouping cue was a `--line-strong` hairline that is all but
invisible in dark theme — so the band read as one undifferentiated run of
icons. The owner looked at the result and rejected it: pick one standard.
Word's, then, whole: captions under centred groups, and a separator that can
actually be seen.
The caption is also the group's accessible name (docs/105 P3) and the "⋯"
overflow menu's section heading, so it was always in the DOM; this only stops
hiding it. It costs ~15px of band height, which is what Word spends. */
.rgroup-label {
max-width: 100%;
overflow: hidden;
color: var(--faint);
font-size: var(--fs-ribbon-caption);
font-weight: 500;
line-height: 1;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
/* …except in the overflow menu, which is a menu, not a band: there the caption
is the only thing that says which group a stack of icons came from. */
/* …and in the overflow menu it is a SECTION HEADING rather than a caption under
a group, so it takes the heading treatment and sits above its controls. */
#ribbonOverflowMenu .rgroup-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
text-align: left;
}
.rgroup-note {
justify-content: center;
}
/* --- Home band composition (template.png / docs/64) ----------------------- */
/* General accessible-only utility for controls or explanatory text that must
remain in the accessibility tree without occupying visual layout. */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
/* Two stacked control rows inside one group (Font, Paragraph). */
.fmt-rows {
display: flex;
flex-direction: column;
gap: 3px;
}
.fmt-row-line {
display: inline-flex;
align-items: center;
gap: 3px;
min-height: 26px;
}
/* Keep the last Font control visibly inside its group instead of touching the
Paragraph divider. The slightly tighter row gap matches the Vellum source.
(Text color + highlight are now real dropdown swatch pickers — see the
"Formatting toolbar UX v2" block at the end of this file.) */
[data-group="font"] .fmt-row-line {
gap: 2px;
}
/* Clipboard group: a big Paste button beside stacked Cut/Copy text rows. */
.clipboard-ctl {
align-items: stretch;
gap: 2px;
}
/* Clipboard remains visibly discoverable even before a caret/range makes an
action available; disabled controls are muted, not visually erased. */
.clipboard-ctl .fmt:disabled {
opacity: 0.82;
color: var(--faint);
}
.undo-ctl {
align-items: center;
}
/* Two stacked rows of small buttons inside one group. This is ONLYOFFICE's
`.elset` (`apps/common/main/resources/less/toolbar.less:530`): one row the
height of a small button, the next one below it, and the pair filling the
group. It was declared in the markup and styled nowhere — only `.undo-stack`
carried the rules — so a second user of it (Clipboard, Editing) got a
horizontal row. */
.stackrows {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
}
.undo-stack {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
}
.undo-stack .fmt {
height: 30px;
}
.fmt.fmt-big {
flex-direction: column;
gap: 2px;
width: auto;
min-width: 44px;
height: auto;
padding: 5px 6px;
}
.editing-ctl {
align-items: stretch;
gap: 2px;
}
.fmt-big .ms {
font-size: 22px;
}
.fmt-big-label {
font-size: var(--fs-ribbon-caption);
font-weight: 500;
line-height: 1;
}
/* Styles is ONE control now (docs/114): a gallery of up to six preview cards. The
all-styles `