Widget - CSS properties ignored

[s_lefebvre]

Hi,

I have a problem with my CSS on a custom widget.

When I write this CSS code to my widget :

.desaturate {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.desaturate:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

.panel-app:hover {
  -webkit-filter: brightness(97%);
  filter: brightness(97%);
}

The page is loaded with only this CSS : 

<style type="text/css" id="v296d731bdb2453c03ca3f9c41d961988-s" widget="U Store - Applications">
.v296d731bdb2453c03ca3f9c41d961988 .panel-app:hover {
	-webkit-filter: brightness(97%);
}</style>

At start, I think CSS property "filter" was ignored but it doesn't work with "-webkit-filter: grayscale...".

Where is the script to ignore these properties ? And why these properties are ignored ?

Thx

[Upender Kumar]

Hi,

Try using:

.desaturate {

-webkit-filter: grayscale(100%) !important;

filter: grayscale(100%) !important; }

.desaturate:hover {

-webkit-filter: grayscale(0%) !important; filter: grayscale(0%) !important; }

.panel-app:hover {

-webkit-filter: brightness(97%) !important; filter: brightness(97%) !important; }

[s_lefebvre]

Thanks for your answer but it doesn't work, that why I think there is an ignore script for some CSS properties.

[Upender Kumar]

Hi,

Try to add below code in at top of HTML Template:

<style>
.desaturate {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

.desaturate:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}

.panel-app:hover {
-webkit-filter: brightness(97%);
filter: brightness(97%);
}
</style>

Thanks

[s_lefebvre]

Yes, I know that works onto HTML Template but CSS style doesn't prefix with id.

It's possible that interfere with other widgets and make bugs on production.

I need an answer to my questions : 

Where is the script to ignore these properties ?

Why these properties are ignored ?