Document visual-editor customization vars for editable-element redesign#676
Merged
formfcw merged 2 commits intoMay 15, 2026
Conversation
- Add .directus-visual-editing-actions-flipped selector (NEW class)
- Add CSS vars: --actions--offset, --actions--focus-ring-{color,width,offset},
--edit-btn-hover--bg-color, --ai-btn--bg-color, --ai-btn-hover--bg-color
- Refresh compiled-in defaults to match the redesigned overlay
(border-spacing 9→8px, border-width 2→1px, hover/highlight opacity
0.333→0.4, edit-btn 28→24px, edit-btn--radius 50%→6px)
- Add callout that defaults come from the Studio theme inside the iframe
Refs directus/directus visual-editing PR (florian/cms-1944-...)
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
editable-element overlay buttons on the website are now keyboard reachable: :focus-visible outline + :focus-within reveal in the overlay redesign make the prior 'only accessible on Directus side' caveat no longer true.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Sub-PR for #628. Documents the consumer-facing CSS surface introduced by the editable-element overlay redesign in
directus/directus(branchflorian/cms-1944-update-editable-elements-design-in-visual-editor-library).Files touched:
content/guides/02.content/8.visual-editor/3.customization.md— main change: new CSS surface + Studio-theme callout.content/getting-started/10.accessibility.md— drops the now-obsolete "Visual Editor is only accessible on the Directus side" bullet. The redesign adds:focus-visiblestyling and:focus-withinreveal to the overlay buttons, so they're keyboard-reachable on the website.What changed
New CSS selector
.directus-visual-editing-actions-flipped— modifier on the rect that flips the action buttons below it when the rect sits near the top of the viewport.New CSS variables
--directus-visual-editing--actions--offset--directus-visual-editing--actions--focus-ring-color/--focus-ring-width/--focus-ring-offset--directus-visual-editing--edit-btn-hover--bg-color--directus-visual-editing--ai-btn--bg-color/--ai-btn-hover--bg-colorRefreshed compiled-in defaults to match the redesigned overlay:
border-spacing9px → 8pxborder-width2px → 1pxrect-hover--opacity/rect-highlight--opacity0.333 → 0.4edit-btn--width/--height28px → 24pxedit-btn--radius50% → 6px (circle → rounded square)New callout explaining that inside the Studio iframe these defaults are sourced from the active Studio theme (primary color, border radius, button size, focus-ring width/offset). User
:root/customClassoverrides still take precedence.