Styling Reference

This page shows a list of all the available CSS variables grouped by the main UI element types and an "other" section that includes the CSS vars of the remaining elements.

Buttons

media-airplay-button(docs)
media-captions-button(docs)
media-cast-button(docs)
media-fullscreen-button(docs)
media-live-button(docs)
media-mute-button(docs)
media-pip-button(docs)
media-play-button(docs)
media-playback-rate-button(docs)
media-seek-backward-button(docs)
media-seek-forward-button(docs)
media-chrome-button

Name	Default	Description
`--media-airplay-button-display`	`inline-flex`	`display` property of button.
`--media-button-icon-height`	`var(--media-control-height, 24px)`	`height` of button icon.
`--media-button-icon-transform`		`transform` of button icon.
`--media-button-icon-transition`		`transition` of button icon.
`--media-button-icon-width`		`width` of button icon.
`--media-captions-button-display`	`inline-flex`	`display` property of button.
`--media-cast-button-display`	`inline-flex`	`display` property of button.
`--media-control-background`	`var(--media-secondary-color, rgb(20 20 30 / .7))`	`background` of control.
`--media-control-display`		`display` property of control.
`--media-control-height`	`24px`	`line-height` of control.
`--media-control-hover-background`	`rgba(50 50 70 / .7)`	`background` of control hover state.
`--media-control-padding`	`10px`	`padding` of control.
`--media-font`	`var(--media-font-weight, bold) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif)`	`font` shorthand property.
`--media-font-family`	`helvetica neue, segoe ui, roboto, arial, sans-serif`	`font-family` property.
`--media-font-size`	`14px`	`font-size` property.
`--media-font-weight`	`bold`	`font-weight` property.
`--media-fullscreen-button-display`	`inline-flex`	`display` property of button.
`--media-icon-color`	`var(--media-primary-color, rgb(238 238 238))`	`fill` color of button icon.
`--media-live-button-display`	`inline-flex`	`display` property of button.
`--media-live-button-icon-color`	`rgb(140, 140, 140)`	`fill` and `color` of not live button icon.
`--media-live-button-indicator-color`	`rgb(255, 0, 0)`	`fill` and `color` of live button icon.
`--media-mute-button-display`	`inline-flex`	`display` property of button.
`--media-pip-button-display`	`inline-flex`	`display` property of button.
`--media-play-button-display`	`inline-flex`	`display` property of button.
`--media-playback-rate-button-display`	`inline-flex`	`display` property of button.
`--media-primary-color`	`rgb(238 238 238)`	Default color of text and icon.
`--media-secondary-color`	`rgb(20 20 30 / .7)`	Default color of button background.
`--media-seek-backward-button-display`	`inline-flex`	`display` property of button.
`--media-seek-forward-button-display`	`inline-flex`	`display` property of button.
`--media-text-color`	`var(--media-primary-color, rgb(238 238 238))`	`color` of button text.
`--media-text-content-height`	`var(--media-control-height, 24px)`	`line-height` of button text.

Ranges

media-time-range(docs)
media-volume-range(docs)
media-chrome-range

