Styling CSS for closed captions

I am trying to style our closed captions for our player. I have fingured on most of the settings I want. But I am coming to a point where I cannot make the CSS changes without making “!important” statements in our CSS to keep the changes. We have found that there is an element being loaded in the webkit css after the layer we are changing. In this single element resets everything I am going with a “all : unset”

Is there a way that I can overwrite this “all : unset” or permenetly turn off this feature and not have to use the “!important” statement in my CSS changes?

hi @scallaway

Apologies for the late reply.
As you mentioned, there is a “all:unset” defined at our subtitle overlay styling: bitmovin-player-ui/src/scss/skin-modern/components/_subtitleoverlay.scss at 913f7ab3580c33391992c5275f54f8f7cdae8d50 · bitmovin/bitmovin-player-ui · GitHub

The overriding, as you do might require a more specific selector or as you stated an !important declaration.
Our Bitmovin UI is an open source code however, available here: GitHub - bitmovin/bitmovin-player-ui: The Bitmovin Adaptive Streaming Player UI
potentially you could also take control of the UI source code for your implementation and modify our default styling.

In case you haven’t checked our CSS class reference this is the link to it: Player UI CSS Class Reference.

Also, what type of close captions are you trying to style? are they CEA608/708 captions? VTT subtitles or other format?

This is also important as our UI manage the rendering and styling of these subtitles differently depending on the type. CEA608/708 captions generally include their own styling definition, so our UI will render them accordingly.

I hope this answer is helpful for you and did not come too late, feel free to let us know any help needed.