(NOT a custom element) - selector MUST start with '.'. The 8px padding matches the internal padding Radzen applies to its native tool buttons; without it the wrapper sits flush to its inner button and looks taller / offset versus the neighbours. */ .rz-html-editor-toolbar .rz-html-editor-custom-tool, .rz-html-editor-custom-tool { display: inline-flex; align-items: center; justify-content: center; padding: 8px; box-sizing: border-box; /* Do not create a second clip box for the inline flyout */ overflow: visible; } /* Match the icon glyph colour to native toolbar icons (Radzen Material) */ .jbf-rte-img-btn .rzi { font-size: 1rem; color: rgba(0, 0, 0, 0.54); } .jbf-rte-img-btn:hover .rzi { color: rgba(0, 0, 0, 0.87); } /* Floating image resize grip (rte-image-editor.js) - hover via CSS only (no JS) to avoid flicker */ button.jbf-rte-resize-handle:hover { background: rgba(125, 91, 129, 0.1) !important; color: #7d5b81 !important; box-shadow: 0 2px 8px rgba(2, 25, 34, 0.16) !important; } button.jbf-rte-resize-handle:focus-visible { outline: 2px solid rgba(125, 91, 129, 0.45); outline-offset: 2px; } /* Floating image delete trash icon (rte-image-editor.js) - paired with the resize grip in the bottom-right toolbox. Hover is CSS-only to match the resize handle and avoid the flicker that JS-driven hover would cause when the pointer crosses between the two controls. Uses the app's red token for hover so the destructive intent reads at a glance. */ button.jbf-rte-delete-handle:hover { background: rgba(216, 15, 61, 0.1) !important; color: var(--jbf-red, #d80f3d) !important; box-shadow: 0 2px 8px rgba(2, 25, 34, 0.16) !important; } button.jbf-rte-delete-handle:focus-visible { outline: 2px solid rgba(216, 15, 61, 0.45); outline-offset: 2px; } /* xs/sm tier (max-width 767.98px mirrors --bp-md). Media queries can't deref CSS vars. Enable horizontal scrolling on mobile so users can access all toolbar options. */ @media (max-width: 767.98px) { .jbf-html-editor .rz-html-editor-toolbar { overflow-x: auto; -webkit-overflow-scrolling: touch; /* Prevent bounce on horizontal scroll edges */ overscroll-behavior-x: contain; /* Show scrollbar hint */ scrollbar-width: thin; } /* Ensure toolbar items don't shrink below their natural size */ .jbf-html-editor .rz-html-editor-toolbar > * { flex-shrink: 0; } } /* JbfRightPanel context (container-name "rp", inline-size). When the editor is rendered inside a narrow side-panel (e.g. Local Website Charity / Hero / Photo Gallery edit panels, EventChecklistDialog ticket / coupon panels) on a desktop viewport, the @media rule above does NOT fire because the viewport itself is wide. The density observer (jbfRte.density) collapses Bold / Italic / UL / OL into the More menu, but the toolbar still carries non-collapsable items (Font, Font size, Color, Link, Image, Library, Source, Fullscreen) that overflow a ~400-600px panel. Container query mirrors the mobile rule so the toolbar scrolls horizontally inside the panel without touching the frozen desktop layout for full-width editors (FAQ Answer, About Valet Program, Owner Bio - those live in the wide main column). */ @container rp (max-width: 700px) { .jbf-html-editor .rz-html-editor-toolbar { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; } .jbf-html-editor .rz-html-editor-toolbar > * { flex-shrink: 0; } }