Name	Default	Description
`--media-control-background`	`var(--media-secondary-color, rgb(20 20 30 / .7))`	`background` of control.
`--media-control-display`		`display` property of control.
`--media-control-height`	`24px`	`line-height` of control.
`--media-control-hover-background`	`rgba(50 50 70 / .7)`	`background` of control hover state.
`--media-control-padding`	`10px`	`padding` of control.
`--media-preview-thumbnail-background`	`var(--media-preview-background, var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .7))))`	`background` of range preview thumbnail.
`--media-preview-thumbnail-border`		`border` of range preview thumbnail.
`--media-preview-thumbnail-border-radius`	`var(--media-preview-border-radius) var(--media-preview-border-radius) 0 0`	`border-radius` of range preview thumbnail.
`--media-preview-thumbnail-box-shadow`	`0 0 4px rgb(0 0 0 / .2)`	`box-shadow` of range preview thumbnail.
`--media-preview-thumbnail-max-height`	`160px`	`max-height` of range preview thumbnail.
`--media-preview-thumbnail-max-width`	`180px`	`max-width` of range preview thumbnail.
`--media-preview-thumbnail-min-height`	`80px`	`min-height` of range preview thumbnail.
`--media-preview-thumbnail-min-width`	`120px`	`min-width` of range preview thumbnail.
`--media-preview-time-background`	`var(--media-preview-background, var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .7))))`	`background` of range preview time display.
`--media-preview-time-border-radius`	`0 0 var(--media-preview-border-radius) var(--media-preview-border-radius)`	`border-radius` of range preview time display.
`--media-preview-time-margin`	`0 0 10px`	`margin` of range preview time display.
`--media-preview-time-padding`	`1px 10px 0`	`padding` of range preview time display.
`--media-preview-time-text-shadow`	`0 0 4px rgb(0 0 0 / .75)`	`text-shadow` of range preview time display.
`--media-preview-transition-delay-in`	`.25s`	`transition-delay` in of range hover preview.
`--media-preview-transition-delay-out`	`0s`	`transition-delay` out of range hover preview.
`--media-preview-transition-duration-in`	`.5s`	`transition-duration` in of range hover preview.
`--media-preview-transition-duration-out`	`.25s`	`transition-duration` out of range hover preview.
`--media-preview-transition-property`	`visibility, opacity`	`transition-property` of range hover preview.
`--media-primary-color`	`rgb(238 238 238)`	Default color of text and icon.
`--media-range-bar-color`	`var(--media-primary-color, rgb(238 238 238))`	`color_value` of range bar (elapsed progress).
`--media-range-padding`	`var(--media-control-padding, 10px)`	`padding` of range.
`--media-range-padding-left`	`var(--_media-range-padding)`	`padding-left` of range.
`--media-range-padding-right`	`var(--_media-range-padding)`	`padding-right` of range.
`--media-range-thumb-background`	`var(--media-primary-color, rgb(238 238 238))`	`background` of range thumb.
`--media-range-thumb-border`	`none`	`border` of range thumb.
`--media-range-thumb-border-radius`	`10px`	`border-radius` of range thumb.
`--media-range-thumb-box-shadow`	`1px 1px 1px transparent`	`box-shadow` of range thumb.
`--media-range-thumb-height`	`10px`	`height` of range thumb.
`--media-range-thumb-opacity`	`1`	`opacity` of range thumb.
`--media-range-thumb-transform`	`none`	`transform` of range thumb.
`--media-range-thumb-transition`		`transition` of range thumb.
`--media-range-thumb-width`	`10px`	`width` of range thumb.
`--media-range-track-backdrop-filter`		`backdrop-filter` of range track.
`--media-range-track-background`	`rgb(255 255 255 / .2)`	`background` of range track background.
`--media-range-track-background-backdrop-filter`		`backdrop-filter` of range track background.
`--media-range-track-border`	`none`	`border` of range track.
`--media-range-track-border-radius`	`1px`	`border-radius` of range track.
`--media-range-track-box-shadow`	`none`	`box-shadow` of range track.
`--media-range-track-color`	`transparent`	`color_value` of range track (remaining progress).
`--media-range-track-height`	`4px`	`height` of range track.
`--media-range-track-outline`		`outline` of range track.
`--media-range-track-outline-offset`		`outline-offset` of range track.
`--media-range-track-pointer-background`		`background` of range track pointer.
`--media-range-track-pointer-border-right`		`border-right` of range track pointer.
`--media-range-track-transition`		`transition` of range track.
`--media-range-track-translate-x`	`0px`	`translate` x-coordinate of range track.
`--media-range-track-translate-y`	`0px`	`translate` y-coordinate of range track.
`--media-range-track-width`	`100%`	`width` of range track.
`--media-secondary-color`	`rgb(20 20 30 / .7)`	Default color of button background.
`--media-time-range-display`	`inline-block`	`display` property of range.
`--media-time-range-hover-bottom`	`-5px`	`bottom` of range hover zone.
`--media-time-range-hover-display`	`block`	`display` of range hover zone.
`--media-time-range-hover-height`	`max(100% + 5px, 20px)`	`height` of range hover zone.
`--media-volume-range-display`	`inline-block`	`display` property of range.

