/* * The rich-text editor at the surrounding form's scale, rather than its own. * * HugeRTE ships oxide, a complete design language with no relationship to Bootstrap or Tabler, and * it is simply bigger. Measured against Tabler on the same page: * * .tox font-size 16px vs Tabler's 14px body * toolbar icon 24px vs Tabler's .icon at 1.25rem / 20px * toolbar button 34x28 * .tox font-family -apple-system stack, ignoring Inter entirely * * So an editor dropped into a Tabler form reads as a control from a different application. Nothing * here is a defect in oxide; it is two scales meeting, and this picks the page's. * * SPECIFICITY RATHER THAN SOURCE ORDER, AND THAT IS FORCED. * * Every other corrections sheet here can rely on order - TomSelectCorrectionsCssReference declares * the skin as its dependency, so Wicket guarantees the skin loads first and the correction second. * That is impossible for this one: HugeRTE injects its skin at runtime, from JavaScript, when the * editor initializes. It therefore lands in after everything Wicket rendered, including this * file, and would win every tie. * * Hence the doubled class. Oxide writes `.tox .tox-tbtn`, specificity (0,2,0); `.tox.tox-hugerte * .tox-tbtn` is (0,3,0) and wins wherever it sits. Keep that shape when adding a rule, and do not * "simplify" it back to a single class - the result would render correctly in a test that checks * the bytes and wrongly in a browser. * * OXIDE DEFINES NO CUSTOM PROPERTIES AT ALL - checked, zero - so every value it uses is a literal * and a theme cannot remap them. The properties below are this library's own, declared so an * application can retune the scale without restating these selectors. */ .tox.tox-hugerte { --bs5-editor-font-size: 0.875rem; --bs5-editor-icon-size: 1.25rem; --bs5-editor-button-height: 1.75rem; --bs5-editor-button-width: 2rem; /* Inherit, so the editor follows whatever the page set rather than naming a font of its own. */ font-family: inherit; font-size: var(--bs5-editor-font-size); } .tox.tox-hugerte .tox-tbtn { height: var(--bs5-editor-button-height); width: var(--bs5-editor-button-width); font-size: var(--bs5-editor-font-size); } /* * The icon carries most of the visual weight: oxide's is 24px inside a 28px button, which is what * makes the toolbar read as oversized beside Tabler's 20px glyphs. */ .tox.tox-hugerte .tox-tbtn svg { width: var(--bs5-editor-icon-size); height: var(--bs5-editor-icon-size); } /* The format dropdown is a button with a label, so it sizes from text rather than from the icon. */ .tox.tox-hugerte .tox-tbtn--select { width: auto; font-size: var(--bs5-editor-font-size); } /* * The rich-text editor taking the focus treatment every other control on the page has. * * Oxide does answer focus, just not where a Bootstrap form expects and not in a shape that matches * anything around it. It draws an overlay inside the edit area only: * * .tox .tox-edit-area::before { border: 2px solid #2D6ADF; border-radius: 4px; opacity: 0 } * .tox.tox-edit-focus .tox-edit-area::before { opacity: 1 } * * so a hard two-pixel box appears around the text and stops below the toolbar, in oxide's own blue * (white in oxide-dark), while every other control on the form shifts its border and lays a soft * ring outside itself: * * .form-control:focus { border-color: ...; box-shadow: var(--tblr-shadow-input), * 0 0 0 .25rem rgba(var(--tblr-primary-rgb), .25) } * * The ring goes on the container, because the container is the control - the toolbar belongs to the * field, and a highlight that excludes it reads as though only part of the widget were live. The * overlay is then suppressed rather than recolored: two concentric indicators of different shape, * hardness and inset on one control is noise, and matching its color would only make the pair * harder to read as one thing. * * The radius comes along with the ring. Oxide sets 10px against Tabler's 6px, and a ring follows the * radius of the element it surrounds, so leaving it would draw a visibly rounder ring than the one * on the field above. What is deliberately not matched is oxide's 2px border against Tabler's 1px: * that is resting appearance rather than the focus answer, and changing it is a look, not a fix. * * Note the two focus values are named but NOT declared, unlike the scale properties at the top of * this file. A declaration on the element beats one inherited from an ancestor, so declaring them * here would mean an application setting its own accent on a wrapper had no effect and had to * out-specify a sheet the theme contributed. Naming them only at the point of use leaves any * ancestor declaration winning, with these as the fallback. The reveal control in * tabler-form-corrections.css carries the same shape for the same reason. * * The border literal is copied from tabler.css, which hardcodes it rather than exposing a token - * recheck it on a Tabler version bump. The ring reads --tblr-primary-rgb, so it follows the theme * on its own. Tabler's own focus shadow also restates var(--tblr-shadow-input), the 1px layer its * controls already carry at rest; the editor carries none, so repeating it here would introduce a * difference on focus rather than match one, and only the ring layer is taken. */ .tox.tox-hugerte { border-radius: var(--tblr-border-radius); transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } .tox.tox-hugerte.tox-edit-focus { border-color: var(--bs5-editor-focus-border, rgb(131, 183, 232)); box-shadow: var(--bs5-editor-focus-ring, 0 0 0 .25rem rgba(var(--tblr-primary-rgb), .25)); } .tox.tox-hugerte.tox-edit-focus .tox-edit-area::before { opacity: 0; } @media (prefers-reduced-motion: reduce) { .tox.tox-hugerte { transition: none; } }