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-audio-track-menu-button -
media-captions-menu-button -
media-playback-rate-menu-button -
media-rendition-menu-button -
media-settings-menu-button -
media-chrome-menu-button -
media-chrome-button
| Name | Default | Description |
|---|---|---|
--media-airplay-button-display | inline-flex | display property of button. |
--media-audio-track-menu-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-captions-menu-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-playback-rate-menu-button-display | inline-flex | display property of button. |
--media-primary-color | rgb(238 238 238) | Default color of text and icon. |
--media-rendition-menu-button-display | inline-flex | display property of button. |
--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-box-arrow-background | var(--_control-background) | border-top-color of range box arrow. |
--media-box-arrow-border-width | var(--media-box-arrow-height, 5px) var(--media-box-arrow-width, 6px) 0 | border-width of range box arrow. |
--media-box-arrow-display | inline-block | display of range box arrow. |
--media-box-arrow-height | 5px | height of range box arrow. |
--media-box-arrow-offset | translateX offset of range box arrow. | |
--media-box-arrow-width | 6px | width of range box arrow. |
--media-box-border-radius | border-radius of range box. | |
--media-box-display | flex | display of range box. |
--media-box-margin | 0 0 5px | margin of range box. |
--media-box-padding-left | padding-left of range box. | |
--media-box-padding-right | padding-right of range box. | |
--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-current-box-display | var(--media-box-display, flex) | display of range current box. |
--media-current-box-margin | var(--media-box-margin, 0 0 5px) | margin of range current box. |
--media-preview-box-display | var(--media-box-display, flex) | display of range preview box. |
--media-preview-box-margin | var(--media-box-margin, 0 0 5px) | margin of range preview box. |
--media-preview-chapter-background | var(--_preview-background) | background of range preview chapter display. |
--media-preview-chapter-border-radius | 0 | border-radius of range preview chapter display. |
--media-preview-chapter-margin | 0 | margin of range preview chapter display. |
--media-preview-chapter-padding | 3.5px 9px 0 | padding of range preview chapter display. |
--media-preview-chapter-text-shadow | 0 0 4px rgb(0 0 0 / .75) | text-shadow of range preview chapter display. |
--media-preview-thumbnail-background | var(--_preview-background) | 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(--_preview-background) | 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 | margin of range preview time display. |
--media-preview-time-padding | 3.5px 9px | 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
Section titled Displays-
media-duration-display(docs) -
media-preview-chapter-display -
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-chapter-display-display | inline-flex | display property of display. |
--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-chrome-dialog
Section titled media-chrome-dialog| Name | Default | Description |
|---|---|---|
--media-primary-color | rgb(238 238 238) | Default color of text / icon. |
--media-secondary-color | rgb(20 20 30 / .8) | Default color of background. |
--media-text-color | var(--media-primary-color, rgb(238 238 238)) | color of text. |
--media-control-background | var(--media-secondary-color, rgb(20 20 30 / .8)) | background of control. |
--media-dialog-display | inline-flex | display of dialog. |
--media-dialog-background | var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .8))) | background of dialog. |
--media-dialog-border-radius | border-radius of dialog. | |
--media-dialog-border | none | border of dialog. |
--media-dialog-transition-in | visibility 0s, opacity .2s ease-out, transform .15s ease-out | transition of dialog when showing. |
--media-dialog-transition-out | visibility .15s ease-in, opacity .15s ease-in, transform .15s ease-in | transition of dialog when hiding. |
--media-dialog-visibility | visible | visibility of dialog when showing. |
--media-dialog-hidden-visibility | hidden | visibility of dialog when hiding. |
--media-dialog-opacity | 1 | opacity of dialog when showing. |
--media-dialog-hidden-opacity | 0 | opacity of dialog when hiding. |
--media-dialog-transform-in | translateY(0) scale(1) | transform of dialog when showing. |
--media-dialog-transform-out | translateY(2px) scale(.99) | transform of dialog when hiding. |
--media-font | var(--media-font-weight, normal) 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-weight | normal | font-weight property. |
--media-font-family | helvetica neue, segoe ui, roboto, arial, sans-serif | font-family property. |
--media-font-size | 14px | font-size property. |
--media-text-content-height | var(--media-control-height, 24px) | line-height of text. |
media-container
Section titled media-container| 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-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. |
media-tooltip
Section titled media-tooltip| Name | Default | Description |
|---|---|---|
--media-primary-color | rgb(238 238 238) | Default color of text. |
--media-secondary-color | rgba(20, 20, 30, .7) | Default color of tooltip background. |
--media-text-color | var(--media-primary-color, rgb(238 238 238)) | color of tooltip text. |
--media-font | var(--media-font-weight, 400) var(--media-font-size, 13px) / var(--media-text-content-height, var(--media-control-height, 18px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif) | font shorthand property. |
--media-font-weight | 400 | font-weight property. |
--media-font-family | helvetica neue, segoe ui, roboto, arial, sans-serif | font-family property. |
--media-font-size | 13px | font-size property. |
--media-text-content-height | var(--media-control-height, 18px) | line-height of button text. |
--media-tooltip-border | none | 'border' of tooltip |
--media-tooltip-background-color | var(--media-secondary-color, rgba(20, 20, 30, .7)) | Background color of tooltip and arrow, unless individually overidden |
--media-tooltip-background | var(--_tooltip-background-color) | background of tooltip, ignoring the arrow |
--media-tooltip-display | inline-flex | display of tooltip |
--media-tooltip-z-index | 1 | z-index of tooltip |
--media-tooltip-padding | .35em .7em | padding of tooltip |
--media-tooltip-border-radius | 5px | border-radius of tooltip |
--media-tooltip-filter | drop-shadow(0 0 4px rgba(0, 0, 0, .2)) | filter property of tooltip, for drop-shadow |
--media-tooltip-white-space | nowrap | white-space property of tooltip |
--media-tooltip-arrow-display | block | display property of tooltip arrow |
--media-tooltip-arrow-width | 12px | Arrow width |
--media-tooltip-arrow-height | 5px | Arrow height |
--media-tooltip-arrow-color | var(--_tooltip-background-color) | Arrow color |
media-audio-track-menu (docs)
Section titled media-audio-track-menu (docs)| Name | Default | Description |
|---|---|---|
--media-primary-color | rgb(238 238 238) | Default color of text / icon. |
--media-secondary-color | rgb(20 20 30 / .8) | Default color of background. |
--media-text-color | var(--media-primary-color, rgb(238 238 238)) | color of text. |
--media-control-background | var(--media-secondary-color, rgb(20 20 30 / .8)) | background of control. |
--media-menu-display | inline-flex | display of menu. |
--media-menu-layout | Set to row for a horizontal menu design. | |
--media-menu-flex-direction | row | flex-direction of menu. |
--media-menu-gap | .25em | gap between menu items. |
--media-menu-background | var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .8))) | background of menu. |
--media-menu-border-radius | border-radius of menu. | |
--media-menu-border | none | border of menu. |
--media-menu-transition-in | visibility 0s, opacity .2s ease-out, transform .15s ease-out, left .2s ease-in-out, min-width .2s ease-in-out, min-height .2s ease-in-out | transition of menu when showing. |
--media-menu-transition-out | visibility .15s ease-in, opacity .15s ease-in, transform .15s ease-in | transition of menu when hiding. |
--media-menu-visibility | visible | visibility of menu when showing. |
--media-menu-hidden-visibility | hidden | visibility of menu when hiding. |
--media-menu-max-height | var(--_menu-max-height, 300px) | max-height of menu. |
--media-menu-hidden-max-height | var(--media-menu-max-height, var(--_menu-max-height, 300px)) | max-height of menu when hiding. |
--media-menu-opacity | 1 | opacity of menu when showing. |
--media-menu-hidden-opacity | 0 | opacity of menu when hiding. |
--media-menu-transform-in | translateY(0) scale(1) | transform of menu when showing. |
--media-menu-transform-out | translateY(2px) scale(.99) | transform of menu when hiding. |
--media-font | var(--media-font-weight, normal) 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-weight | normal | font-weight property. |
--media-font-family | helvetica neue, segoe ui, roboto, arial, sans-serif | font-family property. |
--media-font-size | 14px | font-size property. |
--media-text-content-height | var(--media-control-height, 24px) | line-height of text. |
--media-icon-color | var(--media-primary-color, rgb(238 238 238)) | fill color of icon. |
--media-menu-icon-height | var(--media-control-height, 24px) | height of icon. |
--media-menu-item-checked-indicator-display | none | display of check indicator. |
--media-menu-item-checked-background | rgb(255 255 255 / .2) | background of checked menu item. |
--media-menu-item-max-width | max-width of menu item text. |
media-captions-menu (docs)
Section titled media-captions-menu (docs)| Name | Default | Description |
|---|---|---|
--media-primary-color | rgb(238 238 238) | Default color of text / icon. |
--media-secondary-color | rgb(20 20 30 / .8) | Default color of background. |
--media-text-color | var(--media-primary-color, rgb(238 238 238)) | color of text. |
--media-control-background | var(--media-secondary-color, rgb(20 20 30 / .8)) | background of control. |
--media-menu-display | inline-flex | display of menu. |
--media-menu-layout | Set to row for a horizontal menu design. | |
--media-menu-flex-direction | row | flex-direction of menu. |
--media-menu-gap | .25em | gap between menu items. |
--media-menu-background | var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .8))) | background of menu. |
--media-menu-border-radius | border-radius of menu. | |
--media-menu-border | none | border of menu. |
--media-menu-transition-in | visibility 0s, opacity .2s ease-out, transform .15s ease-out, left .2s ease-in-out, min-width .2s ease-in-out, min-height .2s ease-in-out | transition of menu when showing. |
--media-menu-transition-out | visibility .15s ease-in, opacity .15s ease-in, transform .15s ease-in | transition of menu when hiding. |
--media-menu-visibility | visible | visibility of menu when showing. |
--media-menu-hidden-visibility | hidden | visibility of menu when hiding. |
--media-menu-max-height | var(--_menu-max-height, 300px) | max-height of menu. |
--media-menu-hidden-max-height | var(--media-menu-max-height, var(--_menu-max-height, 300px)) | max-height of menu when hiding. |
--media-menu-opacity | 1 | opacity of menu when showing. |
--media-menu-hidden-opacity | 0 | opacity of menu when hiding. |
--media-menu-transform-in | translateY(0) scale(1) | transform of menu when showing. |
--media-menu-transform-out | translateY(2px) scale(.99) | transform of menu when hiding. |
--media-font | var(--media-font-weight, normal) 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-weight | normal | font-weight property. |
--media-font-family | helvetica neue, segoe ui, roboto, arial, sans-serif | font-family property. |
--media-font-size | 14px | font-size property. |
--media-text-content-height | var(--media-control-height, 24px) | line-height of text. |
--media-icon-color | var(--media-primary-color, rgb(238 238 238)) | fill color of icon. |
--media-menu-icon-height | var(--media-control-height, 24px) | height of icon. |
--media-menu-item-checked-indicator-display | none | display of check indicator. |
--media-menu-item-checked-background | rgb(255 255 255 / .2) | background of checked menu item. |
--media-menu-item-max-width | max-width of menu item text. |
media-chrome-menu-item
Section titled media-chrome-menu-item| Name | Default | Description |
|---|---|---|
--media-menu-item-opacity | 1 | opacity of menu-item content. |
--media-menu-item-transition | background .15s linear, opacity .2s ease-in-out | transition of menu-item. |
--media-menu-item-checked-background | background of checked menu-item. | |
--media-menu-item-outline | 0 | outline menu-item. |
--media-menu-item-outline-offset | -1px | outline-offset of menu-item. |
--media-menu-item-hover-background | rgb(92 92 102 / .5) | background of hovered menu-item. |
--media-menu-item-hover-outline | outline of hovered menu-item. | |
--media-menu-item-hover-outline-offset | var(--media-menu-item-outline-offset, -1px) | outline-offset of hovered menu-item. |
--media-menu-item-focus-shadow | inset 0 0 0 2px rgb(27 127 204 / .9) | box-shadow of the :focus-visible state. |
--media-menu-item-icon-height | var(--media-control-height, 24px) | height of icon. |
--media-menu-item-description-max-width | 100px | max-width of description. |
--media-menu-item-checked-indicator-display | inline-block | display of checked indicator. |
--media-icon-color | var(--media-primary-color, rgb(238 238 238)) | fill color of icon. |
--media-menu-icon-height | height of icon. | |
--media-menu-item-indicator-fill | var(--media-icon-color, var(--media-primary-color, rgb(238 238 238))) | fill color of indicator icon. |
--media-menu-item-indicator-height | 1.25em | height of menu-item indicator. |
media-chrome-menu
Section titled media-chrome-menu| Name | Default | Description |
|---|---|---|
--media-primary-color | rgb(238 238 238) | Default color of text / icon. |
--media-secondary-color | rgb(20 20 30 / .8) | Default color of background. |
--media-text-color | var(--media-primary-color, rgb(238 238 238)) | color of text. |
--media-control-background | var(--media-secondary-color, rgb(20 20 30 / .8)) | background of control. |
--media-menu-display | inline-flex | display of menu. |
--media-menu-layout | Set to row for a horizontal menu design. | |
--media-menu-flex-direction | row | flex-direction of menu. |
--media-menu-gap | .25em | gap between menu items. |
--media-menu-background | var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .8))) | background of menu. |
--media-menu-border-radius | border-radius of menu. | |
--media-menu-border | none | border of menu. |
--media-menu-transition-in | visibility 0s, opacity .2s ease-out, transform .15s ease-out, left .2s ease-in-out, min-width .2s ease-in-out, min-height .2s ease-in-out | transition of menu when showing. |
--media-menu-transition-out | visibility .15s ease-in, opacity .15s ease-in, transform .15s ease-in | transition of menu when hiding. |
--media-menu-visibility | visible | visibility of menu when showing. |
--media-menu-hidden-visibility | hidden | visibility of menu when hiding. |
--media-menu-max-height | var(--_menu-max-height, 300px) | max-height of menu. |
--media-menu-hidden-max-height | var(--media-menu-max-height, var(--_menu-max-height, 300px)) | max-height of menu when hiding. |
--media-menu-opacity | 1 | opacity of menu when showing. |
--media-menu-hidden-opacity | 0 | opacity of menu when hiding. |
--media-menu-transform-in | translateY(0) scale(1) | transform of menu when showing. |
--media-menu-transform-out | translateY(2px) scale(.99) | transform of menu when hiding. |
--media-font | var(--media-font-weight, normal) 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-weight | normal | font-weight property. |
--media-font-family | helvetica neue, segoe ui, roboto, arial, sans-serif | font-family property. |
--media-font-size | 14px | font-size property. |
--media-text-content-height | var(--media-control-height, 24px) | line-height of text. |
--media-icon-color | var(--media-primary-color, rgb(238 238 238)) | fill color of icon. |
--media-menu-icon-height | var(--media-control-height, 24px) | height of icon. |
--media-menu-item-checked-indicator-display | none | display of check indicator. |
--media-menu-item-checked-background | rgb(255 255 255 / .2) | background of checked menu item. |
--media-menu-item-max-width | max-width of menu item text. |
media-playback-rate-menu (docs)
Section titled media-playback-rate-menu (docs)| Name | Default | Description |
|---|---|---|
--media-primary-color | rgb(238 238 238) | Default color of text / icon. |
--media-secondary-color | rgb(20 20 30 / .8) | Default color of background. |
--media-text-color | var(--media-primary-color, rgb(238 238 238)) | color of text. |
--media-control-background | var(--media-secondary-color, rgb(20 20 30 / .8)) | background of control. |
--media-menu-display | inline-flex | display of menu. |
--media-menu-layout | Set to row for a horizontal menu design. | |
--media-menu-flex-direction | row | flex-direction of menu. |
--media-menu-gap | .25em | gap between menu items. |
--media-menu-background | var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .8))) | background of menu. |
--media-menu-border-radius | border-radius of menu. | |
--media-menu-border | none | border of menu. |
--media-menu-transition-in | visibility 0s, opacity .2s ease-out, transform .15s ease-out, left .2s ease-in-out, min-width .2s ease-in-out, min-height .2s ease-in-out | transition of menu when showing. |
--media-menu-transition-out | visibility .15s ease-in, opacity .15s ease-in, transform .15s ease-in | transition of menu when hiding. |
--media-menu-visibility | visible | visibility of menu when showing. |
--media-menu-hidden-visibility | hidden | visibility of menu when hiding. |
--media-menu-max-height | var(--_menu-max-height, 300px) | max-height of menu. |
--media-menu-hidden-max-height | var(--media-menu-max-height, var(--_menu-max-height, 300px)) | max-height of menu when hiding. |
--media-menu-opacity | 1 | opacity of menu when showing. |
--media-menu-hidden-opacity | 0 | opacity of menu when hiding. |
--media-menu-transform-in | translateY(0) scale(1) | transform of menu when showing. |
--media-menu-transform-out | translateY(2px) scale(.99) | transform of menu when hiding. |
--media-font | var(--media-font-weight, normal) 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-weight | normal | font-weight property. |
--media-font-family | helvetica neue, segoe ui, roboto, arial, sans-serif | font-family property. |
--media-font-size | 14px | font-size property. |
--media-text-content-height | var(--media-control-height, 24px) | line-height of text. |
--media-icon-color | var(--media-primary-color, rgb(238 238 238)) | fill color of icon. |
--media-menu-icon-height | var(--media-control-height, 24px) | height of icon. |
--media-menu-item-checked-indicator-display | none | display of check indicator. |
--media-menu-item-checked-background | rgb(255 255 255 / .2) | background of checked menu item. |
--media-menu-item-max-width | max-width of menu item text. |
media-rendition-menu (docs)
Section titled media-rendition-menu (docs)| Name | Default | Description |
|---|---|---|
--media-primary-color | rgb(238 238 238) | Default color of text / icon. |
--media-secondary-color | rgb(20 20 30 / .8) | Default color of background. |
--media-text-color | var(--media-primary-color, rgb(238 238 238)) | color of text. |
--media-control-background | var(--media-secondary-color, rgb(20 20 30 / .8)) | background of control. |
--media-menu-display | inline-flex | display of menu. |
--media-menu-layout | Set to row for a horizontal menu design. | |
--media-menu-flex-direction | row | flex-direction of menu. |
--media-menu-gap | .25em | gap between menu items. |
--media-menu-background | var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .8))) | background of menu. |
--media-menu-border-radius | border-radius of menu. | |
--media-menu-border | none | border of menu. |
--media-menu-transition-in | visibility 0s, opacity .2s ease-out, transform .15s ease-out, left .2s ease-in-out, min-width .2s ease-in-out, min-height .2s ease-in-out | transition of menu when showing. |
--media-menu-transition-out | visibility .15s ease-in, opacity .15s ease-in, transform .15s ease-in | transition of menu when hiding. |
--media-menu-visibility | visible | visibility of menu when showing. |
--media-menu-hidden-visibility | hidden | visibility of menu when hiding. |
--media-menu-max-height | var(--_menu-max-height, 300px) | max-height of menu. |
--media-menu-hidden-max-height | var(--media-menu-max-height, var(--_menu-max-height, 300px)) | max-height of menu when hiding. |
--media-menu-opacity | 1 | opacity of menu when showing. |
--media-menu-hidden-opacity | 0 | opacity of menu when hiding. |
--media-menu-transform-in | translateY(0) scale(1) | transform of menu when showing. |
--media-menu-transform-out | translateY(2px) scale(.99) | transform of menu when hiding. |
--media-font | var(--media-font-weight, normal) 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-weight | normal | font-weight property. |
--media-font-family | helvetica neue, segoe ui, roboto, arial, sans-serif | font-family property. |
--media-font-size | 14px | font-size property. |
--media-text-content-height | var(--media-control-height, 24px) | line-height of text. |
--media-icon-color | var(--media-primary-color, rgb(238 238 238)) | fill color of icon. |
--media-menu-icon-height | var(--media-control-height, 24px) | height of icon. |
--media-menu-item-checked-indicator-display | none | display of check indicator. |
--media-menu-item-checked-background | rgb(255 255 255 / .2) | background of checked menu item. |
--media-menu-item-max-width | max-width of menu item text. |
media-settings-menu-item
Section titled media-settings-menu-item| Name | Default | Description |
|---|---|---|
--media-menu-item-opacity | 1 | opacity of menu-item content. |
--media-menu-item-transition | background .15s linear, opacity .2s ease-in-out | transition of menu-item. |
--media-menu-item-checked-background | background of checked menu-item. | |
--media-menu-item-outline | 0 | outline menu-item. |
--media-menu-item-outline-offset | -1px | outline-offset of menu-item. |
--media-menu-item-hover-background | rgb(92 92 102 / .5) | background of hovered menu-item. |
--media-menu-item-hover-outline | outline of hovered menu-item. | |
--media-menu-item-hover-outline-offset | var(--media-menu-item-outline-offset, -1px) | outline-offset of hovered menu-item. |
--media-menu-item-focus-shadow | inset 0 0 0 2px rgb(27 127 204 / .9) | box-shadow of the :focus-visible state. |
--media-menu-item-icon-height | var(--media-control-height, 24px) | height of icon. |
--media-menu-item-description-max-width | 100px | max-width of description. |
--media-menu-item-checked-indicator-display | inline-block | display of checked indicator. |
--media-icon-color | var(--media-primary-color, rgb(238 238 238)) | fill color of icon. |
--media-menu-icon-height | height of icon. | |
--media-menu-item-indicator-fill | var(--media-icon-color, var(--media-primary-color, rgb(238 238 238))) | fill color of indicator icon. |
--media-menu-item-indicator-height | 1.25em | height of menu-item indicator. |
media-settings-menu (docs)
Section titled media-settings-menu (docs)| Name | Default | Description |
|---|---|---|
--media-settings-menu-justify-content | justify-content of the menu. | |
--media-primary-color | rgb(238 238 238) | Default color of text / icon. |
--media-secondary-color | rgb(20 20 30 / .8) | Default color of background. |
--media-text-color | var(--media-primary-color, rgb(238 238 238)) | color of text. |
--media-control-background | var(--media-secondary-color, rgb(20 20 30 / .8)) | background of control. |
--media-menu-display | inline-flex | display of menu. |
--media-menu-layout | Set to row for a horizontal menu design. | |
--media-menu-flex-direction | row | flex-direction of menu. |
--media-menu-gap | .25em | gap between menu items. |
--media-menu-background | var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .8))) | background of menu. |
--media-menu-border-radius | border-radius of menu. | |
--media-menu-border | none | border of menu. |
--media-menu-transition-in | visibility 0s, opacity .2s ease-out, transform .15s ease-out, left .2s ease-in-out, min-width .2s ease-in-out, min-height .2s ease-in-out | transition of menu when showing. |
--media-menu-transition-out | visibility .15s ease-in, opacity .15s ease-in, transform .15s ease-in | transition of menu when hiding. |
--media-menu-visibility | visible | visibility of menu when showing. |
--media-menu-hidden-visibility | hidden | visibility of menu when hiding. |
--media-menu-max-height | var(--_menu-max-height, 300px) | max-height of menu. |
--media-menu-hidden-max-height | var(--media-menu-max-height, var(--_menu-max-height, 300px)) | max-height of menu when hiding. |
--media-menu-opacity | 1 | opacity of menu when showing. |
--media-menu-hidden-opacity | 0 | opacity of menu when hiding. |
--media-menu-transform-in | translateY(0) scale(1) | transform of menu when showing. |
--media-menu-transform-out | translateY(2px) scale(.99) | transform of menu when hiding. |
--media-font | var(--media-font-weight, normal) 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-weight | normal | font-weight property. |
--media-font-family | helvetica neue, segoe ui, roboto, arial, sans-serif | font-family property. |
--media-font-size | 14px | font-size property. |
--media-text-content-height | var(--media-control-height, 24px) | line-height of text. |
--media-icon-color | var(--media-primary-color, rgb(238 238 238)) | fill color of icon. |
--media-menu-icon-height | var(--media-control-height, 24px) | height of icon. |
--media-menu-item-checked-indicator-display | none | display of check indicator. |
--media-menu-item-checked-background | rgb(255 255 255 / .2) | background of checked menu item. |
--media-menu-item-max-width | max-width of menu item text. |