Displays

media-duration-display(docs)
media-preview-time-display
media-text-display
media-time-display(docs)

Name	Default	Description
`--media-control-background`	`var(--media-secondary-color, rgb(20 20 30 / .7))`	`background` of control.
`--media-control-display`		`display` property of control.
`--media-control-height`	`24px`	`line-height` of control.
`--media-control-hover-background`	`rgba(50 50 70 / .7)`	`background` of control hover state.
`--media-control-padding`	`10px`	`padding` of control.
`--media-duration-display-display`	`inline-flex`	`display` property of display.
`--media-font`	`var(--media-font-weight, bold) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif)`	`font` shorthand property.
`--media-font-family`	`helvetica neue, segoe ui, roboto, arial, sans-serif`	`font-family` property.
`--media-font-size`	`14px`	`font-size` property.
`--media-font-weight`	`bold`	`font-weight` property.
`--media-preview-time-display-display`	`inline-flex`	`display` property of display.
`--media-primary-color`	`rgb(238 238 238)`	Default color of text and icon.
`--media-secondary-color`	`rgb(20 20 30 / .7)`	Default color of button background.
`--media-text-color`	`var(--media-primary-color, rgb(238 238 238))`	`color` of button text.
`--media-text-content-height`	`var(--media-control-height, 24px)`	`line-height` of button text.
`--media-time-display-display`	`inline-flex`	`display` property of display.

Indicators

media-loading-indicator(docs)

Name	Default	Description
`--media-control-display`		`display` property of control.
`--media-icon-color`	`var(--media-primary-color, rgb(238 238 238))`	`fill` color of button icon.
`--media-loading-indicator-display`	`inline-block`	`display` property of loading indicator.
`--media-loading-indicator-icon-height`	`100px`	`height` of loading icon.
`--media-loading-indicator-icon-width`		`width` of loading icon.
`--media-loading-indicator-opacity`	`0`	`opacity` property of loading indicator. Set to 1 to force it to be visible.
`--media-loading-indicator-transition-delay`	`500ms`	`transition-delay` property of loading indicator. Make sure to include units.
`--media-primary-color`	`rgb(238 238 238)`	Default color of text and icon.

Others

`media-control-bar` (docs)

Name	Default	Description
`--media-primary-color`	`rgb(238 238 238)`	Default color of text and icon.
`--media-secondary-color`		Default color of button background.
`--media-text-color`	`var(--media-primary-color, rgb(238 238 238))`	`color` of button text.
`--media-control-bar-display`	`inline-flex`	`display` property of control bar.
`--media-control-display`	`var(--media-control-bar-display, inline-flex)`	`display` property of control.

`media-controller` (docs)

Name	Default	Description
`--media-background-color`	`#000`	`background-color` of container.
`--media-slot-display`	`none`	`display` of the media slot (default none for [audio] usage).

`media-gesture-receiver`

Name	Default	Description
`--media-gesture-receiver-display`	`inline-block`	`display` property of gesture receiver.
`--media-control-display`	`var(--media-gesture-receiver-display, inline-block)`	`display` property of control.

`media-poster-image` (docs)

Name	Default	Description
`--media-poster-image-display`	`inline-block`	`display` property of poster image.
`--media-poster-image-background-position`	`var(--media-object-position, center)`	`background-position` of poster image.
`--media-poster-image-background-size`	`var(--media-object-fit, contain)`	`background-size` of poster image.
`--media-object-fit`	`contain`	`object-fit` of poster image.
`--media-object-position`	`center`	`object-position` of poster image.

`media-preview-thumbnail` (docs)

Name	Default	Description
`--media-preview-thumbnail-display`	`inline-block`	`display` property of display.
`--media-control-display`	`inline-block`	`display` property of control.

Styling Reference

Buttons

Ranges

Displays

Indicators

Others

media-control-bar (docs)

media-controller (docs)

media-gesture-receiver

media-poster-image (docs)

media-preview-thumbnail (docs)

`media-control-bar` (docs)

`media-controller` (docs)

`media-gesture-receiver`

`media-poster-image` (docs)

`media-preview-thumbnail` (docs)