/** * BGL-3137 comment 35377: read-only tint for Syncfusion RichTextEditor * wrappers marked with the `bgl3137-readonly-tint` class. * * Applied to the Standard Manual Workaround field on: * - BIA IT Application show / create / edit embeds * - kp_dependency Service Provider / Asset SOCI mirrors * * The class is added to the outer `.bob_syncfusion` wrapper on DOMReady * (before Syncfusion attaches `.e-content`) so the tint is in place the * moment `.e-content` is inserted - avoiding the visible flash of the * default white background that occurred with the previous JS-driven * `.css('background-color', ...)` write. * * The colour matches readonly.js's dropzone tint (rgb(244, 245, 248)). * * Specificity note: Syncfusion's bundled material.css ships * .e-richtexteditor .e-rte-content .e-content { background: unset; } * (specificity 0,3,0). That rule is injected at runtime by style-loader * from public/js/app.js, so it lands in AFTER our . Naming * the tint with only `.bob_syncfusion` + `.bgl3137-readonly-tint` * followed by a descendant `.e-content` (also 0,3,0) loses the cascade * to Syncfusion's later declaration. Syncfusion adds `.e-richtexteditor` * to the same `.bob_syncfusion` element when it initialises (see * @syncfusion/ej2-base component.js: `addClass([this.element], * ['e-control', moduleClass])`), so anchoring the selector on that * class as well raises our specificity to 0,4,0 and lets the tint win * without `!important`. */ .bob_syncfusion.bgl3137-readonly-tint.e-richtexteditor .e-content, .bob_syncfusion.bgl3137-readonly-tint.e-richtexteditor textarea { background-color: rgb(244, 245, 248); }