Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Override a user agent stylesheet for "ride" theme

Override a user agent stylesheet for "ride" theme

waterjacket
Tourist
12 1 3

I am trying to override a user agent stylesheet on this page: https://mesaskatesupply.com/products/umaverse-glitch-8-25-14-wb.      

 

I would like to remove the gradient from black to transparent and instead make all black and then put a filter to invert the whole div so it looks like a white bar with black controls.

 

I can change the css in the browser but it will not take when adding to various theme css assets.  I am trying to place in

div.sizing-small.phase-ready.state-stopped {--gradient-steps: hsl(0deg 0% 0% / 0%) 0%, hsl(0deg 0% 0% / 0%) 8.1%, hsl(0deg 0% 0% / 0%) 15.5%, hsl(0deg 0% 0% / 0%) 22.5%, hsl(0deg 0% 0% / 0%) 34%, hsl(0deg 0% 0% / 0%) 35.3%, hsl(0deg 0% 0% / 0%) 41.2%, hsl(0deg 0% 0% / 0%) 47.1%, hsl(0deg 0% 0% / 0%) 52.9%, hsl(0deg 0% 0% / 0%) 58.8%, hsl(0deg 0% 0% / 0%) 50%, hsl(0deg 0% 0%) 50%, hsl(0deg 0% 0% / 0%) 50%, hsl(0deg 0% 0%) 50%, hsl(0deg 0% 0%) 50%, hsl(0deg 0% 0%) 50% !important;
}

div.sizing-small.phase-ready.state-stopped {filter: invert(1) !important;}

Does anyone know how to override these styles or where to put the css?

Replies 0 (0)