/** * ImproveAB point-and-click picker (front end, logged-in editors only). * Sections 1 to 25 are the panel's design system, section 26 is what a * live page adds, and the sections after it extend both. */ /* Hanken Grotesk (SIL Open Font License, see ../fonts/OFL.txt): the same bundled faces as admin.css, so the panel never fetches a font from a third party and never falls back to the theme's or system's sans. Loaded for managers only (the picker is not enqueued for visitors). */ @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/hanken-grotesk-latin-ext-wght.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/hanken-grotesk-latin-wght.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ===================================================================== ImproveAB - point-and-click panel --------------------------------------------------------------------- Scopes #improveab-pk-panel the panel (floating, docked, sheet) #improveab-pk-overlay page overlays: hover box, picked box #improveab-pk-strip the picking bar Every rule sits under one of these ids, so theme and builder CSS cannot reach in and nothing here leaks out. Hanken Grotesk is the plugin's own font. No framework, no other web fonts. Sections 1 to 15 are the base: tokens, controls, the panel's layouts and the picking bar, which, like the docked panel, follows the admin bar's real height (--pk-top, section 12). From section 16: undo and redo, the HTML view, the callout for big elements, long field lists, the variant card's foot, the phone sheet at peek and half, and the letter-only page badge. 24 and 25 are the reduced-motion and forced-colour rules. The whole state system in seven lines hover a fill you see at a glance: paper to sand-3, sand to sand-4 (outlined controls also take --pk-line-3). Never a faint border shade alone; fields darken their edge to ink-2. pressed one step past hover: sand-4 on paper, sand-5 on sand. focus keyboard only (:focus-visible): 2px paper gap + 2px ink ring. Fields also have typing focus (pointer, autofocus): ink border + soft halo, no ring. selected ink fill, paper text. One look for every toggle, tab and segment. A toggle keeps its label in both states. disabled only when an action truly cannot run. A primary that is waiting for input stays enabled (aria-disabled), keeps its label and rank, and a line right above it says why. loading spinner + verb ("Starting..."), width kept, aria-busy. error red border, red halo on focus, icon + message under the field it is about, cleared by the first valid input. Static hooks .is-hover .is-pressed .is-focus .is-typing .is-open mirror the pseudo-classes. The panel script can use them (e.g. a row lit while its page element is hovered). Layout (floating, docked, sheet) is a class the panel script sets from the viewport and the user's choice, not a media query. ===================================================================== */ /* ---------- 1. Tokens ------------------------------------------------ */ #improveab-pk-panel, #improveab-pk-overlay, #improveab-pk-strip { --pk-ink: #141414; --pk-ink-hover: #2b2925; --pk-ink-2: #3d3a34; --pk-muted: #5f5b54; --pk-off: #6e6a63; --pk-paper: #ffffff; --pk-sand-1: #f7f5f0; --pk-sand-2: #f1efe8; --pk-sand-3: #e8e4da; --pk-sand-4: #ddd8cc; --pk-sand-5: #d2ccbf; --pk-tag: #efece4; --pk-line-1: #e8e4dc; --pk-line-2: #d6d2c9; --pk-line-3: #85817a; --pk-amber: #ffb52e; --pk-amber-hover: #f4a716; --pk-amber-press: #e59a0e; --pk-amber-50: #fdf7e6; --pk-amber-100: #fff0c7; --pk-amber-300: #e6cf8f; --pk-amber-ink: #8a5b00; --pk-red: #b42318; --pk-red-50: #fcf1ef; --pk-red-100: #f8dcd7; --pk-red-150: #f5d3cd; --pk-green: #1c7a45; --pk-green-100: #d8f5e3; --pk-green-ink: #10331f; --pk-blue: #2a55dc; --pk-blue-50: #edf1ff; /* variant letters, the build's set (white on each is 5.4:1 or more) */ --pk-var-a: #b93a1f; --pk-var-b: #2a55dc; --pk-var-c: #1c7a45; --pk-var-d: #8a5b00; --pk-var-e: #7a3bb0; --pk-var-f: #0b6f6f; --pk-hover: var(--pk-sand-3); /* 1.27:1 on paper, seen at a glance */ --pk-hover-on-sand: var(--pk-sand-4); /* on the sand-2 track */ --pk-press: var(--pk-sand-4); --pk-press-on-sand: var(--pk-sand-5); --pk-ring: 0 0 0 2px var(--pk-paper), 0 0 0 4px var(--pk-ink); --pk-ring-inset: inset 0 0 0 2px var(--pk-ink), inset 0 0 0 4px var(--pk-paper); --pk-ring-on-ink: 0 0 0 2px var(--pk-ink), 0 0 0 4px var(--pk-paper); --pk-halo: 0 0 0 3px rgba(20, 20, 20, .10); --pk-halo-error: 0 0 0 3px rgba(180, 35, 24, .16); --pk-shadow-1: 0 1px 2px rgba(20, 20, 20, .08); --pk-shadow-2: 0 10px 28px rgba(20, 20, 20, .14), 0 1px 3px rgba(20, 20, 20, .08); --pk-shadow-3: 0 18px 48px rgba(20, 20, 20, .18), 0 2px 6px rgba(20, 20, 20, .08); --pk-r-sm: 6px; --pk-r-md: 10px; --pk-r-lg: 14px; --pk-r-xl: 16px; --pk-dur: 120ms; --pk-ease: cubic-bezier(.2, 0, 0, 1); --pk-font: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --pk-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; box-sizing: border-box; margin: 0; padding: 0; border: 0; font: 400 14px/1.45 var(--pk-font); color: var(--pk-ink); text-align: left; letter-spacing: normal; text-transform: none; list-style: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------- 2. Reset: nothing from the theme gets in ----------------- */ #improveab-pk-panel :where(*:not(svg, svg *)), #improveab-pk-overlay :where(*:not(svg, svg *)), #improveab-pk-strip :where(*:not(svg, svg *)) { all: unset; display: revert; box-sizing: border-box; } #improveab-pk-panel :where(svg), #improveab-pk-overlay :where(svg), #improveab-pk-strip :where(svg) { flex: none; overflow: visible; } /* stroked line icons (class "i"): the look comes from here, not from attributes on each svg */ :is(#improveab-pk-panel, #improveab-pk-overlay, #improveab-pk-strip) svg.i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* all: unset also drops the browser's clip on replaced elements, so an object-fit: cover image would paint outside its box. Put it back. */ #improveab-pk-panel :where(img, video, canvas), #improveab-pk-overlay :where(img, video, canvas) { overflow: clip; overflow-clip-margin: content-box; max-width: 100%; } #improveab-pk-panel :where(button, a, summary, label, select, [role="button"], [role="tab"], [role="option"], [role="menuitem"], [role="menuitemradio"]), #improveab-pk-overlay :where(button, a), #improveab-pk-strip :where(button, a) { cursor: pointer; } #improveab-pk-panel :where(textarea) { white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; resize: vertical; } #improveab-pk-panel :where(input, textarea)::placeholder { color: var(--pk-muted); opacity: 1; } #improveab-pk-panel :where(b, strong) { font-weight: 600; } #improveab-pk-panel .pk-vh, #improveab-pk-overlay .pk-vh, #improveab-pk-strip .pk-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---------- 3. Shared marks: letter badge, changed dot, key, spinner - */ :is(#improveab-pk-panel, #improveab-pk-overlay, #improveab-pk-strip) .pk-letter { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--pk-var-a); color: #fff; font: 700 12px/1 var(--pk-font); } :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-letter--sm { width: 18px; height: 18px; border-radius: 5px; font-size: 11px; } :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-letter--lg { width: 28px; height: 28px; border-radius: 7px; font-size: 13px; } :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-letter--b { background: var(--pk-var-b); } :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-letter--c { background: var(--pk-var-c); } :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-letter--d { background: var(--pk-var-d); } :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-letter--e { background: var(--pk-var-e); } :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-letter--f { background: var(--pk-var-f); } /* Changed marker: amber fill, dark amber edge (5.9:1) so it reads on white */ #improveab-pk-panel .pk-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pk-amber); box-shadow: inset 0 0 0 1.5px var(--pk-amber-ink); } #improveab-pk-panel .pk-changed { display: inline-flex; align-items: center; gap: 6px; color: var(--pk-amber-ink); font: 600 12px/1 var(--pk-font); } :is(#improveab-pk-panel, #improveab-pk-overlay, #improveab-pk-strip) .pk-key { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 1px solid currentColor; border-radius: 4px; font: 700 11px/1 var(--pk-font); } :is(#improveab-pk-panel, #improveab-pk-overlay, #improveab-pk-strip) .pk-spin { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: improveab-pk-spin .8s linear infinite; } @keyframes improveab-pk-spin { to { transform: rotate(360deg); } } /* ---------- 4. Buttons: primary, secondary, text --------------------- */ :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--pk-r-md); background: transparent; color: var(--pk-ink); font: 600 14px/1 var(--pk-font); white-space: nowrap; cursor: pointer; user-select: none; transition: background-color var(--pk-dur) var(--pk-ease), border-color var(--pk-dur) var(--pk-ease), box-shadow var(--pk-dur) var(--pk-ease), color var(--pk-dur) var(--pk-ease); } :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn > svg { width: 16px; height: 16px; } :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn--sm { height: 32px; padding: 0 10px; gap: 6px; border-radius: 8px; font-size: 13px; } #improveab-pk-panel .pk-btn--lg { height: 44px; padding: 0 18px; font-size: 15px; } #improveab-pk-panel .pk-btn--block { width: 100%; } #improveab-pk-panel .pk-btn__text { overflow: hidden; text-overflow: ellipsis; } /* primary */ :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn--primary { background: var(--pk-amber); border-color: var(--pk-amber); color: var(--pk-ink); } :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn--primary:is(:hover, .is-hover) { background: var(--pk-amber-hover); border-color: var(--pk-amber-hover); } :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn--primary:is(:active, .is-pressed) { background: var(--pk-amber-press); border-color: var(--pk-amber-press); box-shadow: inset 0 1px 2px rgba(20, 20, 20, .22); } /* primary waiting for input: still reachable, says why, keeps its rank */ #improveab-pk-panel .pk-btn--primary[aria-disabled="true"] { background: var(--pk-amber-50); border-color: var(--pk-amber-300); color: var(--pk-ink); } #improveab-pk-panel .pk-btn--primary[aria-disabled="true"]:is(:hover, .is-hover) { background: var(--pk-amber-100); border-color: var(--pk-amber-ink); color: var(--pk-ink); } #improveab-pk-panel .pk-btn--primary[aria-disabled="true"]:is(:active, .is-pressed) { background: var(--pk-amber-100); border-color: var(--pk-amber-ink); box-shadow: inset 0 1px 2px rgba(20, 20, 20, .14); } #improveab-pk-panel .pk-btn--primary[aria-busy="true"] { background: var(--pk-amber); border-color: var(--pk-amber); box-shadow: none; cursor: progress; } /* secondary */ :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn--secondary { background: var(--pk-paper); border-color: var(--pk-line-2); color: var(--pk-ink); } :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn--secondary:is(:hover, .is-hover) { background: var(--pk-hover); border-color: var(--pk-line-3); } :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn--secondary:is(:active, .is-pressed, [aria-expanded="true"]) { background: var(--pk-press); border-color: var(--pk-line-3); } #improveab-pk-panel .pk-btn--secondary[aria-busy="true"] { background: var(--pk-paper); border-color: var(--pk-line-2); cursor: progress; } /* loading keeps the width: both labels share one grid cell, so the wider one sets the width in every language; only the visible one is the name. */ :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn__labels { display: inline-grid; } :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn__labels > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn__labels > span > svg { flex: none; width: 16px; height: 16px; } :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn__busy, :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn[aria-busy="true"] .pk-btn__idle { visibility: hidden; } :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn[aria-busy="true"] .pk-btn__busy { visibility: visible; } /* text */ :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn--text { padding: 0 10px; color: var(--pk-ink-2); } :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn--text:is(:hover, .is-hover) { background: var(--pk-hover); color: var(--pk-ink); } :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn--text:is(:active, .is-pressed, [aria-expanded="true"]) { background: var(--pk-press); color: var(--pk-ink); } /* text, destructive (Remove variant): red words; red-100 on hover is 1.3:1 on paper like sand-3, and the red stays 5.1:1 on it */ #improveab-pk-panel .pk-btn--text.pk-btn--danger { color: var(--pk-red); } #improveab-pk-panel .pk-btn--text.pk-btn--danger:is(:hover, .is-hover) { background: var(--pk-red-100); color: var(--pk-red); } #improveab-pk-panel .pk-btn--text.pk-btn--danger:is(:active, .is-pressed) { background: var(--pk-red-150); } /* selected (any toggle button). The label stays the same when on. */ #improveab-pk-panel .pk-btn:is([aria-pressed="true"], .is-selected) { background: var(--pk-ink); border-color: var(--pk-ink); color: var(--pk-paper); } #improveab-pk-panel .pk-btn:is([aria-pressed="true"], .is-selected):is(:hover, .is-hover) { background: var(--pk-ink-hover); border-color: var(--pk-ink-hover); } /* keyboard focus: last among button states so it always shows */ :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn:is(:focus-visible, .is-focus) { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--pk-ring); z-index: 1; } /* truly unavailable */ :is(#improveab-pk-panel, #improveab-pk-overlay) .pk-btn:is(:disabled, .is-disabled) { background: var(--pk-sand-1); border-color: var(--pk-line-1); color: var(--pk-off); box-shadow: none; cursor: not-allowed; } #improveab-pk-panel .pk-btn--text:is(:disabled, .is-disabled) { background: transparent; border-color: transparent; } /* ---------- 5. Icon button + tooltip -------------------------------- */ #improveab-pk-panel .pk-icon-btn { display: inline-grid; place-items: center; position: relative; flex: none; width: 36px; height: 36px; border-radius: 8px; color: var(--pk-ink-2); background: transparent; cursor: pointer; transition: background-color var(--pk-dur) var(--pk-ease), color var(--pk-dur) var(--pk-ease), box-shadow var(--pk-dur) var(--pk-ease); } #improveab-pk-panel .pk-icon-btn > svg { width: 18px; height: 18px; } #improveab-pk-panel .pk-icon-btn--sm { width: 28px; height: 28px; border-radius: 6px; } #improveab-pk-panel .pk-icon-btn--sm > svg { width: 16px; height: 16px; } #improveab-pk-panel .pk-icon-btn--touch { width: 44px; height: 44px; border-radius: 10px; } #improveab-pk-panel .pk-icon-btn:is(:hover, .is-hover) { background: var(--pk-hover); color: var(--pk-ink); } #improveab-pk-panel .pk-icon-btn:is(:active, .is-pressed, [aria-expanded="true"]) { background: var(--pk-press); color: var(--pk-ink); } #improveab-pk-panel .pk-icon-btn:is([aria-pressed="true"], .is-selected) { background: var(--pk-ink); color: var(--pk-paper); } #improveab-pk-panel .pk-icon-btn:is([aria-pressed="true"], .is-selected):is(:hover, .is-hover) { background: var(--pk-ink-hover); } #improveab-pk-panel .pk-icon-btn:is(:focus-visible, .is-focus) { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--pk-ring); z-index: 1; } #improveab-pk-panel .pk-icon-btn:is(:disabled, .is-disabled) { background: transparent; color: var(--pk-line-3); box-shadow: none; cursor: not-allowed; } #improveab-pk-panel .pk-icon-btn[aria-busy="true"] { cursor: progress; } /* Tooltip: after 400 ms on hover, at once on keyboard focus, Esc hides. It sits beside its control in .pk-tipwrap (aria-hidden: the control's aria-label already carries the name), never inside the button. */ #improveab-pk-panel .pk-tipwrap { position: relative; display: inline-flex; flex: none; } #improveab-pk-panel .pk-tip { position: absolute; z-index: 40; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; background: var(--pk-ink); color: var(--pk-paper); font: 500 12px/1.3 var(--pk-font); white-space: nowrap; box-shadow: var(--pk-shadow-2); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--pk-dur) var(--pk-ease) 400ms, visibility 0s linear 520ms; } #improveab-pk-panel .pk-tip--end { left: auto; right: 0; transform: none; } #improveab-pk-panel .pk-tip--start { left: 0; transform: none; } #improveab-pk-panel .pk-tip--above { top: auto; bottom: calc(100% + 6px); } /* header icons: to the left, over the empty middle of the bar, so the target row under it stays readable */ #improveab-pk-panel .pk-tip--left { top: 50%; left: auto; right: calc(100% + 6px); transform: translateY(-50%); } #improveab-pk-panel .pk-tip .pk-key { border-color: rgba(255, 255, 255, .55); } #improveab-pk-panel .pk-tipwrap:is(:hover, .is-hover) > .pk-tip { opacity: 1; visibility: visible; transition-delay: 400ms, 400ms; } #improveab-pk-panel .pk-tipwrap:is(:has(:focus-visible), .is-focus, .is-tip) > .pk-tip { opacity: 1; visibility: visible; transition-delay: 0s, 0s; } /* ---------- 7. Segmented control and the variant tabs ---------------- */ #improveab-pk-panel .pk-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--pk-r-md); background: var(--pk-sand-2); } #improveab-pk-panel .pk-seg__item { display: inline-flex; align-items: center; justify-content: center; gap: 6px; position: relative; height: 32px; padding: 0 12px; border-radius: 7px; color: var(--pk-ink-2); background: transparent; font: 600 13px/1 var(--pk-font); white-space: nowrap; cursor: pointer; transition: background-color var(--pk-dur) var(--pk-ease), color var(--pk-dur) var(--pk-ease), box-shadow var(--pk-dur) var(--pk-ease); } #improveab-pk-panel .pk-seg__item > svg { width: 16px; height: 16px; } #improveab-pk-panel .pk-seg__item:is(:hover, .is-hover) { background: var(--pk-hover-on-sand); color: var(--pk-ink); } #improveab-pk-panel .pk-seg__item:is(:active, .is-pressed) { background: var(--pk-press-on-sand); color: var(--pk-ink); } #improveab-pk-panel .pk-seg__item:is([aria-selected="true"], [aria-checked="true"], [aria-pressed="true"], .is-selected) { background: var(--pk-ink); color: var(--pk-paper); } #improveab-pk-panel .pk-seg__item:is([aria-selected="true"], [aria-checked="true"], [aria-pressed="true"], .is-selected):is(:hover, .is-hover) { background: var(--pk-ink-hover); } #improveab-pk-panel .pk-seg__item:is(:focus-visible, .is-focus) { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--pk-ring); z-index: 1; } #improveab-pk-panel .pk-seg__item:is(:disabled, .is-disabled) { background: transparent; color: var(--pk-off); box-shadow: none; cursor: not-allowed; } /* Variant tabs: one control. Colour lives in the letter badge only; selection is the ink fill, the same as every other segment. */ #improveab-pk-panel .pk-variants { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #improveab-pk-panel .pk-seg--variants .pk-seg__item { height: 36px; padding: 0 10px 0 7px; gap: 7px; font-size: 14px; } #improveab-pk-panel .pk-seg--variants .pk-seg__item--letter { padding: 0 9px 0 7px; } #improveab-pk-panel .pk-seg--variants .pk-seg__item:is([aria-selected="true"], .is-selected) .pk-dot { box-shadow: none; } #improveab-pk-panel .pk-variants__max { color: var(--pk-muted); font: 500 12px/1.3 var(--pk-font); } /* ---------- 8. Fields: text, textarea, select ------------------------ */ #improveab-pk-panel .pk-field { display: grid; gap: 7px; } #improveab-pk-panel .pk-field__head { display: flex; align-items: center; gap: 8px; min-height: 20px; } #improveab-pk-panel .pk-label { color: var(--pk-ink); font: 600 14px/1.3 var(--pk-font); } #improveab-pk-panel .pk-field__aside { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--pk-muted); font: 500 12px/1 var(--pk-font); } #improveab-pk-panel .pk-help { color: var(--pk-muted); font: 400 13px/1.45 var(--pk-font); } #improveab-pk-panel .pk-error { display: flex; align-items: flex-start; gap: 6px; color: var(--pk-red); font: 500 13px/1.4 var(--pk-font); } #improveab-pk-panel .pk-error > svg { width: 16px; height: 16px; margin-top: 1px; } #improveab-pk-panel .pk-control { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 11px 14px; border: 1px solid var(--pk-line-3); border-radius: var(--pk-r-md); background: var(--pk-paper); color: var(--pk-ink); font: 400 15px/1.4 var(--pk-font); transition: border-color var(--pk-dur) var(--pk-ease), box-shadow var(--pk-dur) var(--pk-ease); } #improveab-pk-panel textarea.pk-control, #improveab-pk-panel .pk-control--area { min-height: 76px; } #improveab-pk-panel .pk-control:is(:hover, .is-hover) { border-color: var(--pk-ink-2); } /* typing focus: pointer, tap or autofocus on open */ #improveab-pk-panel .pk-control:is(:focus, .is-typing) { outline: 2px solid transparent; border-color: var(--pk-ink); box-shadow: var(--pk-halo); } /* keyboard focus: the panel script sets data-pk-input="keyboard" on Tab */ #improveab-pk-panel[data-pk-input="keyboard"] .pk-control:focus, #improveab-pk-panel .pk-control.is-focus { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--pk-ink); box-shadow: var(--pk-ring); } #improveab-pk-panel .pk-control:is([aria-invalid="true"], .is-error) { border-color: var(--pk-red); } #improveab-pk-panel .pk-control:is([aria-invalid="true"], .is-error):is(:focus, .is-typing) { border-color: var(--pk-red); box-shadow: var(--pk-halo-error); } #improveab-pk-panel[data-pk-input="keyboard"] .pk-control[aria-invalid="true"]:focus, #improveab-pk-panel .pk-control.is-error.is-focus { border-color: var(--pk-red); box-shadow: var(--pk-ring); } #improveab-pk-panel .pk-control:is(:disabled, .is-disabled) { background: var(--pk-sand-1); border-color: var(--pk-line-2); color: var(--pk-off); box-shadow: none; cursor: not-allowed; } #improveab-pk-panel .pk-control--mono { font: 400 14px/1.5 var(--pk-mono); } /* select: a button that opens a listbox, or a native select */ #improveab-pk-panel .pk-select-wrap { display: block; position: relative; } #improveab-pk-panel .pk-select { display: flex; align-items: center; padding-right: 42px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } #improveab-pk-panel .pk-select.is-placeholder { color: var(--pk-muted); } #improveab-pk-panel .pk-select-wrap > .pk-select__end { position: absolute; right: 14px; top: 50%; margin-top: -8px; display: grid; place-items: center; width: 16px; height: 16px; color: var(--pk-ink-2); pointer-events: none; transition: transform var(--pk-dur) var(--pk-ease); } #improveab-pk-panel .pk-select-wrap > .pk-select__end > svg { width: 16px; height: 16px; } #improveab-pk-panel .pk-select:is([aria-expanded="true"], .is-open) + .pk-select__end { transform: rotate(180deg); } #improveab-pk-panel .pk-select:is([aria-expanded="true"], .is-open) { border-color: var(--pk-ink); box-shadow: var(--pk-halo); } #improveab-pk-panel .pk-select[aria-busy="true"] { color: var(--pk-muted); cursor: progress; } #improveab-pk-panel .pk-listbox { display: grid; gap: 1px; padding: 4px; border: 1px solid var(--pk-line-2); border-radius: 12px; background: var(--pk-paper); box-shadow: var(--pk-shadow-2); } #improveab-pk-panel .pk-listbox__group { padding: 8px 10px 4px; color: var(--pk-muted); font: 600 12px/1.2 var(--pk-font); } #improveab-pk-panel .pk-option { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; border-radius: 8px; color: var(--pk-ink); font: 400 14px/1.35 var(--pk-font); cursor: pointer; } #improveab-pk-panel .pk-option__text { flex: 1; min-width: 0; } #improveab-pk-panel .pk-option__meta { display: block; color: var(--pk-muted); font-size: 12px; } #improveab-pk-panel .pk-option__check { width: 16px; height: 16px; color: var(--pk-ink); visibility: hidden; } #improveab-pk-panel .pk-option:is(:hover, .is-hover, [data-active="true"]) { background: var(--pk-hover); } #improveab-pk-panel .pk-option:is([aria-selected="true"], .is-selected) { font-weight: 600; } #improveab-pk-panel .pk-option:is([aria-selected="true"], .is-selected) .pk-option__check { visibility: visible; } #improveab-pk-panel .pk-option.is-focus { box-shadow: var(--pk-ring-inset); } /* ---------- 10. List rows (the setup rows, Advanced, goal summary) - */ #improveab-pk-panel .pk-rows { display: grid; border: 1px solid var(--pk-line-2); border-radius: var(--pk-r-lg); overflow: hidden; background: var(--pk-paper); } #improveab-pk-panel .pk-row { display: flex; align-items: center; gap: 12px; position: relative; width: 100%; min-height: 64px; padding: 12px 14px 12px 16px; background: var(--pk-paper); color: var(--pk-ink); text-align: left; cursor: pointer; transition: background-color var(--pk-dur) var(--pk-ease), box-shadow var(--pk-dur) var(--pk-ease); } #improveab-pk-panel .pk-row + .pk-row { border-top: 1px solid var(--pk-line-1); } #improveab-pk-panel .pk-row__text { display: grid; gap: 3px; flex: 1; min-width: 0; } #improveab-pk-panel .pk-row__title { display: flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--pk-font); } #improveab-pk-panel .pk-row__meta { display: flex; align-items: center; gap: 6px; color: var(--pk-muted); font: 400 13px/1.4 var(--pk-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #improveab-pk-panel .pk-row__meta > svg { width: 15px; height: 15px; } #improveab-pk-panel .pk-row__end { display: grid; place-items: center; flex: none; width: 24px; height: 24px; color: var(--pk-muted); transition: transform var(--pk-dur) var(--pk-ease), color var(--pk-dur) var(--pk-ease); } #improveab-pk-panel .pk-row__end > svg { width: 18px; height: 18px; } #improveab-pk-panel .pk-row:is(:hover, .is-hover) { background: var(--pk-hover); } #improveab-pk-panel .pk-row:is(:hover, .is-hover) .pk-row__end { color: var(--pk-ink); transform: translateX(2px); } #improveab-pk-panel .pk-row:is(:active, .is-pressed) { background: var(--pk-press); } #improveab-pk-panel .pk-row:is([aria-expanded="true"], .is-open) .pk-row__end { color: var(--pk-ink); transform: rotate(90deg); } #improveab-pk-panel .pk-row:is(:focus-visible, .is-focus) { outline: 2px solid transparent; outline-offset: -2px; box-shadow: var(--pk-ring-inset); z-index: 1; } #improveab-pk-panel .pk-row.is-error .pk-row__meta { color: var(--pk-red); font-weight: 500; } #improveab-pk-panel .pk-row:is([aria-disabled="true"], .is-disabled) { background: var(--pk-paper); cursor: not-allowed; } #improveab-pk-panel .pk-row:is([aria-disabled="true"], .is-disabled) .pk-row__title { color: var(--pk-off); } #improveab-pk-panel .pk-row[aria-busy="true"] { cursor: progress; } /* ---------- 11. Links, menus, popovers ------------------------------ */ #improveab-pk-panel .pk-menu { display: grid; gap: 1px; min-width: 232px; padding: 4px; border: 1px solid var(--pk-line-2); border-radius: 12px; background: var(--pk-paper); box-shadow: var(--pk-shadow-2); } #improveab-pk-panel .pk-menu__label { padding: 8px 10px 4px; color: var(--pk-muted); font: 600 12px/1.2 var(--pk-font); } #improveab-pk-panel .pk-menu__item { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 8px; color: var(--pk-ink); font: 500 14px/1.2 var(--pk-font); cursor: pointer; } #improveab-pk-panel .pk-menu__item > svg { width: 16px; height: 16px; color: var(--pk-ink-2); } #improveab-pk-panel .pk-menu__item .pk-menu__check { margin-left: auto; visibility: hidden; color: var(--pk-ink); } #improveab-pk-panel .pk-menu__item[aria-checked="true"] .pk-menu__check { visibility: visible; } #improveab-pk-panel .pk-menu__item[aria-checked="true"] { font-weight: 600; } #improveab-pk-panel .pk-menu__item:is(:hover, .is-hover) { background: var(--pk-hover); } #improveab-pk-panel .pk-menu__item:is(:active, .is-pressed) { background: var(--pk-press); } #improveab-pk-panel .pk-menu__item:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--pk-ring-inset); } #improveab-pk-panel .pk-menu__sep { height: 1px; margin: 4px 6px; background: var(--pk-line-1); } /* ---------- 12. Panel shell ----------------------------------------- */ #improveab-pk-panel.pk-panel { container: pk / inline-size; display: flex; flex-direction: column; position: relative; width: 380px; max-height: calc(100vh - 64px); border-radius: var(--pk-r-xl); background: var(--pk-paper); box-shadow: var(--pk-shadow-3); overflow: hidden; } /* docked: starts under the admin bar, whatever its real height. WordPress fixes #wpadminbar at 32 px, and on busy sites its items wrap into a second row below that box, so offsetHeight stays 32. The script measures the lowest bottom of #wp-toolbar > ul > li (at least 32), again on resize, and sets it as --pk-top on :root. The script places the fixed panel at top: var(--pk-top), and the picking bar (section 15) takes that height, so it covers every row of the bar. */ #improveab-pk-panel.pk-panel--docked { border-radius: 0; max-height: none; box-shadow: -1px 0 0 var(--pk-line-1), -14px 0 32px rgba(20, 20, 20, .07); } #improveab-pk-panel.pk-panel--sheet { width: 100%; max-height: none; border-radius: 20px 20px 0 0; box-shadow: 0 -1px 0 var(--pk-line-1), 0 -12px 36px rgba(20, 20, 20, .18); } #improveab-pk-panel .pk-head { flex: none; position: relative; z-index: 3; background: var(--pk-paper); border-bottom: 1px solid var(--pk-line-1); transition: box-shadow var(--pk-dur) var(--pk-ease); } #improveab-pk-panel .pk-head.is-scrolled { box-shadow: 0 10px 14px -12px rgba(20, 20, 20, .45); } #improveab-pk-panel .pk-head__bar { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 8px 0 16px; } #improveab-pk-panel .pk-logo { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--pk-ink); } #improveab-pk-panel .pk-logo > svg { width: 18px; height: 18px; } #improveab-pk-panel .pk-head__title { flex: 1; min-width: 0; font: 600 16px/1.2 var(--pk-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #improveab-pk-panel .pk-head__actions { display: flex; align-items: center; gap: 2px; } #improveab-pk-panel .pk-target { display: flex; align-items: center; gap: 8px; padding: 0 16px 12px; } #improveab-pk-panel .pk-el { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 10px; border-radius: 8px; background: var(--pk-blue-50); color: var(--pk-blue); font: 600 13px/1 var(--pk-font); white-space: nowrap; } #improveab-pk-panel .pk-el > svg { width: 14px; height: 14px; } #improveab-pk-panel .pk-grab { display: grid; place-items: center; width: 100%; height: 22px; cursor: grab; border-radius: 20px 20px 0 0; } #improveab-pk-panel .pk-grab::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--pk-line-2); transition: background-color var(--pk-dur) var(--pk-ease); } #improveab-pk-panel .pk-grab:is(:hover, .is-hover)::before { background: var(--pk-line-3); } #improveab-pk-panel .pk-grab:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--pk-ring-inset); } #improveab-pk-panel .pk-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 24px; padding: 20px 16px 28px; scroll-padding: 24px 0 96px; } #improveab-pk-panel .pk-body > * { flex-shrink: 0; } /* one column that never grows past the panel: long original text and translated labels shrink and cut, instead of widening the card */ #improveab-pk-panel .pk-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } #improveab-pk-panel .pk-note { color: var(--pk-muted); font: 400 13px/1.45 var(--pk-font); } #improveab-pk-panel .pk-foot { flex: none; position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 12px 16px 16px; background: var(--pk-paper); border-top: 1px solid var(--pk-line-1); transition: box-shadow var(--pk-dur) var(--pk-ease); } #improveab-pk-panel .pk-foot.has-more { box-shadow: 0 -10px 14px -12px rgba(20, 20, 20, .45); } /* more below: the last lines fade into the footer, the cue sits in the fade */ #improveab-pk-panel .pk-foot.has-more::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 56px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 88%); pointer-events: none; } #improveab-pk-panel .pk-foot { flex-wrap: wrap; } #improveab-pk-panel .pk-foot > .pk-btn--primary { flex: 1 1 auto; min-width: 0; } #improveab-pk-panel .pk-foot .pk-btn--lg { padding: 0 16px; } #improveab-pk-panel .pk-foot .pk-btn--text.pk-btn--lg { padding: 0 12px; } /* why the primary waits: one line, in place, above the buttons */ #improveab-pk-panel .pk-foot__why { flex: 1 1 100%; display: flex; align-items: center; gap: 6px; margin: -2px 0 2px; color: var(--pk-ink-2); font: 500 13px/1.3 var(--pk-font); } #improveab-pk-panel .pk-foot__why > svg { width: 15px; height: 15px; color: var(--pk-amber-ink); } /* the pill sits on the footer's top edge, where the fade is nearly white, so it covers as little of the body as it can */ #improveab-pk-panel .pk-foot__status { position: absolute; left: 16px; right: 16px; bottom: calc(100% - 8px); display: flex; justify-content: center; pointer-events: none; } #improveab-pk-panel .pk-more { display: inline-flex; align-items: center; gap: 6px; pointer-events: auto; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--pk-line-2); background: var(--pk-paper); color: var(--pk-ink-2); font: 600 12.5px/1 var(--pk-font); box-shadow: var(--pk-shadow-2); cursor: pointer; transition: background-color var(--pk-dur) var(--pk-ease), border-color var(--pk-dur) var(--pk-ease), opacity 160ms var(--pk-ease); } #improveab-pk-panel .pk-more > svg { width: 14px; height: 14px; } #improveab-pk-panel .pk-more:is(:hover, .is-hover) { background: var(--pk-hover); border-color: var(--pk-line-3); color: var(--pk-ink); } #improveab-pk-panel .pk-more:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--pk-ring), var(--pk-shadow-2); } /* narrow docked panels (320 to 359 px): long labels give way to icons. The label is only hidden from sight, so it stays the button's name. */ @container pk (max-width: 359px) { #improveab-pk-panel .pk-hide-narrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #improveab-pk-panel .pk-target .pk-btn--sm { padding: 0 8px; } #improveab-pk-panel .pk-foot > .pk-btn--primary { flex: 1 1 100%; } #improveab-pk-panel .pk-foot > .pk-btn--secondary { flex: 1 1 auto; } } #improveab-pk-panel .pk-only-narrow { display: none; } @container pk (max-width: 359px) { #improveab-pk-panel .pk-only-narrow { display: inline; } } /* ---------- 13. Variant card ---------------------------------------- */ #improveab-pk-panel .pk-vcard { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; border: 1px solid var(--pk-line-2); border-radius: var(--pk-r-lg); overflow: hidden; background: var(--pk-paper); } #improveab-pk-panel .pk-vcard__orig { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--pk-sand-1); border-bottom: 1px solid var(--pk-line-2); } #improveab-pk-panel .pk-vcard__orig-text { flex: 1; min-width: 0; color: var(--pk-ink-2); font: 400 14px/1.4 var(--pk-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #improveab-pk-panel .pk-vcard__tag { color: var(--pk-muted); font: 500 12px/1 var(--pk-font); } #improveab-pk-panel .pk-vcard__body { display: grid; gap: 10px; padding: 12px 14px 8px; } #improveab-pk-panel .pk-vcard__head { display: flex; align-items: center; gap: 10px; min-height: 32px; } #improveab-pk-panel .pk-vcard__name { flex: 1; min-width: 0; font: 600 15px/1.2 var(--pk-font); } #improveab-pk-panel .pk-vcard__tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -8px; } #improveab-pk-panel .pk-vcard__tools .pk-btn--text { height: 32px; padding: 0 8px; gap: 6px; font-size: 13px; border-radius: 8px; } #improveab-pk-panel .pk-quote { padding: 12px 14px; border-radius: var(--pk-r-md); background: var(--pk-sand-1); color: var(--pk-ink-2); font: 400 15px/1.45 var(--pk-font); } #improveab-pk-panel .pk-seg--touch .pk-seg__item { height: 44px; } /* Fields view */ #improveab-pk-panel .pk-fields { display: grid; gap: 18px; } #improveab-pk-panel .pk-fieldrow { display: grid; gap: 7px; } #improveab-pk-panel .pk-fieldrow__tools { margin-left: auto; opacity: 0; transition: opacity var(--pk-dur) var(--pk-ease); } #improveab-pk-panel .pk-fieldrow:is(:hover, :focus-within, .is-hover) .pk-fieldrow__tools { opacity: 1; } @media (hover: none) { #improveab-pk-panel .pk-fieldrow__tools { opacity: 1; } } #improveab-pk-panel .pk-image { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 8px; border: 1px solid var(--pk-line-3); border-radius: var(--pk-r-md); background: var(--pk-paper); transition: border-color var(--pk-dur) var(--pk-ease); } #improveab-pk-panel .pk-image:is(:hover, .is-hover) { border-color: var(--pk-ink-2); } #improveab-pk-panel .pk-image__thumb { display: block; flex: none; width: 72px; height: 48px; border-radius: 7px; object-fit: cover; background: var(--pk-sand-2); box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .08); } #improveab-pk-panel .pk-image__text { display: grid; gap: 2px; flex: 1; min-width: 0; } #improveab-pk-panel .pk-image__name { font: 600 14px/1.3 var(--pk-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #improveab-pk-panel .pk-image__meta { color: var(--pk-muted); font: 400 12px/1.3 var(--pk-font); } /* Status notes (success) */ #improveab-pk-panel .pk-status { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; font: 500 14px/1.4 var(--pk-font); } #improveab-pk-panel .pk-status > svg { width: 18px; height: 18px; margin-top: 1px; } #improveab-pk-panel .pk-status--ok { background: var(--pk-green-100); color: var(--pk-green-ink); } #improveab-pk-panel .pk-status--ok > svg { color: var(--pk-green); } #improveab-pk-panel .pk-status--plain { background: var(--pk-sand-1); color: var(--pk-ink-2); } #improveab-pk-panel .pk-status .pk-btn--text { height: 28px; margin: -4px -6px -4px auto; padding: 0 8px; font-size: 13px; } /* ---------- 14. Page overlays while picking -------------------------- */ #improveab-pk-overlay { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; } #improveab-pk-overlay .pk-hl { position: absolute; border: 2px solid var(--pk-blue); border-radius: 3px; background: rgba(42, 85, 220, .07); } #improveab-pk-overlay .pk-hl__label { position: absolute; left: -2px; bottom: calc(100% + 6px); display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: 7px; background: var(--pk-blue); color: #fff; font: 600 12.5px/1 var(--pk-font); white-space: nowrap; box-shadow: 0 4px 14px rgba(20, 20, 20, .2); } #improveab-pk-overlay .pk-hl__label--below { bottom: auto; top: calc(100% + 6px); } #improveab-pk-overlay .pk-hl__label--inside { bottom: auto; top: 6px; left: 6px; } #improveab-pk-overlay .pk-hl__size { font-weight: 500; font-variant-numeric: tabular-nums; } #improveab-pk-overlay .pk-hl__sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .45); } #improveab-pk-overlay .pk-hl__hint { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; } #improveab-pk-overlay .pk-picked { position: absolute; border: 2px solid var(--pk-blue); border-radius: 5px; } #improveab-pk-overlay .pk-picked__badge { position: absolute; top: 6px; left: 6px; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 3px; border-radius: 7px; background: var(--pk-paper); color: var(--pk-ink); font: 600 12px/1 var(--pk-font); white-space: nowrap; box-shadow: 0 1px 3px rgba(20, 20, 20, .28), 0 0 0 1px rgba(20, 20, 20, .06); pointer-events: auto; } /* fields view: the part whose field has focus, inside the picked box */ #improveab-pk-overlay .pk-sub { position: absolute; border: 1.5px dashed var(--pk-blue); border-radius: 3px; background: rgba(42, 85, 220, .05); } /* phone: first tap lights an element, this bar confirms it */ #improveab-pk-overlay .pk-tapbar { position: absolute; left: -2px; top: calc(100% + 8px); display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 12px; background: var(--pk-ink); color: #fff; box-shadow: 0 10px 28px rgba(20, 20, 20, .28); pointer-events: auto; } #improveab-pk-overlay .pk-tapbar__name { padding: 0 6px 0 8px; font: 600 14px/1 var(--pk-font); white-space: nowrap; } #improveab-pk-overlay .pk-tapbar .pk-btn { height: 44px; padding: 0 14px; font-size: 15px; } #improveab-pk-overlay .pk-tapbar .pk-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .35); background: transparent; } #improveab-pk-overlay .pk-tapbar .pk-btn--ghost:is(:hover, .is-hover) { background: rgba(255, 255, 255, .14); } #improveab-pk-overlay .pk-tapbar .pk-btn:is(:focus-visible, .is-focus) { box-shadow: var(--pk-ring-on-ink); } /* ---------- 15. Picking bar ----------------------------------------- */ /* Desktop: sits exactly over the WordPress admin bar (32 px), so it is never on the site's own header. Phone (.pk-strip--bottom): a bottom bar that lifts above any fixed bar the site has at the bottom. */ #improveab-pk-strip { position: fixed; top: 0; left: 0; right: 0; z-index: 100000; display: flex; align-items: center; gap: 12px; height: var(--pk-top, 32px); padding: 0 6px 0 12px; background: var(--pk-ink); color: #fff; font: 500 13px/1 var(--pk-font); } #improveab-pk-strip .pk-strip__icon { width: 16px; height: 16px; color: var(--pk-amber); } #improveab-pk-strip .pk-strip__title { font-weight: 600; white-space: nowrap; } #improveab-pk-strip .pk-strip__hint { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .82); white-space: nowrap; overflow: hidden; } #improveab-pk-strip .pk-key { border-color: rgba(255, 255, 255, .55); color: #fff; } #improveab-pk-strip .pk-strip__cancel { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; height: 24px; padding: 0 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .4); color: #fff; font: 600 12.5px/1 var(--pk-font); cursor: pointer; white-space: nowrap; transition: background-color var(--pk-dur) var(--pk-ease), box-shadow var(--pk-dur) var(--pk-ease); } #improveab-pk-strip .pk-strip__cancel:is(:hover, .is-hover) { background: rgba(255, 255, 255, .14); } #improveab-pk-strip .pk-strip__cancel:is(:active, .is-pressed) { background: rgba(255, 255, 255, .24); } #improveab-pk-strip .pk-strip__cancel:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--pk-ring-on-ink); } #improveab-pk-strip.pk-strip--bottom { top: auto; bottom: 0; height: auto; min-height: 64px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) 16px; border-radius: 18px 18px 0 0; gap: 10px; box-shadow: 0 -10px 28px rgba(20, 20, 20, .28); font-size: 15px; } #improveab-pk-strip.pk-strip--bottom .pk-strip__text { display: grid; gap: 4px; min-width: 0; } #improveab-pk-strip.pk-strip--bottom .pk-strip__hint { font-size: 13px; } #improveab-pk-strip.pk-strip--bottom .pk-strip__cancel { height: 44px; padding: 0 16px; border-radius: 10px; font-size: 15px; } /* ---------- 16. Undo and redo ----------------------------------------- Two icon buttons where the "2/2" pill was. Each has an aria-label ("Undo", "Redo"), aria-keyshortcuts ("Control+Z", "Control+Shift+Z"; Meta on Mac) and a tooltip with the shortcut, aligned to the end (.pk-tip--end) so the card never clips it. Disabled is honest here: with nothing to undo the action cannot run. A polite live region says what was undone ("Undone: heading text"). 32 px is the card's compact size, as in the tools row; on touch (--touch) they are 44 px. */ #improveab-pk-panel .pk-history { display: inline-flex; align-items: center; gap: 2px; margin-right: -6px; } #improveab-pk-panel .pk-history .pk-icon-btn { width: 32px; height: 32px; border-radius: 8px; } #improveab-pk-panel .pk-history .pk-icon-btn--touch { width: 44px; height: 44px; border-radius: 10px; } #improveab-pk-panel .pk-history .pk-icon-btn > svg { width: 17px; height: 17px; } /* ---------- 17. HTML view -------------------------------------------- */ /* "Edit HTML" is a toggle: aria-pressed, ink when on, same label. */ #improveab-pk-panel .pk-html { display: grid; gap: 7px; } #improveab-pk-panel .pk-html .pk-control--mono { min-height: 112px; font-size: 13.5px; line-height: 1.55; tab-size: 2; } #improveab-pk-panel .pk-html__hint { display: flex; align-items: flex-start; gap: 6px; color: var(--pk-muted); font: 400 13px/1.45 var(--pk-font); } #improveab-pk-panel .pk-html__hint > svg { width: 15px; height: 15px; margin-top: 2px; } #improveab-pk-panel .pk-html__hint code, #improveab-pk-panel .pk-error code { padding: 0 4px; border-radius: 4px; background: var(--pk-sand-2); color: var(--pk-ink); font: 500 12.5px/1.5 var(--pk-mono); } #improveab-pk-panel .pk-error code { background: var(--pk-red-50); color: var(--pk-red); } /* fields view: one field in HTML, from its braces button; while it is on, the row's tools stay in sight (the script can also set .is-html on the row where :has() is missing) */ #improveab-pk-panel .pk-fieldrow:is(:has(.pk-icon-btn[aria-pressed="true"]), .is-html) .pk-fieldrow__tools { opacity: 1; } /* ---------- 19. Callout (a big or interactive element picked) -------- */ #improveab-pk-panel .pk-callout { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 10px; padding: 12px 14px 14px; border-radius: 12px; background: var(--pk-sand-1); box-shadow: inset 0 0 0 1px var(--pk-line-2); color: var(--pk-ink-2); font: 400 14px/1.5 var(--pk-font); } #improveab-pk-panel .pk-callout > svg { width: 18px; height: 18px; margin-top: 2px; color: var(--pk-ink-2); } #improveab-pk-panel .pk-callout b { color: var(--pk-ink); } #improveab-pk-panel .pk-callout__actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } /* ---------- 20. Long field lists ------------------------------------- */ /* a disclosure: open shows in the chevron, not a pressed fill */ #improveab-pk-panel .pk-fields__more { justify-self: start; margin-left: -10px; } #improveab-pk-panel .pk-fields__more > svg { transition: transform var(--pk-dur) var(--pk-ease); } #improveab-pk-panel .pk-fields__more[aria-expanded="true"] { background: transparent; color: var(--pk-ink-2); } #improveab-pk-panel .pk-fields__more[aria-expanded="true"]:is(:hover, .is-hover) { background: var(--pk-hover); color: var(--pk-ink); } #improveab-pk-panel .pk-fields__more[aria-expanded="true"] > svg { transform: rotate(180deg); } /* ---------- 21. Variant card foot: remove, with undo ----------------- */ #improveab-pk-panel .pk-vcard__foot { display: flex; justify-content: flex-end; padding: 6px 8px; border-top: 1px solid var(--pk-line-1); } #improveab-pk-panel .pk-vcard__foot .pk-btn--text { height: 32px; padding: 0 10px; gap: 6px; font-size: 13px; border-radius: 8px; } /* ---------- 22. Phone sheet: peek and half -------------------------- Peek: handle, tabs ending in More, the field. Half: the body starts at Variants; no fade and no "More below" pill, because at these heights they sat on the tabs. The reason line turns into a button that opens the sheet to full at the missing field. At full height the pill and fade come back (section 12). */ #improveab-pk-panel.pk-panel--sheet:is(.is-peek, .is-half) .pk-foot.has-more { box-shadow: none; } #improveab-pk-panel.pk-panel--sheet:is(.is-peek, .is-half) .pk-foot.has-more::before, #improveab-pk-panel.pk-panel--sheet:is(.is-peek, .is-half) .pk-foot__status { display: none; } #improveab-pk-panel .pk-why-btn { flex: 1 1 100%; display: flex; align-items: center; gap: 6px; min-height: 32px; margin: -6px -8px 0; padding: 0 8px; border-radius: 8px; color: var(--pk-ink-2); font: 500 13.5px/1.3 var(--pk-font); text-align: left; transition: background-color var(--pk-dur) var(--pk-ease); } #improveab-pk-panel .pk-why-btn > svg { width: 15px; height: 15px; color: var(--pk-amber-ink); } #improveab-pk-panel .pk-why-btn > svg:last-child { margin-left: auto; color: var(--pk-ink-2); } #improveab-pk-panel .pk-why-btn u { text-decoration-thickness: 1px; text-underline-offset: 3px; } #improveab-pk-panel .pk-why-btn:is(:hover, .is-hover) { background: var(--pk-hover); color: var(--pk-ink); } #improveab-pk-panel .pk-why-btn:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--pk-ring); } #improveab-pk-panel .pk-peek-more { margin-left: auto; } /* peek body: the tabs, then the field being edited with its normal typing focus (ink edge, 3 px halo). The padding keeps the halo and the rounded corners inside the sheet, so nothing clips them. */ #improveab-pk-panel.pk-panel--sheet.is-peek .pk-body { gap: 12px; padding: 4px 16px 20px; } /* the sheet's fields are 16 px, so iOS does not zoom into them */ #improveab-pk-panel.pk-panel--sheet :is(.pk-control, .pk-select) { font-size: 16px; } /* ---------- 23. Page badge: where it goes ---------------------------- */ /* The badge is a child of .pk-picked, so its offsets follow the picked box. The script tries these places in order and takes the first that covers no words: 1. the full badge outside, level with the top edge, on the side with room: --outside-end, else --outside-start; 2. the 24 px letter badge (--letter) in the same two places; 3. the letter inside the top-right corner: --inside-end; 4. on text whose first line runs into that corner (a heading on a phone), the letter inside the bottom-right corner: --inside-bottom-end. */ #improveab-pk-overlay .pk-picked__badge--letter { width: 24px; padding: 0; justify-content: center; } #improveab-pk-overlay .pk-picked__badge--letter .pk-letter { width: 18px; height: 18px; border-radius: 5px; font-size: 11px; } #improveab-pk-overlay .pk-picked__badge--outside-end { top: -2px; left: calc(100% + 8px); right: auto; } #improveab-pk-overlay .pk-picked__badge--outside-start { top: -2px; left: auto; right: calc(100% + 8px); } #improveab-pk-overlay .pk-picked__badge--inside-end { top: 4px; left: auto; right: 4px; } #improveab-pk-overlay .pk-picked__badge--inside-bottom-end { top: auto; left: auto; right: 4px; bottom: 4px; } /* ---------- 24. Reduced motion -------------------------------------- */ @media (prefers-reduced-motion: reduce) { #improveab-pk-panel *, #improveab-pk-overlay *, #improveab-pk-strip * { transition-duration: 0ms !important; animation: none !important; } #improveab-pk-panel .pk-row:not([aria-expanded="true"], .is-open):hover .pk-row__end { transform: none; } :is(#improveab-pk-panel, #improveab-pk-overlay, #improveab-pk-strip) .pk-spin { border-right-color: currentColor; opacity: .55; } } /* ---------- 25. Forced colours: keep rings and borders visible ------ */ @media (forced-colors: active) { #improveab-pk-panel :is(.pk-btn, .pk-icon-btn, .pk-seg__item, .pk-row, .pk-why-btn, .pk-more, .pk-grab):focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; } #improveab-pk-panel .pk-control:focus { outline: 2px solid CanvasText; outline-offset: 1px; } /* the ink fill of a selected, pressed or current item is lost here */ #improveab-pk-panel :is(.pk-seg__item, .pk-btn, .pk-icon-btn):is([aria-selected="true"], [aria-pressed="true"], [aria-checked="true"], .is-selected) { outline: 2px solid Highlight; outline-offset: -2px; } } /* ---------- 26. The panel on a real page ----------------------------- */ /* Everything above is the design system; this section is what a live page adds: where the panel sits (floating, docked under the admin bar's real bottom, the phone sheet and its heights), the pieces the design system does not cover (Advanced, the success view, messages) and the page-level rules while picking. */ html.improveab-pk-picking, html.improveab-pk-picking * { cursor: crosshair !important; } /* The A/B Tests menu that started picking stays shut while the bar covers it: with the pointer still over it, its dropdown would sit on the page. */ html.improveab-pk-picking #wpadminbar .ab-sub-wrapper { display: none !important; } html.improveab-pk-pushedpage { transition: margin .15s ease; } /* The first dock lands at once, so the pick is measured on the page it will stay on; only a later change of side is animated. */ html.improveab-pk-pushedpage.improveab-pk-pushnow { transition: none; } @media (prefers-reduced-motion: reduce) { html.improveab-pk-pushedpage { transition: none; } } /* The Media Library opens above the panel and the picking bar. */ body.modal-open .media-modal-backdrop { z-index: 1000002 !important; } body.modal-open .media-modal { z-index: 1000003 !important; } #improveab-pk-overlay { z-index: 999990; } #improveab-pk-strip { z-index: 1000000; } #improveab-pk-panel [hidden], #improveab-pk-overlay [hidden], #improveab-pk-strip [hidden] { display: none !important; } /* Every one-column grid in the panel gets a column that may shrink: an auto column grows to its content's min-content width, so one long nowrap line (a site's original heading in the Original row) widened the card past the panel and clipped the fields and buttons beside it. Sections 12 and 13 hold .pk-sec and .pk-vcard; these are the grids nested in them. */ #improveab-pk-panel :is(.pk-field, .pk-rows, .pk-row__text, .pk-vcard__body, .pk-fields, .pk-fieldrow, .pk-image__text, .pk-rowbody, .pk-subfields, .pk-html) { grid-template-columns: minmax(0, 1fr); } /* In a longer language ("Übergeordnetes Element auswählen") the target row's buttons take a second line instead of running past the panel. */ #improveab-pk-panel .pk-target { flex-wrap: wrap; } /* Position: floating by default (the script sets left/top), docked on either edge under the admin bar's real bottom (--pk-top), or a sheet at the bottom. */ #improveab-pk-panel.pk-panel { position: fixed; z-index: 999999; top: 48px; right: 16px; max-width: calc(100vw - 32px); } #improveab-pk-panel.pk-panel--docked { top: var(--pk-top, 32px); bottom: 0; max-width: none; } #improveab-pk-panel.pk-panel--left { box-shadow: 1px 0 0 var(--pk-line-1), 14px 0 32px rgba(20, 20, 20, .07); } #improveab-pk-panel.pk-panel--sheet { top: auto; right: 0; left: 0; bottom: 0; max-width: none; transition: height 240ms var(--pk-ease); } #improveab-pk-panel.pk-panel.is-dragging { user-select: none; transition: none; } #improveab-pk-panel .pk-resize { position: absolute; top: 0; bottom: 0; left: -3px; width: 7px; z-index: 5; cursor: ew-resize; } #improveab-pk-panel.pk-panel--left .pk-resize { left: auto; right: -3px; } #improveab-pk-panel.pk-panel--float .pk-resize { left: -3px; } #improveab-pk-panel .pk-resize:hover { background: rgba(42, 85, 220, .25); } #improveab-pk-panel.pk-panel--sheet .pk-resize { display: none; } #improveab-pk-panel.pk-panel--float .pk-head__bar, #improveab-pk-panel.pk-panel--docked .pk-head__bar { cursor: grab; } #improveab-pk-panel .pk-head__actions { position: relative; } #improveab-pk-panel .pk-menu--pos { position: absolute; top: 48px; right: 8px; z-index: 50; } /* What the last Undo or Redo took back, under the card's head (O3). */ #improveab-pk-panel .pk-stepnote { color: var(--pk-ink-2); } /* A pick wider than the room beside a floating panel docks for that pick; the menu says why. */ #improveab-pk-panel .pk-menu__note { max-width: 264px; padding: 2px 10px 8px; color: var(--pk-ink-2); font: 400 12.5px/1.45 var(--pk-font); } /* The page behind a full-height sheet. */ #improveab-pk-overlay .pk-dim { position: fixed; inset: 0; background: rgba(20, 20, 20, .32); pointer-events: auto; } /* The phone sheet: 44 px targets, the safe area under the footer, the header bar at 48 px. */ #improveab-pk-panel.pk-panel--sheet .pk-head__bar { height: 48px; } #improveab-pk-panel.pk-panel--sheet .pk-seg--variants .pk-seg__item, #improveab-pk-panel.pk-panel--sheet .pk-variants .pk-btn--text, #improveab-pk-panel.pk-panel--sheet .pk-vcard__tools .pk-btn--text, #improveab-pk-panel.pk-panel--sheet .pk-image .pk-btn { height: 44px; } #improveab-pk-panel.pk-panel--sheet .pk-target .pk-btn--sm { height: 36px; } #improveab-pk-panel.pk-panel--sheet .pk-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom)); } #improveab-pk-panel.pk-panel--sheet .pk-foot > .pk-btn--primary { flex: 1 1 auto; } #improveab-pk-panel.pk-panel--sheet .pk-fieldrow__tools { opacity: 1; } /* Peek: the handle, the tabs ending in More, and the field being edited (the selected one in the fields view). Nothing else. */ #improveab-pk-panel .pk-peek-more { display: none; } #improveab-pk-panel.pk-panel--sheet.is-peek .pk-peek-more { display: inline-flex; } #improveab-pk-panel.pk-panel--sheet.is-peek :is(.pk-head, .pk-foot, .pk-resize), #improveab-pk-panel.pk-panel--sheet.is-peek .pk-body > :not([data-pk-sechead="variants"]), #improveab-pk-panel.pk-panel--sheet.is-peek [data-pk-sechead="variants"] > :not(.pk-variants):not(.pk-vcard), #improveab-pk-panel.pk-panel--sheet.is-peek .pk-variants > .pk-tipwrap, #improveab-pk-panel.pk-panel--sheet.is-peek .pk-variants > .pk-variants__max, #improveab-pk-panel.pk-panel--sheet.is-peek .pk-vcard :is(.pk-vcard__orig, .pk-vcard__tools, .pk-vcard__foot, .pk-html__hint, .pk-fields__more, .pk-quote + .pk-note), #improveab-pk-panel.pk-panel--sheet.is-peek .pk-fieldrow:not(.is-on) { display: none !important; } #improveab-pk-panel.pk-panel--sheet.is-peek .pk-fields__rest[hidden] { display: grid !important; } #improveab-pk-panel.pk-panel--sheet.is-peek .pk-variants { flex-wrap: nowrap; } /* The field keeps its typing focus whole: the card lends it its room, so nothing clips the 3 px halo or the rounded corners. */ #improveab-pk-panel.pk-panel--sheet.is-peek .pk-vcard { border: 0; border-radius: 0; overflow: visible; background: transparent; } #improveab-pk-panel.pk-panel--sheet.is-peek .pk-vcard__body { padding: 0; } /* Half: the card is compact; its name row with Undo and Redo comes back at full height. */ #improveab-pk-panel.pk-panel--sheet:is(.is-peek, .is-half) .pk-vcard__head { display: none; } /* Section rows and the open one's fields. */ #improveab-pk-panel .pk-row__sum { overflow: hidden; text-overflow: ellipsis; } #improveab-pk-panel .pk-row.is-error .pk-row__meta > svg { color: var(--pk-red); } #improveab-pk-panel .pk-rowbody { display: grid; gap: 14px; padding: 4px 16px 18px; border-top: 1px solid var(--pk-line-1); background: var(--pk-paper); } #improveab-pk-panel .pk-row[aria-expanded="true"] + .pk-rowbody { border-top: 0; } #improveab-pk-panel .pk-rowbody + .pk-row { border-top: 1px solid var(--pk-line-1); } #improveab-pk-panel .pk-subfields { display: grid; gap: 18px; } #improveab-pk-panel .pk-subfields:empty { display: none; } #improveab-pk-panel .pk-field > .pk-field { margin-top: 4px; } #improveab-pk-panel .pk-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } #improveab-pk-panel .pk-label--sm { font-size: 13px; } #improveab-pk-panel .pk-field__aside .pk-btn { margin: -6px -8px -6px 0; } #improveab-pk-panel .pk-field__aside .pk-tipwrap { margin: -4px -4px -4px 0; } /* A line of its own that says what the plugin does, darker than help. */ #improveab-pk-panel .pk-note--ink { color: var(--pk-ink-2); } /* Traffic split: the bar in the variant colours and the ratio. */ #improveab-pk-panel .pk-split { display: flex; align-items: center; gap: 10px; } #improveab-pk-panel .pk-split__bar { display: flex; flex: 1; height: 8px; border-radius: 4px; overflow: hidden; background: var(--pk-sand-2); } #improveab-pk-panel .pk-split__bar > span { display: block; height: 100%; } #improveab-pk-panel .pk-split__bar > span + span { box-shadow: inset 2px 0 0 var(--pk-paper); } #improveab-pk-panel .pk-split__ratio { color: var(--pk-ink-2); font: 600 13px/1 var(--pk-font); font-variant-numeric: tabular-nums; } /* The selector, as code. */ #improveab-pk-panel .pk-code { display: block; padding: 10px 12px; border-radius: 10px; background: var(--pk-sand-1); box-shadow: inset 0 0 0 1px var(--pk-line-1); color: var(--pk-ink-2); font: 400 13px/1.45 var(--pk-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* A failed save, at the end of the body. */ #improveab-pk-panel .pk-msg { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--pk-sand-1); color: var(--pk-ink-2); font: 500 14px/1.4 var(--pk-font); } #improveab-pk-panel .pk-msg.is-error { background: var(--pk-red-50); color: var(--pk-red); } #improveab-pk-panel .pk-msg > svg { width: 18px; height: 18px; margin-top: 1px; } /* The variant card's extra parts. */ #improveab-pk-panel .pk-vcard__body--orig { padding-bottom: 14px; } #improveab-pk-panel .pk-fieldrow.is-on .pk-label { color: var(--pk-ink); } /* A one-line field starts one line tall and grows with its text. */ #improveab-pk-panel .pk-fields textarea.pk-control { min-height: 46px; } #improveab-pk-panel .pk-fields textarea.pk-control--mono { min-height: 84px; } #improveab-pk-panel .pk-fields__rest { display: grid; gap: 18px; } /* "Changed" is a button that puts the original back. */ #improveab-pk-panel .pk-changed--btn { height: 24px; margin: -2px 0; padding: 0 6px; border-radius: 6px; cursor: pointer; transition: background-color var(--pk-dur) var(--pk-ease); } #improveab-pk-panel .pk-changed--btn:is(:hover, .is-hover) { background: var(--pk-amber-50); color: var(--pk-ink); } #improveab-pk-panel .pk-changed--btn:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--pk-ring); } #improveab-pk-panel .pk-tipwrap.is-tipoff > .pk-tip { opacity: 0 !important; visibility: hidden !important; } /* A removed variant's line, under the tabs, with Undo for ten seconds. */ #improveab-pk-panel .pk-status--plain .pk-btn--text { margin-left: auto; } /* The success view's preview links. */ #improveab-pk-panel .pk-row--link { min-height: 52px; text-decoration: none; } #improveab-pk-panel .pk-row--link .pk-row__end > svg { width: 16px; height: 16px; } /* Right to left: the panel's own left alignment is read from the right, and the row chevron, Undo and Redo point the other way. Nothing changes on a left-to-right page. */ html[dir="rtl"] :is(#improveab-pk-panel, #improveab-pk-overlay, #improveab-pk-strip), html[dir="rtl"] #improveab-pk-panel :is(.pk-row, .pk-why-btn) { text-align: right; } html[dir="rtl"] #improveab-pk-panel :is([data-pk-act="undo"], [data-pk-act="redo"]) > svg, html[dir="rtl"] #improveab-pk-panel .pk-row__end > svg:has(path[d="m9 18 6-6-6-6"]) { transform: scaleX(-1); } /* ===================================================================== ImproveAB - point-and-click panel: narrow windows, phones, forced colours --------------------------------------------------------------------- Every rule sits under #improveab-pk-panel, #improveab-pk-overlay or #improveab-pk-strip. 27 The picking bar's hint on narrow windows 28 Phone picking: the tap bar above the element 29 Forced colours: the panel's edge, its tabs and icon buttons, and everything that floats over the page ===================================================================== */ /* ---------- 27. The picking bar's hint on narrow windows ------------- The bottom bar (phones, narrow windows, 200% and 400% zoom) holds the task, one line of hint and Cancel. Under 560 px the hint is its first sentence only, "Click it to open the panel.", and may wrap. The other two stay in the bar for screen readers (role="status" reads them) and are not lost to sight: Up is in the label on the lit element ("↑ Section"), and Esc does what Cancel, beside it, says. The two sentences sit in their own span (.pk-strip__more). Touch keeps its own hint ("Tap once to see it, again to use it"), which fits. */ #improveab-pk-strip .pk-strip__more { display: contents; } @media (max-width: 559.98px) { #improveab-pk-strip.pk-strip--bottom .pk-strip__hint { display: block; white-space: normal; overflow: visible; line-height: 1.35; } #improveab-pk-strip.pk-strip--bottom .pk-strip__title { white-space: normal; line-height: 1.25; } #improveab-pk-strip.pk-strip--bottom .pk-strip__more { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } } /* Short windows (400% zoom is 320 x 200): the bar keeps 44 px Cancel but no more height than its two lines need. */ @media (max-height: 360px) { #improveab-pk-strip.pk-strip--bottom { min-height: 0; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); } #improveab-pk-strip.pk-strip--bottom .pk-strip__text { gap: 2px; } } /* ---------- 28. Phone picking: the tap bar above the element ---------- The first tap lights an element and its bar says what it is, with Section and Use this. The bar goes where there is room, and the page does not move under the finger: below the element (as now), when the room between the element and the picking bar is the tap bar's height plus 16 px; else above it, when the room between the top of the screen (or the admin bar's bottom, while it is in view) and the element is; else inside the element, at the bottom of its visible part (an element taller than the screen): the script sets --pk-tap-y, the bar's top within the lit box, so it sits 8 px above whichever comes first, the element's bottom or the picking bar. The script picks the place on the first tap and again on scroll. */ #improveab-pk-overlay .pk-tapbar--above { top: auto; bottom: calc(100% + 8px); } #improveab-pk-overlay .pk-tapbar--inside { top: var(--pk-tap-y, 8px); bottom: auto; left: 8px; } /* ---------- 29. Forced colours -------------------------------------- Same rules as the admin pages: what can be pressed has a 1 px ButtonText edge (here also "Changed", which puts the original back, and the sheet's reason line, which is a button), what is chosen has it in Highlight (with r4's 2 px Highlight ring inside), focus is the CanvasText ring outside. The panel and everything that floats over the page take a CanvasText edge: their shadows are gone here. */ @media (forced-colors: active) { #improveab-pk-panel :is(.pk-seg__item, .pk-icon-btn, .pk-changed--btn, .pk-why-btn) { border: 1px solid ButtonText; } #improveab-pk-panel :is(.pk-seg__item, .pk-icon-btn):is([aria-selected="true"], [aria-pressed="true"], [aria-checked="true"], .is-selected) { border-color: Highlight; } #improveab-pk-panel :is(.pk-seg__item, .pk-icon-btn, .pk-btn):is([aria-selected="true"], [aria-pressed="true"], [aria-checked="true"], .is-selected):focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; } #improveab-pk-panel :is(.pk-seg__item, .pk-icon-btn):is(:disabled, .is-disabled) { border-color: GrayText; border-style: dashed; } #improveab-pk-panel :is(.pk-seg, .pk-head__actions, .pk-history) { gap: 4px; } #improveab-pk-panel.pk-panel { border: 1px solid CanvasText; } #improveab-pk-panel.pk-panel--docked { border-width: 0 0 0 1px; } #improveab-pk-panel.pk-panel--docked.pk-panel--left { border-width: 0 1px 0 0; } #improveab-pk-panel.pk-panel--sheet { border-width: 1px 0 0; } #improveab-pk-panel :is(.pk-tip, .pk-menu) { border: 1px solid CanvasText; } #improveab-pk-overlay :is(.pk-hl__label, .pk-picked__badge, .pk-tapbar) { border: 1px solid CanvasText; } #improveab-pk-strip { border-bottom: 1px solid CanvasText; } #improveab-pk-strip.pk-strip--bottom { border-bottom: 0; border-top: 1px solid CanvasText; } #improveab-pk-strip .pk-strip__cancel:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; } } /* ===================================================================== ImproveAB - point-and-click panel: the keyboard hint, right to left --------------------------------------------------------------------- Every rule sits under #improveab-pk-overlay or #improveab-pk-strip. 30 The keyboard hint on narrow windows 31 Right to left: the tap bar and the lit element's label start from the right; both stay inside the window 32 Forced colours: icons take the colour of their text ===================================================================== */ /* ---------- 30. The keyboard hint on narrow windows ------------------- Picking with the keyboard, the hint is longer than the click hint (536 px against 408), so it gets its short form sooner: under 700 px (it was clipped by 7 px at 200% zoom too, not only wrapped at 390). The short form keeps the two keys the person needs to pick at all: ← → move. Enter uses it. "from part to part", the Up sentence and the Esc sentence are out of sight, as in the click hint (section 27): Up is on the lit element's label ("↑ Section"), and Esc does what Cancel, beside the hint, says. All of it stays in the bar for screen readers. Each sentence keeps together, so the hint breaks between them if it must; it fits one line at 390 px and at 400% zoom (the bar is 64 and 60 px tall, from 97 and 110). The hint's sentences sit in spans (.pk-strip__say, .pk-strip__more, .pk-strip__wide). On a wide bar the spans are display: contents, so it lays out as now. */ #improveab-pk-strip :is(.pk-strip__say, .pk-strip__wide) { display: contents; } @media (max-width: 699.98px) { #improveab-pk-strip.pk-strip--bottom .pk-strip__hint--keys { display: block; white-space: normal; overflow: visible; line-height: 1.35; } #improveab-pk-strip.pk-strip--bottom:has(.pk-strip__hint--keys) .pk-strip__title { white-space: normal; line-height: 1.25; } #improveab-pk-strip.pk-strip--bottom .pk-strip__hint--keys .pk-strip__say { display: inline; white-space: nowrap; } #improveab-pk-strip.pk-strip--bottom .pk-strip__hint--keys .pk-strip__more { display: inline-block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* the words inside a sentence stay in the line, 1 px and clipped, so a screen reader reads "move from part to part." as one sentence */ #improveab-pk-strip.pk-strip--bottom .pk-strip__hint--keys .pk-strip__wide { display: inline-block; width: 1px; height: 1px; margin-right: -1px; overflow: hidden; clip-path: inset(50%); white-space: pre; vertical-align: top; } } /* ---------- 31. Right to left: the tap bar starts from the right ------ In Hebrew or Arabic an element starts at its right edge, and so do its words. The tap bar (below, above or inside) and the label on a lit element start there too, and run left. Anchored left, a tap bar on a button near the right edge ran 80 px off a 390 px screen. The bar's own order (name, Section, Use this) already follows the page's direction. */ html[dir="rtl"] #improveab-pk-overlay :is(.pk-tapbar, .pk-hl__label) { left: auto; right: -2px; } html[dir="rtl"] #improveab-pk-overlay .pk-tapbar--inside { left: auto; right: 8px; } html[dir="rtl"] #improveab-pk-overlay .pk-hl__label--inside { left: auto; right: 6px; } /* Either direction, both stay inside the window: the tap bar is never wider than the window less 16 px (a long element name ends in "…"), and the script shifts it, or the label, back inside when it would run past the window's far edge, 8 px from it; when it cannot fit, its start edge wins (the script sets --pk-dx). */ #improveab-pk-overlay :is(.pk-tapbar, .pk-hl__label) { translate: var(--pk-dx, 0px) 0; } #improveab-pk-overlay .pk-tapbar { max-width: calc(100vw - 16px); } #improveab-pk-overlay .pk-tapbar__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* ---------- 32. Forced colours: icons take the colour of their text ---- An svg that sets its own colour keeps it in forced colours, so in a dark contrast theme the panel's grey icons (row chevrons, menu icons) were dark on black and the picking bar's target stayed amber. Here every icon takes the colour of the text it sits in, as in the admin (admin.css). Fills drawn as attributes (the logo) are untouched. */ @media (forced-colors: active) { :is(#improveab-pk-panel, #improveab-pk-overlay, #improveab-pk-strip) svg { color: inherit !important; } }