Need support for shadow dom, stylesheet appending to body.

[ibharat]

[hxf31891]

@ibharat What exactly are you requesting here?

[hxf31891]

84 Likely connected

[ibharat]

@ibharat What exactly are you requesting here?

The styles are being applied to the body element. However, in my scenario, the application is contained within a shadow DOM where applying styles directly to the body element is not feasible.

Temporary fix: i have to add manually below lines in my global css

[class^="ac"] { display: flex; align-items: center; justify-content: space-between; }

[class^="jc"] { display: flex; justify-content: center; }

[class^="psRl"] { position: relative; }

[class^="cResize"] { cursor: ew-resize; } [class^="cCross"] { cursor: crosshair; }

[class^="rbgcpControlBtnWrapper"] { height: 28px; display: flex; padding: 2px; position: relative; background: #e9e9f5; align-items: center; border-radius: 6px; justify-content: center; }

rbgcp-gradient-btn:has([class^="rbgcpControlBtnSelected"]), #rbgcp-solid-btn:has([class^="rbgcpControlBtnSelected"]) {

color: #568cf5 !important; background: white !important; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) !important; }

[class^="rbgcpControlBtn"]:not([class^="rbgcpControlBtnSelected"]):not([class^="rbgcpControlBtnWrapper"]) { color: rgb(86, 86, 86); height: 24px; display: flex; font-size: 12px; background: rgba(255, 255, 255, 0); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0); transition: all 160ms ease; align-items: center; font-weight: 700; line-height: 1; padding-left: 8px; border-radius: 4px; padding-right: 8px; justify-content: center; }

[class^="rbgcpControlIconBtn"] { width: 30px; height: 24px; display: flex; position: relative; align-items: center; border-radius: 4px; justify-content: center; stroke: rgb(50, 49, 54); }

[class^="rbgcpColorModelDropdown"] { top: 34px; right: -2px; padding: 5px; z-index: 100000000; position: absolute; background: #e9e9f5; box-shadow: 1px 1px 14px 1px rgba(0, 0, 0, 0.25); border-radius: 6px; } [class^="rbgcpEyedropperCover"] { top: 0px; left: 0px; width: 100vw; cursor: copy; height: 100vh; z-index: 100000000; position: fixed; } [class^="rbgcpControlInput"] { color: rgb(50, 49, 54); width: 34px; border: none; height: 24px; outline: none; font-size: 13px; background: transparent; text-align: center; font-weight: 500; border-radius: 4px; } [class^="rbgcpInputLabel"] { color: rgb(86, 86, 86); font-size: 11px; text-align: center; font-weight: 700; line-height: 1.2; } [class^="rbgcpInput"]:not([class^="rbgcpInputLabel"]) { color: black; width: 100%; border: 1px solid #bebebe; height: 32px; outline: none; padding: 2px; text-align: center; font-weight: 400; border-radius: 6px; box-sizing: border-box; } [class^="rbgcpHandle"] { width: 18px; border: 2px solid white; height: 18px; z-index: 1000; position: absolute; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); transition: all 10ms linear; border-radius: 50%; box-sizing: border-box; } [class^="rbgcpCanvasWrapper"] { height: 294px; overflow: hidden; border-radius: 6px; } [class^="rbgcpCheckered"] { transform: scaleX(1) scaleY(1) scaleZ(1); background: linear-gradient(45deg, rgba(0, 0, 0, 0.18) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.18) 75%, rgba(0, 0, 0, 0.18) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.18) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.18) 75%, rgba(0, 0, 0, 0.18) 0), white; box-shadow: none; transition: none; text-shadow: none; -o-transition: none; border-radius: 10px; -moz-transition: none; background-clip: border-box, border-box; background-size: 14px 14px, 14px 14px; transform-origin: 0 0 0; -webkit-transform: scaleX(1) scaleY(1) scaleZ(1); background-origin: padding-box, padding-box; background-repeat: repeat, repeat; -webkit-box-shadow: none; -webkit-transition: none; background-position: 0px 0, 7px 7px; -webkit-background-clip: border-box, border-box; -webkit-background-size: 14px 14px, 14px 14px; -webkit-transform-origin: 0 0 0; -webkit-background-origin: padding-box, padding-box; } [class^="rbgcpOpacityOverlay"] { top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; border-radius: 10px; } [class^="rbgcpGradientHandleWrap"] { top: -2px; outline: none; z-index: 10000; position: absolute; } [class^="rbgcpGradientHandle"] { width: 18px; border: 2px solid white; height: 18px; display: flex; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); align-items: center; border-radius: 50%; justify-content: center; box-sizing: border-box; } [class^="rbgcpControlIcon2"] { fill: #323136; }

[class^="rbgcpComparibleLabel"] { color: #323136; }

[hxf31891]

@ibharat I just made some changes to the styling aimed at fixing another bug but I am hopeful that it might resolve your issue as well. When you get a second can you upgrade to v3.0.6 and let me know whether this issue persists or not?

Thanks

[ericnation]

Upgrading to v3.0.6 fixed it for me. Thank you! 🙏