Styling

Media Chrome is written using Web Components. As such, you can do a lot of styling to the component through standard CSS properties, style attributes, and selectors. However, there are enough situations where you might want to style more specific details of some <media-chrome> elements (e.g. the size or color of the drag thumb on the <media-volume-range>) or easily update some styles more globally for <media-chrome> elements (e.g. changing the background color for all the control/display elements). To accomplish this, <media-chrome> relies primarily on CSS Variables to update specific styles for various elements.

An Important Caveat

Our current styling architecture is still quite nascent and is very likely to undergo changes, including quite large ones (all hopefully for the better!). Be sure to keep this in mind when upgrading versions of media-chrome.

Buttons

Elements

<media-captions-button> (docs)
<media-fullscreen-button> (docs)
<media-mute-button> (docs)
<media-pip-button> (docs)
<media-play-button> (docs)
<media-playback-rate-button> (docs) (See notes below *)
<media-seek-backward-button> (docs)
<media-seek-forward-button> (docs)

Name	CSS Property	Default Value	Description	Notes
`--media-control-background`	`background`	`rgba(20,20,30, 0.7)`	background color of the component	Applies to other components as well (See notes below **)
`--media-control-hover-background`	`background`	`rgba(50,50,70, 0.7)`	background color of the button when hovered	Applied by the `:hover` pseudo-class Applies to other components as well (See notes below **)
`--media-control-height`	`height`	`24px`	default height of buttons, ranges and text displays	Applies to other components as well (See notes below **)
`--media-control-padding`	`padding`	`10px`	default padding of buttons, ranges and text displays	Applies to other components as well (See notes below **)
`--media-text-content-height`	`line-height`	`var(--media-control-height, 24px)`	default line-height of buttons and text displays	Applies to other components as well (See notes below **)
`--media-button-icon-width`	`width`	none	default width of button icons	Only applies to `<img>` and `<svg>` tags
`--media-button-icon-height`	`height`	`var(--media-control-height, 24px)`	default height of button icons	Only applies to `<img>` and `<svg>` tags
`--media-icon-color`	`fill`	`#eee`	default fill color of button icons	Only applies to `<img>` and `<svg>` tags
`--media-button-icon-transform`	`transform`	none	apply a transform to button icons	Only applies to `<img>` and `<svg>` tags
`--media-button-icon-transition`	`transform`	none	apply a transition to button icons	Only applies to `<img>` and `<svg>` tags

Ranges

Elements

<media-time-range> (docs)
<media-volume-range> (docs)

Name	CSS Property	Default Value	Description	Notes
`--media-control-background`	`background`	`rgba(20,20,30, 0.7)`	background color of the component	Applies to other components as well (See notes below **)
`--media-control-hover-background`	`background`	`rgba(50,50,70, 0.7)`	background color of the button when hovered	Applied by the `:hover` pseudo-class Applies to other components as well (See notes below **)
`--media-control-height`	`height`	`24px`	default height of buttons, ranges and text displays	Applies to other components as well (See notes below **)
`--media-control-padding`	`padding`	`10px`	default padding of buttons, ranges and text displays	Applies to other components as well (See notes below **)
`--media-range-thumb-height`	`height`	`10px`	height of the underlying slider’s drag thumb	Applied via `::-webkit-slider-thumb` and similar pseudo-element selectors
`--media-range-thumb-width`	`width`	`10px`	width of the underlying slider’s drag thumb	Applied via `::-webkit-slider-thumb` and similar pseudo-element selectors
`--media-range-thumb-border`	`border`	`none`	border of the underlying slider’s drag thumb	Applied via `::-webkit-slider-thumb` and similar pseudo-element selectors
`--media-range-thumb-border-radius`	`border-radius`	`10px`	border radius of the underlying slider’s drag thumb	Applied via `::-webkit-slider-thumb` and similar pseudo-element selectors
`--media-range-thumb-background`	`background`	`#fff`	background color of the underlying slider’s drag thumb	Applied via `::-webkit-slider-thumb` and similar pseudo-element selectors
`--media-range-thumb-box-shadow`	`box-shadow`	`1px 1px 1px transparent`	box shadow of the underlying slider’s drag thumb	Applied via `::-webkit-slider-thumb` and similar pseudo-element selectors
`--media-range-thumb-transition`	`transition`	`none`	apply a transition to the underlying slider’s drag thumb	Applied via `::-webkit-slider-thumb` and similar pseudo-element selectors
`--media-range-thumb-transform`	`transform`	`none`	apply a transform to the underlying slider’s drag thumb	Applied via `::-webkit-slider-thumb` and similar pseudo-element selectors
`--media-range-thumb-opacity`	`opacity`	`1`	opacity of the underlying slider’s drag thumb	Applied via `::-webkit-slider-thumb` and similar pseudo-element selectors
`--media-range-bar-color`.	`<linear-color-stop>`	`#fff`	color of the track’s progressed range	This is a `<linear-color-stop>` part of the `linear-gradient()` CSS function.
`--media-range-track-color`.	`<linear-color-stop>`	`transparent`	color of the track’s negative space	This is a `<linear-color-stop>` part of the `linear-gradient()` CSS function.
`--media-range-track-height`	`height`	`4px`	height of the underlying slider’s track display	Applied via `::-webkit-slider-runnable-track` and similar pseudo-element selectors
`--media-range-track-width`	`width`	`100%`	width of the underlying slider’s track display	Applied via `::-webkit-slider-runnable-track` and similar pseudo-element selectors
`--media-range-track-border`	`border`	`none`	border of the underlying slider’s track display	Applied via `::-webkit-slider-runnable-track` and similar pseudo-element selectors
`--media-range-track-border-radius`	`border-radius`	`0`	border radius of the underlying slider’s track display	Applied via `::-webkit-slider-runnable-track` and similar pseudo-element selectors
`--media-range-track-background`	`background`	`#eee`	background color of the underlying slider’s track display	Applied via `::-webkit-slider-runnable-track` and similar pseudo-element selectors
`--media-range-track-box-shadow`	`box-shadow`	`none`	box shadow of the underlying slider’s track display	Applied via `::-webkit-slider-runnable-track` and similar pseudo-element selectors
`--media-range-track-transition`	`transition`	`none`	apply a transition to the underlying slider’s track display	Applied via `::-webkit-slider-runnable-track` and similar pseudo-element selectors
`--media-range-track-translate-x`	`translate`	`0`	apply a translation to the underlying slider’s track display	Applied via `::-webkit-slider-runnable-track` and similar pseudo-element selectors
`--media-range-track-translate-y`	`translate`	`0`	apply a translation to the underlying slider’s track display	Applied via `::-webkit-slider-runnable-track` and similar pseudo-element selectors

