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.

  • 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.
  • media-time-range (docs)
  • media-volume-range (docs)
  • media-chrome-range
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)) background of range 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-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-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.
  • 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.
  • 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.
Name Default Description
--media-primary-color rgb(238 238 238) Default color of text / icon.
--media-secondary-color Default color of background.
--media-text-color var(--media-primary-color, rgb(238 238 238)) color of text.
--media-dialog-display inline-flex display of dialog.
--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.
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).
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.
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).
Name Default Description
--media-control-background background of control.
--media-primary-color rgb(238 238 238) Default color of text / icon.
--media-secondary-color Default color of background.
--media-text-color var(--media-primary-color, rgb(238 238 238)) color of text.
--media-dialog-display inline-flex display of dialog.
--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.
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.
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.
Name Default Description
--media-preview-thumbnail-display inline-block display property of display.
--media-control-display inline-block display property of control.
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
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.
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.
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.
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.
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.
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.
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.
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.