Sass Variables
To configure and customize the Telerik and Kendo UI MediaPlayer, use not only its dedicated Sass variables but also the Sass variables provided by the Slider, Toolbar, and Button components.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-media-player-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The border width of the MediaPlayer. | |||
kendo-media-player-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit) |
| Description: The font family of the MediaPlayer. | |||
kendo-media-player-font-size | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) | Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit) |
| Description: The font size of the MediaPlayer. | |||
kendo-media-player-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal) |
| Description: The line height of the MediaPlayer. | |||
kendo-media-player-bg | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The background color of the MediaPlayer. | |||
kendo-media-player-text | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the MediaPlayer. | |||
kendo-media-player-border | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the MediaPlayer. | |||
kendo-media-player-titlebar-padding-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the MediaPlayer title. | |||
kendo-media-player-titlebar-padding-y | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The vertical padding of the MediaPlayer title. | |||
kendo-media-player-titlebar-bg | null | null | Default: nullComputed: null |
| Description: The background color of the MediaPlayer title. | |||
kendo-media-player-titlebar-text | $kendo-media-player-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-media-player-bgComputed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The text color of the MediaPlayer title. | |||
kendo-media-player-titlebar-border | null | null | Default: nullComputed: null |
| Description: The border color of the MediaPlayer title. | |||
kendo-media-player-titlebar-gradient | if($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) | (color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 70%, transparent), color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 0%, transparent)) | Default: if($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) ))Computed: (color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 70%, transparent), color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 0%, transparent)) |
| Description: The gradient of the MediaPlayer title. | |||
