/** * Simple Extendify toolbar styles. All selectors target page-level * elements (the toolbar is appended to , not inside a * `.extendify-toolbar` wrapper), so each rule is preceded by a * `/* no-prefix * /` marker the postcss scoper recognizes. */ /* no-prefix */ #extendify-toolbar { position: fixed; top: 0; left: 0; right: 0; height: 32px; background: #1d2327; color: #f0f0f1; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; line-height: 1; z-index: 99999; display: flex; align-items: stretch; justify-content: space-between; box-sizing: border-box; -webkit-font-smoothing: subpixel-antialiased; transition: top 300ms ease-in-out, left 300ms ease-in-out, right 300ms ease-in-out, max-width 300ms ease-in-out, border-radius 300ms ease-in-out; } /* no-prefix */ #extendify-toolbar *, #extendify-toolbar *::before, #extendify-toolbar *::after { box-sizing: border-box; } /* no-prefix */ #extendify-toolbar .ext-tb-section { display: flex; align-items: stretch; } /* no-prefix */ #extendify-toolbar .ext-tb-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; color: #f0f0f1; background: transparent; border: 0; border-radius: 0; text-decoration: none; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; letter-spacing: 0; } /* no-prefix */ #extendify-toolbar .ext-tb-btn:hover { background: #2c3338; color: #72aee6; } /* no-prefix */ #extendify-toolbar .ext-tb-btn:focus-visible { background: #2c3338; color: #72aee6; outline: 0; box-shadow: inset 0 0 0 2px #72aee6; } /* AI Agent — matches the "Ask AI" button blue elsewhere in Extendify so the entry-point reads consistently. */ /* no-prefix */ #extendify-toolbar .ext-tb-ai-agent { margin: 4px 8px 4px 4px; height: 24px; padding: 0 10px; gap: 4px; color: #ffffff; background: #3858e9; border-radius: 4px; line-height: 1; transition: width 300ms ease-in-out, padding 300ms ease-in-out, margin 300ms ease-in-out, opacity 100ms ease-in-out; } /* Mirror Extendify's native AdminBar button: collapse to nothing when the docked agent sidebar is open (no point offering "open agent" while the agent is already open). */ /* no-prefix */ #extendify-toolbar.ext-tb-agent-open .ext-tb-ai-agent { width: 0; padding: 0; margin: 0; opacity: 0; overflow: hidden; pointer-events: none; } /* no-prefix */ #extendify-toolbar .ext-tb-ai-agent:hover { color: #ffffff; background: #2145e6; opacity: 1; } /* no-prefix */ #extendify-toolbar .ext-tb-ai-agent:focus-visible { color: #ffffff; outline: 0; box-shadow: 0 0 0 2px #1d2327, 0 0 0 4px #ffffff; } /* no-prefix */ #extendify-toolbar .ext-tb-ai-agent .ext-tb-magic { flex: 0 0 auto; } /* no-prefix */ #extendify-toolbar .ext-tb-ai-agent[disabled] { opacity: 0.5; cursor: default; } /* Quick Edit toggle — pill + thumb, mirrors `extendify-quick-edit-on`. */ /* no-prefix */ #extendify-toolbar .ext-tb-toggle { position: relative; display: inline-block; width: 26px; height: 14px; background: #50575e; border-radius: 7px; transition: background 150ms ease; flex: 0 0 auto; } /* no-prefix */ #extendify-toolbar .ext-tb-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; background: #ffffff; border-radius: 50%; transition: left 150ms ease; } /* no-prefix */ html.extendify-quick-edit-on #extendify-toolbar .ext-tb-toggle { background: #3858e9; } /* no-prefix */ html.extendify-quick-edit-on #extendify-toolbar .ext-tb-toggle-thumb { left: 14px; } /* Admin link external-tab indicator. */ /* no-prefix */ #extendify-toolbar .ext-tb-admin-link .ext-tb-external { flex: 0 0 auto; opacity: 0.7; } /* no-prefix */ #extendify-toolbar .ext-tb-admin-link:hover .ext-tb-external, #extendify-toolbar .ext-tb-admin-link:focus-visible .ext-tb-external { opacity: 1; } /* no-prefix */ #extendify-toolbar .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* When Extendify Agent sidebar is open, reframe the toolbar to match the way Extendify reframes the core admin bar (slot it next to the sidebar inside the rounded frame). */ /* no-prefix */ #extendify-toolbar.ext-tb-agent-open { top: 8px; left: 384px; right: 8px; border-radius: 8px 8px 0 0; overflow: hidden; } @media screen and (max-width: 782px) { /* no-prefix */ #extendify-toolbar { height: 46px; font-size: 14px; } /* no-prefix */ #extendify-toolbar .ext-tb-btn { height: 46px; padding: 0 10px; } /* no-prefix */ #extendify-toolbar .ext-tb-ai-agent { margin: 8px 8px 8px 6px; height: 30px; padding: 0 10px; } } /* Reduced motion (a11y M7): zero the toolbar's reframe slide, the AI-agent button's collapse, and the Quick Edit toggle's pill + thumb transitions. `!important` so it wins over the environment's global `prefers-reduced-motion` reset (which forces a tiny non-zero duration) — see quick-edit.css for the same reasoning. Page-level like every rule here, so it carries `no-prefix`. */ @media (prefers-reduced-motion: reduce) { /* no-prefix */ #extendify-toolbar, #extendify-toolbar .ext-tb-ai-agent, #extendify-toolbar .ext-tb-toggle, #extendify-toolbar .ext-tb-toggle-thumb { transition: none !important; } }