/** * R2 Site Feedback — Widget styles (v2.1.2) * * Everything scoped under .r2fb-v2 so host themes stay untouched. * Class names match the existing JS so no DOM restructure is needed. * * Scoping contract (important — read before editing): * Many root-level widget elements are appended directly to `document.body` * (FAB, browse badge, password gate, loading overlay, editor overlay, * toast, list panel). Their className contains `r2fb-v2`, but `` * does NOT — so a plain descendant selector `.r2fb-v2 .r2fb-fab` fails to * match (it needs `.r2fb-v2` as an ancestor). Every root-level rule * therefore pairs the descendant form with a compound form: * `.r2fb-v2 .r2fb-fab, .r2fb-v2.r2fb-fab { … }` * Children of those roots are fine with the descendant form because the * root itself carries `.r2fb-v2` and acts as the ancestor. * * Font-size contract (2.0.3): * Design-token font sizes are authored in px (see r2fb-tokens.css). Do * NOT switch them back to rem without also anchoring a font-size on every * body-appended .r2fb-v2 root — some host themes set an absurd * `html { font-size: … }` (e.g. fluid vw-based) which would re-bloat * every rem-based widget element the moment rem returns. * * Accent color contract (2.0.3): * The widget JS forwards the admin-configured primary color as the * `--r2fb-accent` custom property on each root widget element (and a * darkened `--r2fb-accent-hover` alongside it). Never hard-code the accent * color inline or in rules — always read it via `var(--r2fb-accent)` so * the host config cascades through hover, focus rings and derived chips. * * Key v2 fixes: * - Sticky submit button in the sidebar (always visible on desktop/mobile). * - Warm / friendly token-driven palette; dark annotation toolbar. * - Proper focus rings and dialog semantics (handled in JS). * - 2.0.2: Added compound selectors so body-appended roots render styled * in host themes where `` is not the `.r2fb-v2` scope container. * - 2.0.3: font-size tokens switched to px (immune to fluid-root-vw * themes), and accent color now cascades via custom properties. * - 2.1.2: Sidebar body scrollbar now reliably visible on Chromium * (stripped `scrollbar-width` / `scrollbar-color` from the base rule — * those silently disable `::-webkit-scrollbar*` pseudos on Blink; Firefox * treatment isolated inside `@supports (-moz-appearance: none)`). Paired * with a JS-side body-scroll-lock in the widget runtime: when the editor * opens we freeze `` + `` at the current visual scroll * position (`position: fixed; top: -scrollY`) so macOS can't pop the * page's overlay scrollbar at the viewport right edge, and so * wheel-based scroll-jackers (Lenis / Locomotive / GSAP Observer / * fullPage.js) can't steal wheel events from inside the modal. On * close we restore the exact scrollY — no visible page jump. */ /* === Root widget container === */ .r2fb-v2.r2fb-widget, .r2fb-v2 .r2fb-widget { position: fixed; z-index: var(--r2fb-z-base); font-family: var(--r2fb-font-sans); font-size: var(--r2fb-fs-md); line-height: var(--r2fb-lh-body); color: var(--r2fb-text); } /* === FAB === */ .r2fb-v2 .r2fb-fab, .r2fb-v2.r2fb-fab { position: fixed; z-index: var(--r2fb-z-fab); height: 46px; padding: 0 var(--r2fb-s-5); border: none; border-radius: var(--r2fb-r-pill); background: var(--r2fb-accent); color: var(--r2fb-text-inverse); font-family: var(--r2fb-font-sans); font-size: var(--r2fb-fs-sm); font-weight: var(--r2fb-fw-semi); letter-spacing: .01em; display: inline-flex; align-items: center; gap: var(--r2fb-s-2); cursor: pointer; box-shadow: var(--r2fb-shadow-3); transition: transform var(--r2fb-dur) var(--r2fb-ease), box-shadow var(--r2fb-dur) var(--r2fb-ease), background-color var(--r2fb-dur) var(--r2fb-ease); animation: r2fb-breath 2.8s var(--r2fb-ease) infinite; } .r2fb-v2 .r2fb-fab:hover, .r2fb-v2.r2fb-fab:hover { background: var(--r2fb-accent-hover); transform: translateY(-1px); box-shadow: var(--r2fb-shadow-4); animation-play-state: paused; } .r2fb-v2 .r2fb-fab:active, .r2fb-v2.r2fb-fab:active { transform: translateY(0); } .r2fb-v2 .r2fb-fab.r2fb-bottom-right, .r2fb-v2.r2fb-fab.r2fb-bottom-right { bottom: 24px; right: 24px; } .r2fb-v2 .r2fb-fab.r2fb-bottom-left, .r2fb-v2.r2fb-fab.r2fb-bottom-left { bottom: 24px; left: 24px; } .r2fb-v2 .r2fb-fab-icon { width: 18px; height: 18px; flex-shrink: 0; } .r2fb-v2 .r2fb-fab-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r2fb-r-pill); background: var(--r2fb-danger); color: var(--r2fb-text-inverse); font-size: var(--r2fb-fs-xs); font-weight: var(--r2fb-fw-bold); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(49, 36, 18, .18); } /* Mobile: collapse to icon-only circle */ @media (max-width: 480px) { .r2fb-v2 .r2fb-fab, .r2fb-v2.r2fb-fab { width: 52px; height: 52px; padding: 0; justify-content: center; } .r2fb-v2 .r2fb-fab-label, .r2fb-v2.r2fb-fab .r2fb-fab-label { display: none; } } /* === Browse badge === */ .r2fb-v2 .r2fb-browse-badge, .r2fb-v2.r2fb-browse-badge { position: fixed; z-index: var(--r2fb-z-fab); bottom: 84px; display: inline-flex; align-items: center; gap: var(--r2fb-s-2); padding: 6px 10px 6px 6px; background: var(--r2fb-bg-card); border: 1px solid var(--r2fb-border); border-radius: var(--r2fb-r-pill); font-family: var(--r2fb-font-sans); font-size: var(--r2fb-fs-xs); font-weight: var(--r2fb-fw-semi); color: var(--r2fb-text-muted); cursor: pointer; box-shadow: var(--r2fb-shadow-2); transition: border-color var(--r2fb-dur) var(--r2fb-ease), color var(--r2fb-dur) var(--r2fb-ease), box-shadow var(--r2fb-dur) var(--r2fb-ease); } .r2fb-v2 .r2fb-browse-badge:hover, .r2fb-v2.r2fb-browse-badge:hover { border-color: var(--r2fb-accent); color: var(--r2fb-accent); box-shadow: var(--r2fb-shadow-3); } .r2fb-v2 .r2fb-browse-badge.r2fb-bottom-right, .r2fb-v2.r2fb-browse-badge.r2fb-bottom-right { right: 24px; } .r2fb-v2 .r2fb-browse-badge.r2fb-bottom-left, .r2fb-v2.r2fb-browse-badge.r2fb-bottom-left { left: 24px; } .r2fb-v2 .r2fb-browse-badge-icon { width: 24px; height: 24px; border-radius: 50%; background: var(--r2fb-accent-soft); color: var(--r2fb-accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .r2fb-v2 .r2fb-browse-badge-icon svg { width: 13px; height: 13px; } .r2fb-v2 .r2fb-browse-badge-count { min-width: 18px; height: 18px; padding: 0 6px; border-radius: var(--r2fb-r-pill); background: var(--r2fb-accent); color: var(--r2fb-text-inverse); font-size: var(--r2fb-fs-xs); font-weight: var(--r2fb-fw-bold); display: inline-flex; align-items: center; justify-content: center; } /* === Context menu === */ .r2fb-v2 .r2fb-menu, .r2fb-v2.r2fb-menu { position: fixed; z-index: var(--r2fb-z-modal); background: var(--r2fb-bg-card); border: 1px solid var(--r2fb-border-soft); border-radius: var(--r2fb-r-md); box-shadow: var(--r2fb-shadow-4); padding: 6px; min-width: 240px; display: none; font-family: var(--r2fb-font-sans); animation: r2fb-pop-in var(--r2fb-dur) var(--r2fb-ease); } .r2fb-v2 .r2fb-menu.r2fb-visible, .r2fb-v2.r2fb-menu.r2fb-visible { display: block; } .r2fb-v2 .r2fb-menu.r2fb-bottom-right, .r2fb-v2.r2fb-menu.r2fb-bottom-right { bottom: 82px; right: 24px; } .r2fb-v2 .r2fb-menu.r2fb-bottom-left, .r2fb-v2.r2fb-menu.r2fb-bottom-left { bottom: 82px; left: 24px; } .r2fb-v2 .r2fb-menu-item { display: flex; align-items: center; gap: var(--r2fb-s-3); padding: 10px 12px; cursor: pointer; background: none; border: none; border-radius: var(--r2fb-r-sm); font-family: inherit; font-size: var(--r2fb-fs-md); color: var(--r2fb-text); width: 100%; text-align: left; transition: background-color var(--r2fb-dur-fast) var(--r2fb-ease); } .r2fb-v2 .r2fb-menu-item:hover { background: var(--r2fb-bg-muted); } .r2fb-v2 .r2fb-menu-item-icon { width: 18px; height: 18px; color: var(--r2fb-text-muted); flex-shrink: 0; } /* === Password gate === */ .r2fb-v2 .r2fb-password-gate, .r2fb-v2.r2fb-password-gate { position: fixed; z-index: var(--r2fb-z-modal); background: var(--r2fb-bg-card); border: 1px solid var(--r2fb-border-soft); border-radius: var(--r2fb-r-lg); box-shadow: var(--r2fb-shadow-4); padding: var(--r2fb-s-6); width: 320px; font-family: var(--r2fb-font-sans); animation: r2fb-pop-in var(--r2fb-dur) var(--r2fb-ease); } .r2fb-v2 .r2fb-password-gate.r2fb-bottom-right, .r2fb-v2.r2fb-password-gate.r2fb-bottom-right { bottom: 84px; right: 24px; } .r2fb-v2 .r2fb-password-gate.r2fb-bottom-left, .r2fb-v2.r2fb-password-gate.r2fb-bottom-left { bottom: 84px; left: 24px; } .r2fb-v2 .r2fb-password-gate.r2fb-shake, .r2fb-v2.r2fb-password-gate.r2fb-shake { animation: r2fb-shake 420ms var(--r2fb-ease); } .r2fb-v2 .r2fb-password-gate h3 { margin: 0 0 var(--r2fb-s-3) 0; font-size: var(--r2fb-fs-lg); font-weight: var(--r2fb-fw-semi); color: var(--r2fb-text); } .r2fb-v2 .r2fb-password-gate input { width: 100%; padding: 10px 12px; border: 1px solid var(--r2fb-border); border-radius: var(--r2fb-r-md); font-family: inherit; font-size: var(--r2fb-fs-md); margin-bottom: var(--r2fb-s-3); background: var(--r2fb-bg-muted); color: var(--r2fb-text); transition: border-color var(--r2fb-dur) var(--r2fb-ease), box-shadow var(--r2fb-dur) var(--r2fb-ease), background-color var(--r2fb-dur) var(--r2fb-ease); } .r2fb-v2 .r2fb-password-gate input:focus { outline: none; background: var(--r2fb-bg-card); border-color: var(--r2fb-accent); box-shadow: var(--r2fb-shadow-focus); } .r2fb-v2 .r2fb-password-gate .r2fb-error { color: var(--r2fb-danger); font-size: var(--r2fb-fs-sm); margin-bottom: var(--r2fb-s-2); } /* === Loading overlay === */ .r2fb-v2 .r2fb-loading-overlay, .r2fb-v2.r2fb-loading-overlay { position: fixed; inset: 0; z-index: var(--r2fb-z-overlay); background: var(--r2fb-bg-overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; font-family: var(--r2fb-font-sans); animation: r2fb-fade-in var(--r2fb-dur) var(--r2fb-ease); } .r2fb-v2 .r2fb-loading-content { text-align: center; color: var(--r2fb-text-inverse); } .r2fb-v2 .r2fb-loading-content p { margin: var(--r2fb-s-4) 0 0 0; font-size: var(--r2fb-fs-md); font-weight: var(--r2fb-fw-medium); opacity: .92; } .r2fb-v2 .r2fb-spinner-large { display: inline-block; width: 36px; height: 36px; border: 2.5px solid rgba(255, 255, 255, .25); border-top-color: var(--r2fb-text-inverse); border-radius: 50%; animation: r2fb-spin .75s linear infinite; } .r2fb-v2 .r2fb-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: var(--r2fb-text-inverse); border-radius: 50%; animation: r2fb-spin .75s linear infinite; } /* === Full-screen editor overlay === */ .r2fb-v2 .r2fb-editor-overlay, .r2fb-v2.r2fb-editor-overlay { position: fixed; inset: 0; z-index: var(--r2fb-z-modal); background: #1E1D1B; display: flex; flex-direction: column; font-family: var(--r2fb-font-sans); color: var(--r2fb-text); /* 2.5.1: dedicated 280 ms enter animation (was generic r2fb-fade-in @ * 200 ms with a 4 px translateY — too subtle, the user reported * "instant blic" with the extension fast path). Scale-down + opacity * gives a clearer "modal arriving" cue without feeling sluggish. * cubic-bezier(.16, 1, .3, 1) is the standard "ease-out-expo" curve — * snappy start, gentle settle. */ animation: r2fb-editor-enter 280ms cubic-bezier( 0.16, 1, 0.3, 1 ); } @keyframes r2fb-editor-enter { from { opacity: 0; transform: scale( 0.985 ); } to { opacity: 1; transform: scale( 1 ); } } /* Honour reduced-motion preference — skip the transform, keep just a * brief opacity fade so the editor still doesn't pop in instantly but * doesn't burn motion-sensitive eyes either. */ @media ( prefers-reduced-motion: reduce ) { .r2fb-v2 .r2fb-editor-overlay, .r2fb-v2.r2fb-editor-overlay { animation: r2fb-fade-in 160ms linear; } } /* Toolbar */ .r2fb-v2 .r2fb-editor-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #26241F; border-bottom: 1px solid rgba(255, 255, 255, .06); flex-shrink: 0; } .r2fb-v2 .r2fb-editor-toolbar-left { display: flex; align-items: center; gap: 4px; } .r2fb-v2 .r2fb-editor-tool { width: 38px; height: 38px; border: none; border-radius: var(--r2fb-r-md); cursor: pointer; display: flex; align-items: center; justify-content: center; background: transparent; color: rgba(255, 255, 255, .55); font-family: inherit; transition: background-color var(--r2fb-dur) var(--r2fb-ease), color var(--r2fb-dur) var(--r2fb-ease); } .r2fb-v2 .r2fb-editor-tool:hover { background: rgba(255, 255, 255, .08); color: var(--r2fb-text-inverse); } .r2fb-v2 .r2fb-editor-tool.r2fb-active { background: var(--r2fb-accent-soft); color: var(--r2fb-accent); } .r2fb-v2 .r2fb-editor-tool:focus-visible { outline: 2px solid var(--r2fb-accent); outline-offset: 2px; } .r2fb-v2 .r2fb-editor-tool svg { width: 20px; height: 20px; } .r2fb-v2 .r2fb-editor-separator { width: 1px; height: 22px; background: rgba(255, 255, 255, .1); margin: 0 6px; } .r2fb-v2 .r2fb-editor-color { width: 30px; height: 30px; border: 2px solid rgba(255, 255, 255, .18); border-radius: 50%; cursor: pointer; padding: 0; -webkit-appearance: none; appearance: none; background: none; overflow: hidden; transition: border-color var(--r2fb-dur) var(--r2fb-ease); } .r2fb-v2 .r2fb-editor-color::-webkit-color-swatch-wrapper { padding: 0; } .r2fb-v2 .r2fb-editor-color::-webkit-color-swatch { border: none; border-radius: 50%; } .r2fb-v2 .r2fb-editor-color::-moz-color-swatch { border: none; border-radius: 50%; } .r2fb-v2 .r2fb-editor-color:hover { border-color: rgba(255, 255, 255, .4); } .r2fb-v2 .r2fb-editor-close { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); padding: 8px 16px; border-radius: var(--r2fb-r-md); cursor: pointer; font-size: var(--r2fb-fs-sm); font-weight: var(--r2fb-fw-medium); font-family: inherit; display: inline-flex; align-items: center; gap: 6px; transition: background-color var(--r2fb-dur) var(--r2fb-ease), color var(--r2fb-dur) var(--r2fb-ease), border-color var(--r2fb-dur) var(--r2fb-ease); } .r2fb-v2 .r2fb-editor-close:hover { background: rgba(255, 255, 255, .12); color: var(--r2fb-text-inverse); border-color: rgba(255, 255, 255, .25); } /* Editor main: screenshot (left) + sidebar (right) */ .r2fb-v2 .r2fb-editor-main { display: flex; flex: 1; min-height: 0; overflow: hidden; } .r2fb-v2 .r2fb-editor-screenshot { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--r2fb-s-4); overflow: auto; background: #1E1D1B; } .r2fb-v2 .r2fb-editor-canvas { max-width: 100%; max-height: 100%; border-radius: var(--r2fb-r-sm); box-shadow: 0 10px 32px rgba(0, 0, 0, .45); cursor: crosshair; } /* ============================================================== SIDEBAR (1.9.2 rework) Three-row flex column shell. The root does NOT scroll — the inner `-body` does, so the title stays pinned at the top and the submit button in the footer stays pinned at the bottom regardless of form length or viewport size. This replaces the 1.9.1 sticky stopgap which could visually overlap content on low-resolution screens. .r2fb-editor-sidebar (flex column, NO scroll on root) ├── .r2fb-editor-sidebar-title (flex: 0 0 auto — fixed top) ├── .r2fb-editor-sidebar-body (flex: 1 1 auto; scrolls) ← all form groups └── .r2fb-editor-sidebar-footer (flex: 0 0 auto — fixed bottom, holds submit) ============================================================== */ /* v2.0.0 — CSS GRID layout (replaces flex column). Rationale: the 1.9.2 → 1.9.3 flex attempt with `flex: 1 1 0` + `min-height: 0` + explicit `height: 100%` STILL failed to trigger the body's scrollbar on smaller viewports in some browser/zoom combos. Grid's `1fr` track is computed after `auto` tracks and always yields the exact remaining space — there is no content-size fallback loop. Combined with `min-height: 0` on the grid item, the body is forced to its allocated row height and its `overflow-y: auto` fires every time, regardless of what children inside ask for. */ .r2fb-v2 .r2fb-editor-sidebar { width: 380px; flex-shrink: 0; background: var(--r2fb-bg-card); border-left: 1px solid var(--r2fb-border-soft); position: relative; /* 3-row grid: title (auto) + body (1fr, absorbs all remaining) + footer (auto). */ display: grid; grid-template-rows: auto 1fr auto; /* height: 100% is belt + suspenders with the default align-items: stretch on the flex-row parent — some WebKit + zoom combinations under-resolve the implicit cross-axis height. */ height: 100%; min-height: 0; overflow: hidden; } .r2fb-v2 .r2fb-editor-sidebar-title { margin: 0; padding: var(--r2fb-s-6) var(--r2fb-s-6) 0 var(--r2fb-s-6); font-size: var(--r2fb-fs-lg); font-weight: var(--r2fb-fw-semi); color: var(--r2fb-text); letter-spacing: -0.01em; } /* Scrollable body — owns the overflow. `min-height: 0` is CRITICAL on a grid item whose track is `1fr` — without it, the implicit minimum of a grid item is its content size, which would push the row past 1fr and defeat the overflow. 2.1.2 — Chromium scrollbar VISIBILITY fix (regression of 2.1.1): 2.1.1 tried to make the scrollbar always-visible by combining the standards properties (`scrollbar-width: thin` + `scrollbar-color`) with the legacy `::-webkit-scrollbar*` pseudo-elements. That approach DOES NOT WORK on Chromium: per the CSS Scrollbars Styling spec as implemented by Blink, setting ANY of `scrollbar-width`/`scrollbar-color` to a non-initial value silently disables the `::-webkit-scrollbar*` pseudo-elements on that scroller. With the pseudos disabled and the standards-path active, Chrome on macOS falls back to OS overlay scrollbars (auto-hide — invisible at rest, only rendered during active scroll). The scroll region worked, but the scrollbar was invisible at rest — so users on short viewports never knew they could scroll to the attachments zone. (Live repro confirmed via DOM inspection on projects.rise2.studio/parra at ~340px viewport height: scrollHeight 383, clientHeight 184, canScroll true, but zero painted pixels on the right edge.) Fix: pick ONE rendering path per engine. * Chromium / WebKit (default, here): use ONLY `::-webkit-scrollbar*` pseudos. No `scrollbar-width`, no `scrollbar-color` on the element itself. Setting an explicit width on the pseudo forces an always-visible, non-overlay scrollbar on macOS regardless of the system "Show scroll bars" preference. * Firefox: pseudo-elements don't exist — it only understands `scrollbar-color`. We apply it inside `@supports (-moz-appearance: none)` so Chromium never sees it. Firefox's own scrollbar rendering is always-visible by default on desktop, so no visibility hack needed. `scrollbar-gutter: stable` stays on the base rule — both engines honour it, and it prevents the name/comment fields from shifting 8–10px left the moment content starts overflowing. `overscroll-behavior: contain` stops trackpad rubber-band at the body's edge from leaking to the document behind the fixed-position modal. `scroll-padding-bottom` keeps keyboard `scrollIntoView()` focus jumps from landing flush under the fixed footer's top shadow. */ .r2fb-v2 .r2fb-editor-sidebar-body { min-height: 0; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; scroll-padding-bottom: var(--r2fb-s-4); padding: var(--r2fb-s-4) var(--r2fb-s-6) var(--r2fb-s-6) var(--r2fb-s-6); display: flex; flex-direction: column; gap: var(--r2fb-s-4); -webkit-overflow-scrolling: touch; } /* Chromium / WebKit scrollbar — always-visible, warm-stone palette. MUST NOT set scrollbar-width/scrollbar-color on the element — that would silently disable these pseudos on Chromium. */ .r2fb-v2 .r2fb-editor-sidebar-body::-webkit-scrollbar { width: 10px; height: 10px; -webkit-appearance: none; } .r2fb-v2 .r2fb-editor-sidebar-body::-webkit-scrollbar-track { background: var(--r2fb-bg-muted); border-left: 1px solid var(--r2fb-border-soft); } .r2fb-v2 .r2fb-editor-sidebar-body::-webkit-scrollbar-thumb { background-color: var(--r2fb-text-soft); border-radius: 6px; border: 2px solid var(--r2fb-bg-muted); } .r2fb-v2 .r2fb-editor-sidebar-body::-webkit-scrollbar-thumb:hover { background-color: var(--r2fb-text-muted); } /* Firefox-only: `@supports (-moz-appearance: none)` never matches on Chromium/WebKit, so `scrollbar-color` stays out of Blink's sight and can't disable the pseudos above. Firefox renders an always-visible scrollbar by default — we only recolour it. */ @supports (-moz-appearance: none) { .r2fb-v2 .r2fb-editor-sidebar-body { scrollbar-width: auto; scrollbar-color: var(--r2fb-text-soft) var(--r2fb-bg-muted); } } /* Fixed footer — hosts ONLY the submit button. Border + subtle shadow visually separate it from the scrolling body above. Grid row is auto-sized so it takes exactly its content height. */ .r2fb-v2 .r2fb-editor-sidebar-footer { padding: var(--r2fb-s-4) var(--r2fb-s-6) var(--r2fb-s-5) var(--r2fb-s-6); background: var(--r2fb-bg-card); border-top: 1px solid var(--r2fb-border-soft); box-shadow: 0 -4px 10px -6px rgba(49, 36, 18, 0.06); } .r2fb-v2 .r2fb-editor-form-group { display: flex; flex-direction: column; gap: var(--r2fb-s-2); } .r2fb-v2 .r2fb-editor-form-group label, .r2fb-v2 .r2fb-editor-form-group-label { font-size: var(--r2fb-fs-xs); font-weight: var(--r2fb-fw-semi); color: var(--r2fb-text-muted); text-transform: uppercase; letter-spacing: .06em; } .r2fb-v2 .r2fb-editor-input, .r2fb-v2 .r2fb-editor-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--r2fb-border); border-radius: var(--r2fb-r-md); font-family: inherit; font-size: var(--r2fb-fs-md); background: var(--r2fb-bg-muted); color: var(--r2fb-text); transition: border-color var(--r2fb-dur) var(--r2fb-ease), box-shadow var(--r2fb-dur) var(--r2fb-ease), background-color var(--r2fb-dur) var(--r2fb-ease); } .r2fb-v2 .r2fb-editor-textarea { resize: vertical; min-height: 100px; } .r2fb-v2 .r2fb-editor-input:focus, .r2fb-v2 .r2fb-editor-textarea:focus { outline: none; background: var(--r2fb-bg-card); border-color: var(--r2fb-accent); box-shadow: var(--r2fb-shadow-focus); } /* 2.0.4: inline field error + red-bordered input state. Replaces the toast-based flash used in the first 2.0.4 draft so the message sits directly under the field and stays until the user edits. The shake is short (420 ms) and only runs once per submit attempt. */ .r2fb-v2 .r2fb-editor-input.r2fb-has-error, .r2fb-v2 .r2fb-editor-textarea.r2fb-has-error { border-color: var(--r2fb-danger); background: var(--r2fb-danger-soft); } .r2fb-v2 .r2fb-editor-input.r2fb-has-error:focus, .r2fb-v2 .r2fb-editor-textarea.r2fb-has-error:focus { border-color: var(--r2fb-danger); box-shadow: 0 0 0 3px var(--r2fb-danger-soft), 0 0 0 1px var(--r2fb-danger); } .r2fb-v2 .r2fb-field-error { display: block; margin-top: calc(var(--r2fb-s-1) * -1); font-size: var(--r2fb-fs-xs); font-weight: var(--r2fb-fw-medium); color: var(--r2fb-danger); line-height: 1.4; } .r2fb-v2 .r2fb-field-error[hidden] { display: none; } .r2fb-v2 .r2fb-field-error.r2fb-shake { animation: r2fb-shake 420ms var(--r2fb-ease); } /* Submit button lives inside `.r2fb-editor-sidebar-footer` (1.9.2). No more sticky — the footer is a flex-fixed row and naturally stays pinned. Button is a normal flush row again. */ .r2fb-v2 .r2fb-editor-submit { width: 100%; } /* WYSIWYG editor */ .r2fb-v2 .r2fb-editor-wysiwyg-wrap { border: 1px solid var(--r2fb-border); border-radius: var(--r2fb-r-md); overflow: hidden; background: var(--r2fb-bg-card); transition: border-color var(--r2fb-dur) var(--r2fb-ease), box-shadow var(--r2fb-dur) var(--r2fb-ease); } .r2fb-v2 .r2fb-editor-wysiwyg-wrap:focus-within { border-color: var(--r2fb-accent); box-shadow: var(--r2fb-shadow-focus); } /* 2.3.2: error state for the WYSIWYG comment editor. The visible border lives on the wrap (not the contentEditable interior), so the danger tinting goes here. focus-within takes precedence visually because the user is actively typing in the field, but the message slot below the wrap stays visible until the user clears the error by typing. */ .r2fb-v2 .r2fb-editor-wysiwyg-wrap.r2fb-has-error { border-color: var(--r2fb-danger); background: var(--r2fb-danger-soft); } .r2fb-v2 .r2fb-editor-wysiwyg-wrap.r2fb-has-error:focus-within { border-color: var(--r2fb-danger); box-shadow: 0 0 0 3px var(--r2fb-danger-soft), 0 0 0 1px var(--r2fb-danger); } .r2fb-v2 .r2fb-fmt-toolbar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; background: var(--r2fb-bg-muted); border-bottom: 1px solid var(--r2fb-border-soft); } .r2fb-v2 .r2fb-fmt-btn { width: 30px; height: 28px; border: none; border-radius: var(--r2fb-r-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--r2fb-text-muted); font-family: inherit; transition: background-color var(--r2fb-dur-fast) var(--r2fb-ease), color var(--r2fb-dur-fast) var(--r2fb-ease); } .r2fb-v2 .r2fb-fmt-btn:hover { background: var(--r2fb-bg-subtle); color: var(--r2fb-text); } .r2fb-v2 .r2fb-fmt-btn.r2fb-active { background: var(--r2fb-accent); color: var(--r2fb-text-inverse); } .r2fb-v2 .r2fb-fmt-btn svg { pointer-events: none; width: 14px; height: 14px; } .r2fb-v2 .r2fb-fmt-sep { width: 1px; height: 18px; background: var(--r2fb-border); margin: 0 4px; flex-shrink: 0; } .r2fb-v2 .r2fb-editor-wysiwyg { min-height: 140px; max-height: 260px; overflow-y: auto; padding: 12px 14px; font-family: inherit; font-size: var(--r2fb-fs-md); line-height: var(--r2fb-lh-body); color: var(--r2fb-text); outline: none; background: var(--r2fb-bg-card); word-wrap: break-word; overflow-wrap: break-word; } .r2fb-v2 .r2fb-editor-wysiwyg:empty::before { content: attr(data-placeholder); color: var(--r2fb-text-soft); pointer-events: none; } .r2fb-v2 .r2fb-editor-wysiwyg code { background: var(--r2fb-bg-muted); padding: 1px 5px; border-radius: var(--r2fb-r-xs); font-family: var(--r2fb-font-mono); font-size: .9em; color: var(--r2fb-accent-strong); } .r2fb-v2 .r2fb-editor-wysiwyg a { color: var(--r2fb-accent); text-decoration: underline; } .r2fb-v2 .r2fb-editor-wysiwyg strong, .r2fb-v2 .r2fb-editor-wysiwyg b { font-weight: var(--r2fb-fw-semi); } .r2fb-v2 .r2fb-editor-wysiwyg em, .r2fb-v2 .r2fb-editor-wysiwyg i { font-style: italic; } .r2fb-v2 .r2fb-editor-wysiwyg del, .r2fb-v2 .r2fb-editor-wysiwyg s { text-decoration: line-through; color: var(--r2fb-text-muted); } .r2fb-v2 .r2fb-char-counter { padding: 4px 10px; text-align: right; font-size: var(--r2fb-fs-xs); color: var(--r2fb-text-soft); background: var(--r2fb-bg-muted); border-top: 1px solid var(--r2fb-border-soft); font-variant-numeric: tabular-nums; } .r2fb-v2 .r2fb-char-counter.r2fb-char-warning { color: var(--r2fb-warning); font-weight: var(--r2fb-fw-semi); } .r2fb-v2 .r2fb-char-counter.r2fb-char-over { color: var(--r2fb-danger); font-weight: var(--r2fb-fw-bold); } /* File drop zone */ .r2fb-v2 .r2fb-drop-zone { display: flex; align-items: center; justify-content: center; padding: 14px 12px; border: 1.5px dashed var(--r2fb-border-strong); border-radius: var(--r2fb-r-md); color: var(--r2fb-text-muted); font-size: var(--r2fb-fs-sm); cursor: pointer; background: var(--r2fb-bg-muted); transition: border-color var(--r2fb-dur) var(--r2fb-ease), background-color var(--r2fb-dur) var(--r2fb-ease), color var(--r2fb-dur) var(--r2fb-ease); text-align: center; } .r2fb-v2 .r2fb-drop-zone:hover, .r2fb-v2 .r2fb-drop-active { border-color: var(--r2fb-accent); background: var(--r2fb-accent-soft); color: var(--r2fb-accent); } .r2fb-v2 .r2fb-file-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .r2fb-v2 .r2fb-file-item { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--r2fb-bg-muted); border-radius: var(--r2fb-r-sm); font-size: var(--r2fb-fs-xs); } .r2fb-v2 .r2fb-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--r2fb-text); } .r2fb-v2 .r2fb-file-size { color: var(--r2fb-text-muted); flex-shrink: 0; } .r2fb-v2 .r2fb-file-remove { background: none; border: none; color: var(--r2fb-danger); cursor: pointer; font-size: var(--r2fb-fs-md); padding: 0 2px; line-height: 1; flex-shrink: 0; opacity: .7; transition: opacity var(--r2fb-dur-fast) var(--r2fb-ease); } .r2fb-v2 .r2fb-file-remove:hover { opacity: 1; } /* === Shared button === */ .r2fb-v2 .r2fb-btn { padding: 11px 18px; border-radius: var(--r2fb-r-md); font-family: var(--r2fb-font-sans); font-size: var(--r2fb-fs-md); font-weight: var(--r2fb-fw-semi); cursor: pointer; border: 1px solid transparent; transition: background-color var(--r2fb-dur) var(--r2fb-ease), transform var(--r2fb-dur-fast) var(--r2fb-ease), opacity var(--r2fb-dur) var(--r2fb-ease); } .r2fb-v2 .r2fb-btn-primary { background: var(--r2fb-accent); color: var(--r2fb-text-inverse); border-color: var(--r2fb-accent); } .r2fb-v2 .r2fb-btn-primary:hover { background: var(--r2fb-accent-hover); border-color: var(--r2fb-accent-hover); } .r2fb-v2 .r2fb-btn:active { transform: scale(.985); } .r2fb-v2 .r2fb-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } /* === Feedback list panel === */ .r2fb-v2 .r2fb-list-panel, .r2fb-v2.r2fb-list-panel { position: fixed; top: 0; right: 0; width: 420px; height: 100%; z-index: var(--r2fb-z-modal); background: var(--r2fb-bg-card); box-shadow: -8px 0 32px rgba(49, 36, 18, .10); display: flex; flex-direction: column; font-family: var(--r2fb-font-sans); animation: r2fb-slide-up var(--r2fb-dur) var(--r2fb-ease); } .r2fb-v2 .r2fb-list-header { display: flex; align-items: center; justify-content: space-between; padding: var(--r2fb-s-4) var(--r2fb-s-5); border-bottom: 1px solid var(--r2fb-border-soft); flex-shrink: 0; } .r2fb-v2 .r2fb-list-header h3 { margin: 0; font-size: var(--r2fb-fs-md); font-weight: var(--r2fb-fw-semi); color: var(--r2fb-text); } .r2fb-v2 .r2fb-list-close, .r2fb-v2 .r2fb-list-back { background: none; border: none; cursor: pointer; padding: 6px 10px; border-radius: var(--r2fb-r-sm); font-family: inherit; font-size: var(--r2fb-fs-sm); color: var(--r2fb-text-muted); transition: background-color var(--r2fb-dur-fast) var(--r2fb-ease), color var(--r2fb-dur-fast) var(--r2fb-ease); } .r2fb-v2 .r2fb-list-close:hover { background: var(--r2fb-bg-muted); color: var(--r2fb-text); } .r2fb-v2 .r2fb-list-back { color: var(--r2fb-accent); font-weight: var(--r2fb-fw-semi); } .r2fb-v2 .r2fb-list-back:hover { background: var(--r2fb-accent-soft); } .r2fb-v2 .r2fb-list-items { flex: 1; overflow-y: auto; padding: 0; } .r2fb-v2 .r2fb-list-item { display: flex; gap: var(--r2fb-s-3); padding: 14px var(--r2fb-s-5); cursor: pointer; border-bottom: 1px solid var(--r2fb-border-soft); transition: background-color var(--r2fb-dur-fast) var(--r2fb-ease); } .r2fb-v2 .r2fb-list-item:hover { background: var(--r2fb-bg-muted); } .r2fb-v2 .r2fb-list-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: var(--r2fb-r-sm); flex-shrink: 0; background: var(--r2fb-bg-subtle); border: 1px solid var(--r2fb-border-soft); } .r2fb-v2 .r2fb-list-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--r2fb-text-soft); font-size: var(--r2fb-fs-md); } .r2fb-v2 .r2fb-list-item-content { flex: 1; min-width: 0; } .r2fb-v2 .r2fb-list-item-comment { font-size: var(--r2fb-fs-md); color: var(--r2fb-text); line-height: var(--r2fb-lh-dense); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .r2fb-v2 .r2fb-list-item-meta { font-size: var(--r2fb-fs-xs); color: var(--r2fb-text-muted); margin-top: 4px; } .r2fb-v2 .r2fb-list-status { display: inline-block; font-size: var(--r2fb-fs-xs); font-weight: var(--r2fb-fw-semi); text-transform: uppercase; padding: 2px 8px; border-radius: var(--r2fb-r-pill); letter-spacing: .03em; } .r2fb-v2 .r2fb-list-status-open { background: var(--r2fb-warning-soft); color: #8A6413; } .r2fb-v2 .r2fb-list-status-in_progress { background: var(--r2fb-info-soft); color: #3A5E79; } .r2fb-v2 .r2fb-list-status-resolved { background: var(--r2fb-success-soft); color: #2E7048; } .r2fb-v2 .r2fb-list-empty { padding: 48px 24px; text-align: center; color: var(--r2fb-text-muted); font-size: var(--r2fb-fs-md); } /* List detail view */ .r2fb-v2 .r2fb-list-detail { flex: 1; overflow-y: auto; padding: var(--r2fb-s-5); } .r2fb-v2 .r2fb-list-detail-screenshot { width: 100%; border-radius: var(--r2fb-r-sm); margin-bottom: var(--r2fb-s-4); box-shadow: var(--r2fb-shadow-2); border: 1px solid var(--r2fb-border-soft); } .r2fb-v2 .r2fb-list-detail-comment { font-size: var(--r2fb-fs-md); line-height: var(--r2fb-lh-body); color: var(--r2fb-text); margin-bottom: var(--r2fb-s-3); } .r2fb-v2 .r2fb-list-detail-meta { font-size: var(--r2fb-fs-xs); color: var(--r2fb-text-muted); margin-bottom: var(--r2fb-s-4); padding-bottom: var(--r2fb-s-4); border-bottom: 1px solid var(--r2fb-border-soft); } .r2fb-v2 .r2fb-list-detail-replies { margin-bottom: var(--r2fb-s-4); } .r2fb-v2 .r2fb-list-reply { padding: 10px 14px; border-radius: var(--r2fb-r-md); margin-bottom: 8px; font-size: var(--r2fb-fs-sm); line-height: var(--r2fb-lh-body); } .r2fb-v2 .r2fb-reply-admin { background: var(--r2fb-accent-soft); color: var(--r2fb-text); } .r2fb-v2 .r2fb-reply-client { background: var(--r2fb-bg-muted); color: var(--r2fb-text); } .r2fb-v2 .r2fb-list-reply-header { font-size: var(--r2fb-fs-xs); color: var(--r2fb-text-muted); margin-bottom: 4px; } .r2fb-v2 .r2fb-list-reply-header strong { color: var(--r2fb-text); } .r2fb-v2 .r2fb-list-reply-form { display: flex; gap: 8px; } .r2fb-v2 .r2fb-list-detail-comment code, .r2fb-v2 .r2fb-list-reply code { background: var(--r2fb-bg-muted); padding: 2px 5px; border-radius: var(--r2fb-r-xs); font-family: var(--r2fb-font-mono); font-size: .9em; } /* === Attachments === */ .r2fb-v2 .r2fb-att-list { display: flex; flex-wrap: wrap; gap: var(--r2fb-s-2); margin: var(--r2fb-s-2) 0; } .r2fb-v2 .r2fb-att-thumb { max-width: 120px; max-height: 80px; border-radius: var(--r2fb-r-sm); border: 1px solid var(--r2fb-border-soft); display: block; } .r2fb-v2 .r2fb-att-thumb-link { text-decoration: none; } .r2fb-v2 .r2fb-att-file { display: inline-block; padding: 6px 10px; background: var(--r2fb-bg-muted); border: 1px solid var(--r2fb-border-soft); border-radius: var(--r2fb-r-sm); font-size: var(--r2fb-fs-xs); color: var(--r2fb-accent); text-decoration: none; word-break: break-all; transition: background-color var(--r2fb-dur-fast) var(--r2fb-ease); } .r2fb-v2 .r2fb-att-file:hover { background: var(--r2fb-accent-soft); } .r2fb-v2 .r2fb-list-att-badge { display: inline-flex; align-items: center; font-size: var(--r2fb-fs-xs); color: var(--r2fb-text-muted); margin-left: 2px; } /* === Inline text annotation box === */ .r2fb-v2 .r2fb-text-box { position: absolute; min-width: 120px; min-height: 40px; z-index: 10; background: rgba(255, 255, 255, .9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 2px dashed var(--r2fb-accent); border-radius: var(--r2fb-r-sm); resize: both; overflow: hidden; display: flex; flex-direction: column; } .r2fb-v2 .r2fb-text-box-handle { height: 12px; cursor: move; background: var(--r2fb-accent); opacity: .75; flex-shrink: 0; border-radius: 4px 4px 0 0; } .r2fb-v2 .r2fb-text-box-input { flex: 1; width: 100%; min-height: 28px; border: none; background: transparent; color: var(--r2fb-accent-strong); font-size: var(--r2fb-fs-base); font-weight: var(--r2fb-fw-bold); font-family: var(--r2fb-font-sans); padding: 4px 6px; resize: none; outline: none; line-height: var(--r2fb-lh-dense); } .r2fb-v2 .r2fb-text-box-input::placeholder { opacity: .4; } /* === Legacy inline toast (kept for compat; new code should use R2FB_UI.toast) === */ .r2fb-v2 .r2fb-toast, .r2fb-v2.r2fb-toast { position: fixed; z-index: var(--r2fb-z-toast); bottom: 92px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--r2fb-text); color: var(--r2fb-text-inverse); padding: 10px 20px; border-radius: var(--r2fb-r-md); font-family: var(--r2fb-font-sans); font-size: var(--r2fb-fs-sm); font-weight: var(--r2fb-fw-medium); box-shadow: var(--r2fb-shadow-4); opacity: 0; transition: opacity var(--r2fb-dur-slow) var(--r2fb-ease), transform var(--r2fb-dur-slow) var(--r2fb-ease); pointer-events: none; } .r2fb-v2 .r2fb-toast-visible, .r2fb-v2.r2fb-toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .r2fb-v2 .r2fb-toast-hide, .r2fb-v2.r2fb-toast-hide { opacity: 0; transform: translateX(-50%) translateY(-10px); } /* === Responsive === */ @media (max-width: 960px) { .r2fb-v2 .r2fb-editor-main, .r2fb-v2.r2fb-editor-overlay .r2fb-editor-main { flex-direction: column; } .r2fb-v2 .r2fb-editor-sidebar, .r2fb-v2.r2fb-editor-overlay .r2fb-editor-sidebar { width: 100%; max-height: 55vh; border-left: none; border-top: 1px solid var(--r2fb-border-soft); } .r2fb-v2 .r2fb-editor-screenshot, .r2fb-v2.r2fb-editor-overlay .r2fb-editor-screenshot { padding: var(--r2fb-s-2); } .r2fb-v2 .r2fb-list-panel, .r2fb-v2.r2fb-list-panel { width: 100%; } } /* 2.1.1 — short-viewport tuning. On screens below ~760px tall the WYSIWYG's default `min-height: 140px` + `max-height: 260px` plus the name field + form gaps pushed the attachments zone and its upload drop-box past the sidebar body's visible area. Users on laptops at 1366×768, Dell 1440×900 with the browser UI eating vertical space, or iPads in landscape, couldn't reach the upload control. Grid layout was technically creating a scroll region but the scrollbar was too subtle to be noticed (2.1.1 also upgrades the thumb visibility — see sidebar-body block). This media query trims the editor's vertical chrome so the common case fits without forcing the user to scroll at all, and on the shortest viewports it reduces the wysiwyg to a sensible floor. */ @media (max-height: 760px) { .r2fb-v2 .r2fb-editor-wysiwyg { min-height: 110px; max-height: 180px; } .r2fb-v2 .r2fb-editor-sidebar-title { padding: var(--r2fb-s-5) var(--r2fb-s-5) 0 var(--r2fb-s-5); } .r2fb-v2 .r2fb-editor-sidebar-body { padding: var(--r2fb-s-3) var(--r2fb-s-5) var(--r2fb-s-4) var(--r2fb-s-5); gap: var(--r2fb-s-3); } .r2fb-v2 .r2fb-editor-sidebar-footer { padding: var(--r2fb-s-3) var(--r2fb-s-5) var(--r2fb-s-4) var(--r2fb-s-5); } } @media (max-height: 520px) { .r2fb-v2 .r2fb-editor-wysiwyg { min-height: 80px; max-height: 140px; } .r2fb-v2 .r2fb-editor-sidebar-title { font-size: var(--r2fb-fs-md); } } @media (max-width: 480px) { .r2fb-v2 .r2fb-menu, .r2fb-v2.r2fb-menu { min-width: calc(100vw - 48px); } .r2fb-v2 .r2fb-password-gate, .r2fb-v2.r2fb-password-gate { width: calc(100vw - 48px); } } /* Reduced motion override (tokens.css handles the global case; we also explicitly disable the breathing FAB for anyone who asks) */ @media (prefers-reduced-motion: reduce) { .r2fb-v2 .r2fb-fab, .r2fb-v2.r2fb-fab { animation: none; } } /* === 2.2.0 — CMS context (widget rendered inside wp-admin) === * * The widget runs inside wp-admin when the opt-in setting is ON and the * current user is an admin. In that context the FAB / overlays have to * co-exist with WordPress admin chrome (wp-admin bar, admin sidebar, * screen-options pane). Two concrete problems: * * 1. wp-admin bar uses z-index 99999 and is fixed at the top — the FAB * positioned at bottom-right overlaps the bar only when a modal * opens, but the EDITOR overlay sits above everything and must beat * the admin bar. We bump z-index on every root element in CMS mode. * * 2. The accent color is admin-configurable (usually coral). Inside the * CMS we override to WP admin blue (#2271b1) so the widget visually * signals "this is an internal admin tool" and is easy to tell * apart from the client-facing frontend widget. * * Every CMS-context root element carries data-r2fb-context="cms" which * the widget JS sets on creation. Scoping here rather than via a global * body class keeps frontend rules untouched. */ [data-r2fb-context="cms"] { /* Blue-ish admin-tool accent — coral is reserved for the client widget. */ --r2fb-accent: #2271b1; --r2fb-accent-hover: #135e96; --r2fb-accent-soft: rgba(34, 113, 177, 0.12); --r2fb-accent-strong: #0a4b78; } /* FAB: sits above the admin bar. wp-admin bar is z-index 99999 — go higher. */ .r2fb-v2.r2fb-fab[data-r2fb-context="cms"] { z-index: 100000; } .r2fb-v2.r2fb-browse-badge[data-r2fb-context="cms"] { z-index: 100000; } /* Password gate / loading overlay / editor / list panel: beat the admin bar too. Editor in particular must fully obscure the admin chrome so annotations have clean focus. */ .r2fb-v2.r2fb-password-gate[data-r2fb-context="cms"] { z-index: 100001; } .r2fb-v2.r2fb-loading-overlay[data-r2fb-context="cms"] { z-index: 100001; } .r2fb-v2.r2fb-editor-overlay[data-r2fb-context="cms"] { z-index: 100002; } .r2fb-v2.r2fb-list-panel[data-r2fb-context="cms"] { z-index: 100002; } /* Admin bar height inset — prevent the FAB from tucking under the bar when the widget is positioned top-right on wide screens in the future, and leave a small breathing buffer at the bottom so it doesn't collide with WP footer meta on busy admin screens. Admin bar: 32px desktop, 46px on ≤782px (WP core breakpoint). */ @media (min-width: 783px) { .r2fb-v2.r2fb-fab[data-r2fb-context="cms"] { margin-top: 32px; /* harmless on bottom-positioned FABs */ } } @media (max-width: 782px) { .r2fb-v2.r2fb-fab[data-r2fb-context="cms"] { margin-top: 46px; } }