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
Section titled 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
Section titled Ranges| 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 |
none |
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 |
none |
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 |
none |
display of range hover zone. |
--media-time-range-hover-height |
max(calc(100% + 5px), 20px) |
height of range hover zone. |
--media-volume-range-display |
inline-block |
display property of range. |
Displays
Section titled 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
Section titled 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
Section titled Othersmedia-control-bar (docs)
Section titled 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)
Section titled 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
Section titled 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)
Section titled 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)
Section titled 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. |