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: 1px Computed: 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 | k-color(surface-alt) | var(--kendo-color-surface-alt, #ffffff) | Default: k-color(surface-alt) Computed: var(--kendo-color-surface-alt, #ffffff) |
Description: The background color of the MediaPlayer. | |||
kendo-media-player-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface, #3d3d3d) | Default: k-color(on-app-surface) Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: The text color of the MediaPlayer. | |||
kendo-media-player-border | k-color(border) | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: k-color(border) Computed: 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: null Computed: 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-bg Computed: var(--kendo-color-surface-alt, #ffffff) |
Description: The text color of the MediaPlayer title. | |||
kendo-media-player-titlebar-border | null | null | Default: null Computed: null |
Description: The border color of the MediaPlayer title. | |||
kendo-media-player-titlebar-gradient | color-mix(in srgb, k-color(on-app-surface) 70%, transparent), color-mix(in srgb, k-color(on-app-surface) 0%, transparent) | (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: color-mix(in srgb, k-color(on-app-surface) 70%, transparent), color-mix(in srgb, k-color(on-app-surface) 0%, transparent) 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. |