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?
