/** * BlueMist Feedback — front end. * * Colours come from the theme's tokens where they exist, with a fallback on * every var() so the plugin still looks deliberate under a theme that never * heard of --zen-surface. * * Every control here is inert without JavaScript, so all of it ships with the * `hidden` attribute and is revealed by the rules below, which only apply once * `bmf-js` is on . That class is set from an inline script in , * before first paint — revealing these from the script that binds them would * move the page under a reader who is already looking at it. */ .bmf { --bmf-fg: var(--zen-text-2, #4a5568); --bmf-fg-strong: var(--zen-text, #1a202c); --bmf-muted: var(--zen-text-3, #718096); --bmf-surface: var(--zen-surface, #fff); --bmf-border: var(--zen-border, #e2e8f0); --bmf-accent: var(--zen-blue, #2563eb); --bmf-good: var(--zen-success, #15803d); } html.bmf-js .bmf-article[hidden] { display: block; } html.bmf-js .bmf-comment[hidden] { display: inline-flex; } /* ── Article block ──────────────────────────────────────── */ .bmf-article { margin: 28px 0 0; padding: 20px 22px; border: 1px solid var(--bmf-border); border-radius: var(--radius, 10px); background: var(--bmf-surface); } .bmf-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .bmf-rate-q { margin: 0; font-size: .92rem; font-weight: 600; color: var(--bmf-fg-strong); } .bmf-rate-buttons { display: flex; gap: 8px; } .bmf-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font: inherit; font-size: .85rem; line-height: 1; color: var(--bmf-fg); background: transparent; border: 1px solid var(--bmf-border); border-radius: 999px; cursor: pointer; transition: color .18s, border-color .18s, background-color .18s; } .bmf-btn:hover, .bmf-btn:focus-visible { color: var(--bmf-accent); border-color: var(--bmf-accent); } /* The reader's own choice, held after the round trip. Colour alone would fail for anyone who cannot see it, which is why aria-pressed carries the same fact and the border changes weight as well as hue. */ .bmf-btn.is-mine { color: var(--bmf-accent); border-color: var(--bmf-accent); background: color-mix(in srgb, var(--bmf-accent) 10%, transparent); } .bmf-btn[disabled] { opacity: .55; cursor: default; } .bmf-icon { display: inline-flex; } .bmf-count { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--bmf-muted); } .bmf-btn.is-mine .bmf-count { color: inherit; } .is-busy { opacity: .6; pointer-events: none; } /* ── Report form ────────────────────────────────────────── */ .bmf-report { margin-top: 14px; border-top: 1px solid var(--bmf-border); padding-top: 12px; } .bmf-report-open { font-size: .82rem; color: var(--bmf-muted); cursor: pointer; list-style: none; } .bmf-report-open::-webkit-details-marker { display: none; } .bmf-report-open::before { content: '⚑'; margin-right: 6px; } .bmf-report-open:hover { color: var(--bmf-accent); } .bmf-report-body { margin-top: 12px; display: grid; gap: 10px; max-width: 460px; } .bmf-reasons { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; } .bmf-legend { padding: 0; font-size: .78rem; font-weight: 600; color: var(--bmf-muted); width: 100%; } .bmf-reason { display: inline-flex; align-items: center; gap: 5px; font-size: .84rem; color: var(--bmf-fg); cursor: pointer; } .bmf-note-label { display: grid; gap: 4px; font-size: .78rem; color: var(--bmf-muted); } .bmf-note { font: inherit; font-size: .86rem; padding: 8px 10px; color: var(--bmf-fg-strong); background: transparent; border: 1px solid var(--bmf-border); border-radius: var(--radius, 8px); resize: vertical; } .bmf-send { justify-self: start; } /* Once reported, the form is gone rather than disabled: leaving it on screen invites a second attempt that the unique key would refuse anyway. */ .bmf-article.is-reported .bmf-report { display: none; } .bmf-status { margin: 10px 0 0; font-size: .8rem; font-weight: 500; color: var(--bmf-good); min-height: 1em; } /* ── Comment controls ───────────────────────────────────── */ .bmf-comment { align-items: center; gap: 4px; position: relative; vertical-align: middle; } .bmf-comment .bmf-btn { padding: 4px 9px; font-size: .74rem; border-color: transparent; color: var(--bmf-muted); } .bmf-comment .bmf-btn:hover, .bmf-comment .bmf-btn:focus-visible { color: var(--bmf-accent); border-color: var(--bmf-border); } .bmf-comment .bmf-count:empty { display: none; } .bmf-comment .bmf-status { margin: 0; font-size: .74rem; } .bmf-flag-wrap { position: relative; display: inline-flex; } /* Anchored to the button rather than dropped in the flow: a menu that pushes the comment below it down would move the thread every time someone opened one, on a page where the reader is mid-sentence. */ .bmf-flag-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; display: flex; flex-direction: column; min-width: 170px; padding: 4px; background: var(--bmf-surface); border: 1px solid var(--bmf-border); border-radius: var(--radius, 8px); box-shadow: var(--shadow-hover, 0 6px 20px rgba(0, 0, 0, .18)); } .bmf-flag-menu[hidden] { display: none; } /* The menu is the last thing in the comment, so it opens across the comment's bottom edge — and the theme puts `content-visibility: auto` on every top-level `.comment-list > li` to skip rendering off-screen threads. That keyword implies paint containment, which does two things to this menu: it clips whatever crosses the item's box, and it makes the item a stacking context, so `z-index: 20` can no longer rise above the *next* comment. Half the menu disappears and the visible half sits under the comment below it. Dropping containment for the one item with a menu open costs nothing — the reader has just clicked it, so it is on screen and fully rendered either way, and every other thread in the list keeps the optimisation. Restoring it is what closing the menu already does. Deliberately not solved by giving the menu `position: fixed`: paint containment makes the item a containing block for fixed descendants too, so it would be clipped exactly the same and lose its anchor as well. */ .comment-list > li:has(.bmf-flag-menu:not([hidden])) { content-visibility: visible; contain-intrinsic-size: none; } .bmf-flag-reason { font: inherit; font-size: .78rem; text-align: left; padding: 7px 10px; color: var(--bmf-fg); background: transparent; border: 0; border-radius: 6px; cursor: pointer; } .bmf-flag-reason:hover, .bmf-flag-reason:focus-visible { color: var(--bmf-accent); background: color-mix(in srgb, var(--bmf-accent) 8%, transparent); } /* A comment several people found useful. A tint and a rule, not a badge and not a reorder: the thread stays chronological and every #comment-123 link people have shared still lands where it did. */ .comment.bmf-well-received > .comment-body { border-left: 3px solid var(--bmf-good); padding-left: 14px; } @media (prefers-reduced-motion: reduce) { .bmf-btn { transition: none; } } @media print { .bmf { display: none !important; } }