[CLOSED] Set Popup Opacity Default

Hello,

I wanted to ask you if there is a possibility to change the default opacity of the popup background? I found this old thread:
https://forums.ext.net/showthread.ph...adMask-Opacity

but as the "x-mask" is used on other elements (disabled ones) that doesn't work anymore...

best regards,

tMp

Hello @tMp!

I don't think the "x-mask" is used on all components when they are disabled, can you be more specific? The example in the forum thread you pointed still works for me.

Hello Fabricio,

Yes you are right. Everything seems to work except a disable panel. I will try to look for a workaround. Strange that a disabled panel and the background share common main CSS class which makes them depending on each other. Or is there a simple way to entangle them?

Thank you,

tMp

A panel? Let me check that. I honestly didn't notice this with the test case in the thread you pointed... Will post a follow-up in a moment.

You can use the maskOnDisable setting to disable masking completely when it is disabled. Then you can apply your own styling to the panel.

-or-

Go further CSS and revert the opacity behavior for disabled items (notice this may bring undesired behavior if a mask is applied to a disabled item):

Code:

---

.x-item-disabled .x-mask {
    opacity: 0.4;
}

---

-or, again-

If you don't mind legacy browser support on your application, you can then not fiddle with whatever the mask is for the theme if where it is applied is a disabled item:

Code:

---

.x-masked:not(.x-item-disabled) .x-mask {
    opacity: 0.9;
    background: none repeat scroll 0 0 #000 !important;
}

---

Then from that point, you should keep an eye open for masks not getting "black". This last option may make masks look unchanged for instance, if they are then applied by disabled items (or items within a disabled container, for instance).

All on all, that's just CSS work, to make the mask custom as-needed.

Hope this helps!

Hello Fabricio,

Thanks for your ideas. The solution is so easy, that I am really sorry to have bothered you at all. Your CSS tips brought me to have a look at the disable background. If I select now

Code:

---

body > div.x-mask {}

---

everything works fine!

thanks a lot.

best regards,

tMp

Glad it helped, @tMp! Thanks for the feedback!