<media-time-range> (docs)

Name	CSS Property	Default Value	Description	Notes
`--media-time-buffered-color`	`<linear-color-stop>`	`#777`	background color of the buffered range	This is a `<linear-color-stop>` part of the `linear-gradient()` CSS function.
`--media-preview-thumbnail-border`	`border`	`2px solid #fff`	border of the thumbnail preview
`--media-preview-thumbnail-border-radius`	`border-radius`	`2px`	border radius of the thumbnail preview
`--media-preview-thumbnail-min-width`	`width`	`120px`	minimum thumbnail preview width	The maximum CSS properties have priority over the minimum. Only `px` values are supported.
`--media-preview-thumbnail-max-width`	`width`	`200px`	maximum thumbnail preview width	The maximum CSS properties have priority over the minimum. Only `px` values are supported.
`--media-preview-thumbnail-min-height`	`height`	`80px`	minimum thumbnail preview height	The maximum CSS properties have priority over the minimum. Only `px` values are supported.
`--media-preview-thumbnail-max-height`	`height`	`160px`	maximum thumbnail preview height	The maximum CSS properties have priority over the minimum. Only `px` values are supported.

Text Displays

Elements

<media-time-display> (docs)

Name	CSS Property	Default Value	Description	Notes
`--media-control-background`	`background`	`rgba(20,20,30, 0.7)`	background color of the component	Applies to other components as well (See notes below **)
`--media-control-height`	`height`	`24px`	default height of buttons, ranges and text displays	Applies to other components as well (See notes below **)
`--media-control-padding`	`padding`	`10px`	default padding of buttons, ranges and text displays	Applies to other components as well (See notes below **)
`--media-text-content-height`	`height`	`var(--media-control-height, 24px)`	height of the underlying text container for text-based elements	Also applies to `<media-captions-button>` (See §Buttons)

Indicators

Elements

<media-loading-indicator> (docs)

Name	CSS Property	Default Value	Description	Notes
`--media-loading-icon-width`	`width`	`100px`	width of the loading icon
`--media-loading-icon-height`	`height`	`auto`	height of the loading icon
`--media-icon-color`	`fill`	`#fff`	color of the loading icon	Only applies to `<img>` and `<svg>`

Notes

* Unlike most Media Chrome buttons, the <media-playback-rate-button> button displays text (and not an icon/svg), so many button styles don’t apply to it and some text display styles do apply to it (unlike most buttons).

** A few CSS Variables are more “global” in their application, so make sure you define and scope them via selectors appropriately.

Images

Elements

<media-poster-image> (docs)

Name	CSS Property	Default Value	Description
`--media-object-fit`	`object-fit`	`contain`	how the content of the image should be resized to fit the custom element
`--media-object-position`	`object-position`	`center`	specifies the alignment of the image within the custom element’s box
`--media-background-size`	`background-size`	`contain`	how the content of the background placeholder image should be resized to fit the custom element
`--media-background-position`	`background-position`	`center`	specifies the alignment of the background placeholder image within the custom element’s box