/* ContentOps decorator styles — injected by customer-side bootstrap */ .contentops-block { position: relative; padding-left: 0.75rem; margin-left: -0.75rem; border-left: 3px solid transparent; transition: background-color 0.2s; } .contentops-block--error { border-left-color: hsl(0 70% 50%); background: hsla(0, 70%, 50%, 0.05); } .contentops-block--warning { border-left-color: hsl(40 90% 55%); background: hsla(40, 90%, 55%, 0.05); } .contentops-mark { padding: 0 0.125rem; border-radius: 2px; cursor: help; border-bottom: 2px solid; } .contentops-mark--error { background: hsla(0, 70%, 50%, 0.18); color: hsl(0 70% 35%); border-bottom-color: hsl(0 70% 50%); } .contentops-mark--warning { background: hsla(40, 90%, 55%, 0.18); color: hsl(40 80% 30%); border-bottom-color: hsl(40 90% 55%); } .contentops-actions { position: absolute; top: 0.25rem; right: -2.25rem; display: none; gap: 0.25rem; } .contentops-block:hover .contentops-actions { display: flex; } /* Iframe-indications design commit 4 — when the operator flips the "edit mode" toggle in the Hub view-mode bar, all .contentops-actions bars (block-level) AND .contentops-inline-actions bars (inline-element level) become permanently visible. Useful for systematic cleanup without hover-hunting. The Hub sets the class on the iframe's via the contentops/edit-mode bridge message. */ html.contentops-edit-mode-on .contentops-actions { display: flex !important; } html.contentops-edit-mode-on .contentops-inline-actions { display: inline-flex !important; } .contentops-action-btn { width: 2rem; height: 2rem; border-radius: 0.375rem; background: white; border: 1px solid #ccc; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.875rem; line-height: 1; padding: 0; } .contentops-action-btn:hover { background: #f5f5f5; } /* Phase 5 fix: compact article-level summary chip. The previous verbose * banner duplicated every article-level finding in a wall of text, which * (a) duplicated the right-rail Diagnosis panel, (b) pushed the actual * article content far below the fold, and (c) had no click-to-jump. Now * a single-line chip with a count + a compact list opens on hover/focus. */ .contentops-banner { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid hsla(40, 90%, 55%, 0.4); background: hsla(40, 90%, 55%, 0.08); border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; color: hsl(35, 70%, 35%); cursor: default; position: relative; } .contentops-banner .contentops-banner__dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: hsl(40, 90%, 55%); } /* P67 — banner is now a pure CTA: count + severity pills + "View in panel →". * No hover-popover (the popover content duplicated the right-rail panel). */ .contentops-banner__count { font-weight: 600; } .contentops-banner__pills { display: inline-flex; gap: 0.25rem; margin-left: 0.25rem; } .contentops-banner__pill { display: inline-flex; align-items: center; padding: 0.0625rem 0.375rem; border-radius: 0.25rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; } .contentops-banner__pill--error { background: hsla(0, 70%, 50%, 0.16); color: hsl(0, 70%, 35%); } .contentops-banner__pill--warning { background: hsla(40, 90%, 55%, 0.18); color: hsl(35, 70%, 30%); } .contentops-banner__pill--info { background: hsla(220, 65%, 55%, 0.16); color: hsl(220, 60%, 35%); } .contentops-banner__cta { margin-left: 0.5rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: hsl(220, 80%, 45%); } .contentops-banner[role="button"] { cursor: pointer; } .contentops-banner[role="button"]:hover { background: hsla(40, 90%, 55%, 0.16); } .contentops-banner[role="button"]:hover .contentops-banner__cta { text-decoration: underline; } .contentops-diff--add { background: hsla(140, 60%, 45%, 0.18); text-decoration: none; } .contentops-diff--remove { background: hsla(0, 70%, 50%, 0.18); } /* Wave 5 c6 — distinct pills for AI-emitted structured ops so the operator can see "AI swapped image" / "AI added link" at a glance instead of opaque text diffs. */ .contentops-diff--image-swap { display: inline-block; margin-left: 0.4em; padding: 0.05em 0.5em; border: 1px solid hsla(280, 60%, 55%, 0.55); border-radius: 999px; background: hsla(280, 60%, 55%, 0.10); color: hsl(280, 65%, 35%); font-size: 0.78em; font-weight: 700; white-space: nowrap; } .contentops-diff--link-add { display: inline-block; margin-left: 0.4em; padding: 0.05em 0.5em; border: 1px solid hsla(160, 60%, 45%, 0.55); border-radius: 999px; background: hsla(160, 60%, 45%, 0.10); color: hsl(160, 65%, 30%); font-size: 0.78em; font-weight: 700; white-space: nowrap; } .contentops-diff--link-remove { display: inline-block; margin-left: 0.4em; padding: 0.05em 0.5em; border: 1px solid hsla(15, 60%, 50%, 0.55); border-radius: 999px; background: hsla(15, 60%, 50%, 0.10); color: hsl(15, 65%, 35%); font-size: 0.78em; font-weight: 700; white-space: nowrap; } /* P17 — distinct visual for "moved" diff entries. Pre-P17 reorder showed as remove + add which confused operators. Move pill is inline, neutral color, with a directional glyph. */ .contentops-diff--move { display: inline-block; margin-left: 0.4em; padding: 0.05em 0.5em; border: 1px dashed hsla(220, 60%, 50%, 0.55); border-radius: 999px; background: hsla(220, 60%, 50%, 0.10); color: hsl(220, 65%, 35%); font-size: 0.78em; font-weight: 700; white-space: nowrap; vertical-align: baseline; cursor: help; } /* Wave 4b — AI-vs-manual provenance badge. Renders inline next to every diff entry so operators can tell at a glance which changes were made by the AI fix loop and which were applied manually via EditBlockDialog (P18). Click-to-toggle visibility lives on the parent .contentops-diff element via the badge's title attribute. */ .contentops-diff-source { display: inline-block; margin-left: 0.35em; padding: 0.04em 0.45em; border-radius: 999px; font-size: 0.7em; font-weight: 700; white-space: nowrap; vertical-align: baseline; cursor: help; letter-spacing: 0.02em; text-transform: uppercase; } .contentops-diff-source--ai { background: hsla(265, 75%, 55%, 0.12); color: hsl(265, 70%, 38%); border: 1px solid hsla(265, 75%, 55%, 0.35); } .contentops-diff-source--manual { background: hsla(160, 70%, 40%, 0.14); color: hsl(160, 75%, 28%); border: 1px solid hsla(160, 70%, 40%, 0.40); } /* Wave 4b — orphan manual edits get their own pill (similar to the move pill but green) so operators can tell that a block was hand-edited even when the AI fix loop didn't touch it. */ .contentops-diff--manual-edit { display: inline-block; margin-left: 0.4em; padding: 0.05em 0.5em; border: 1px dashed hsla(160, 70%, 40%, 0.50); border-radius: 999px; background: hsla(160, 70%, 40%, 0.10); color: hsl(160, 75%, 26%); font-size: 0.78em; font-weight: 700; white-space: nowrap; vertical-align: baseline; cursor: help; } .contentops-finding-flash { outline: 3px solid #fbbf24; background-color: rgba(251, 191, 36, 0.25); transition: outline 0.3s, background-color 0.3s; } /* Audit A6 — visual cue when AI's quoted span couldn't be located in the rendered DOM. Dashed orange = "approximate target — flashed whole block". */ .contentops-finding-flash--unmatched { outline: 3px dashed #f97316; background-color: rgba(249, 115, 22, 0.18); transition: outline 0.3s, background-color 0.3s; } /* Wave 6 — inline-element editing affordances. Wraps an , , or
  • to anchor a small floating pencil/trash bar that opens the appropriate Hub-side dialog. Hidden until the wrapped element is hovered; the block-level .contentops-actions bar auto-hides while an inline target is hovered, preventing UI overlap. */ .contentops-inline-target { position: relative; display: inline-block; max-width: 100%; } .contentops-inline-target--li { display: list-item; } .contentops-inline-target--faq { display: block; } .contentops-inline-target--block-img { display: inline-block; } .contentops-inline-actions { position: absolute; top: 0; right: 0; transform: translate(0.25rem, -1.25rem); display: none; gap: 0.125rem; z-index: 5; pointer-events: auto; } .contentops-inline-target:hover > .contentops-inline-actions, .contentops-inline-target:focus-within > .contentops-inline-actions { display: inline-flex; } /* Hide block-level action bar while an inline target inside it is hovered — prevents the two bars from stacking on each other. */ .contentops-block:has(.contentops-inline-target:hover) .contentops-actions, .contentops-block:has(.contentops-inline-target:focus-within) .contentops-actions { display: none; } .contentops-inline-action-btn { width: 1.5rem; height: 1.5rem; border-radius: 0.375rem; background: white; border: 1px solid #cbd5e1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.75rem; line-height: 1; padding: 0; color: #334155; box-shadow: 0 1px 2px rgba(0,0,0,0.06); } .contentops-inline-action-btn:hover { background: #f1f5f9; } .contentops-inline-action-btn--remove { border-color: #fca5a5; color: #b91c1c; } .contentops-inline-action-btn--remove:hover { background: #fef2f2; } /* Iframe-indications design commit 1 — custom finding popover that replaces the HTML 'title=' attribute hover. Pre-fix, every per-finding description lived in 'title=' which: - Has 600ms hover delay (sluggish) - Can't render HTML (rule name + finding + suggestion all in one opaque string) - Can't be styled (looks different per OS, disappears on iOS) - Can't have action buttons inside it Post-fix, the .contentops-mark element is wrapped with a popover that shows on hover OR keyboard focus, with rule name (bold), finding text (mid-weight), and fix_hint (muted). Click the mark to PIN the popover open until the user clicks elsewhere or presses Escape. The popover is positioned absolute relative to the .contentops-mark wrapper; CSS transitions handle the show/hide so the chrome can be styled cleanly without OS-tooltip variance. */ .contentops-mark { position: relative; } .contentops-mark__popover { position: absolute; top: 100%; left: 0; margin-top: 0.25rem; z-index: 12; display: none; min-width: 240px; max-width: 360px; padding: 0.5rem 0.75rem; background: #ffffff; border: 1px solid hsla(0, 0%, 60%, 0.35); border-radius: 0.5rem; box-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.10); font-size: 0.78rem; line-height: 1.35; color: hsl(220, 12%, 25%); white-space: normal; pointer-events: auto; text-align: left; } .contentops-mark:hover > .contentops-mark__popover, .contentops-mark:focus-within > .contentops-mark__popover, .contentops-mark--pinned > .contentops-mark__popover { display: block; } .contentops-mark__popover-title { font-weight: 700; margin-bottom: 0.125rem; color: hsl(220, 30%, 15%); } .contentops-mark__popover-finding { margin-bottom: 0.25rem; } .contentops-mark__popover-fix { display: block; margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px dashed hsla(0, 0%, 60%, 0.3); color: hsl(140, 50%, 30%); } /* Iframe-indications design commit 12 — deep-link button at the bottom of the popover. Posts contentops/focus-finding so the Hub right-rail scrolls to the matching diagnosis row. */ .contentops-mark__popover-link { display: inline-block; margin-top: 0.4rem; padding: 0.15rem 0.5rem; background: hsl(220, 80%, 95%); border: 1px solid hsl(220, 80%, 75%); border-radius: 0.375rem; color: hsl(220, 80%, 35%); font-size: 0.7rem; font-weight: 600; cursor: pointer; text-decoration: none; } .contentops-mark__popover-link:hover, .contentops-mark__popover-link:focus { background: hsl(220, 80%, 90%); outline: none; } .contentops-mark--error > .contentops-mark__popover { border-color: hsla(0, 70%, 50%, 0.45); } .contentops-mark--error .contentops-mark__popover-title { color: hsl(0, 70%, 35%); } .contentops-mark--warning > .contentops-mark__popover { border-color: hsla(40, 90%, 55%, 0.45); } .contentops-mark--warning .contentops-mark__popover-title { color: hsl(35, 70%, 35%); } /* Iframe-indications design commit 3 — always-visible severity glyph in the LEFT margin of every block that has at least one finding. The CSS pseudo-element renders inside a virtual gutter the .contentops-block already creates via padding-left. Pre-fix the operator could only see severity by HOVERING (which revealed the action bar). Post-fix the icon is permanently visible in the left margin so the operator can scan vertical position to find issues without scrolling-and-hovering. */ .contentops-block--error, .contentops-block--warning { position: relative; padding-left: 1.5rem; } .contentops-block--error::before, .contentops-block--warning::before { content: ""; position: absolute; left: 0.25rem; top: 0.45rem; width: 0.85rem; height: 0.85rem; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 0.65rem 0.65rem; cursor: help; pointer-events: none; border: 1.5px solid; } .contentops-block--error::before { border-color: hsl(0, 70%, 50%); background-color: hsla(0, 70%, 50%, 0.18); /* Tiny SVG ! glyph */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23b91c1c' d='M7 3h2v6H7zm0 8h2v2H7z'/%3E%3C/svg%3E"); } .contentops-block--warning::before { border-color: hsl(40, 90%, 55%); background-color: hsla(40, 90%, 55%, 0.18); /* Tiny SVG warning triangle */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23b45309' d='M8 2 L14 13 L2 13 Z M7 6h2v4H7zm0 5h2v1H7z' /%3E%3C/svg%3E"); } /* RTL inverts the gutter so the icon stays on the start side. */ [dir="rtl"] .contentops-block--error, [dir="rtl"] .contentops-block--warning { padding-left: 0; padding-right: 1.5rem; } [dir="rtl"] .contentops-block--error::before, [dir="rtl"] .contentops-block--warning::before { left: auto; right: 0.25rem; } /* Iframe-indications design commit 11 — when the operator has hidden diagnostics (cleanPreviewOverride=true → preview-article serves empty annotations[] / proposal_diff[]), there will be no .contentops-block--error or --warning classes, so the severity gutter naturally has no icons to render. Plus the .contentops-mark wrappers and .contentops-actions bars all skip. The decorator becomes effectively invisible — what the customer's reader sees. No additional CSS needed for that case; this comment documents the design intent so future contributors don't add gutter rules that break the clean-preview path. */ /* P151 — v4 protocol: per-hunk overlay tones + transient finding-region outline. Operator-visible vocabulary mirrors the right-rail ProposalDiffReview's HUNK_TONE_BY_OP mapping (proposal-diff-utils.ts) so a hover on hunk-N row paints the iframe block in the SAME color the right-rail row uses. Distinct from the existing v2 .contentops- block--error/--warning classes (which paint findings flash) — these are persistent overlays that track operator hover/click intent. */ .contentops-hunk-change { outline: 2px solid hsl(40 90% 55%); outline-offset: 2px; background: hsla(40, 90%, 55%, 0.08); transition: outline-color 200ms, background-color 200ms; } .contentops-hunk-add { outline: 2px solid hsl(150 70% 45%); outline-offset: 2px; background: hsla(150, 70%, 45%, 0.08); } .contentops-hunk-remove { outline: 2px dashed hsl(0 70% 50%); outline-offset: 2px; background: hsla(0, 70%, 50%, 0.06); text-decoration: line-through; text-decoration-color: hsla(0, 70%, 50%, 0.4); } .contentops-hunk-move { outline: 2px solid hsl(220 80% 55%); outline-offset: 2px; background: hsla(220, 80%, 55%, 0.08); } .contentops-hunk-image-swap { outline: 2px solid hsl(280 60% 55%); outline-offset: 2px; } .contentops-hunk-link-add { outline: 2px solid hsl(150 70% 45%); outline-offset: 2px; } .contentops-hunk-link-remove { outline: 2px dashed hsl(0 70% 50%); outline-offset: 2px; } .contentops-hunk-manual-edit { outline: 2px solid hsl(35 85% 55%); outline-offset: 2px; } /* Transient finding-region outline — softer than the per-hunk overlays because it follows operator hover (mouse leave clears it). Tone defaults to amber to match the legacy v2 highlight-finding flash; the v4 message can override via tone field but the CSS uses a single neutral default. */ .contentops-finding-region-outline { outline: 2px solid hsl(40 90% 55%); outline-offset: 3px; background: hsla(40, 90%, 55%, 0.05); transition: outline-color 200ms, background-color 200ms; position: relative; } /* P153-FINDING-HOVER-TOOLTIP — "Why this finding?" tooltip rendered by the decorator when the Hub's highlight-finding-region message carries tooltip data. Pinned to the top-right of the outlined block; styled to match the existing contentops-mark__popover vocabulary. */ .contentops-finding-region-tooltip { position: absolute; top: -0.25rem; right: -0.25rem; transform: translateY(-100%); z-index: 15; min-width: 220px; max-width: 340px; padding: 0.5rem 0.75rem; background: #ffffff; border: 1px solid hsla(40, 90%, 55%, 0.5); border-radius: 0.5rem; box-shadow: 0 4px 16px hsla(0, 0%, 0%, 0.12); font-size: 0.78rem; line-height: 1.4; color: hsl(220, 12%, 25%); white-space: normal; pointer-events: none; animation: contentops-tooltip-fadein 150ms ease-out; } .contentops-finding-region-tooltip__title { font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: hsl(35, 70%, 35%); margin-bottom: 0.25rem; } .contentops-finding-region-tooltip__finding { margin-bottom: 0.25rem; font-weight: 500; } .contentops-finding-region-tooltip__suggestion { display: block; margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px dashed hsla(0, 0%, 60%, 0.3); color: hsl(140, 50%, 30%); font-weight: 500; } @keyframes contentops-tooltip-fadein { from { opacity: 0; transform: translateY(calc(-100% + 4px)); } to { opacity: 1; transform: translateY(-100%); } }