Styling the Media Masher Editor
The visual appearance of Media Masher can be customized via common web standards like parts, slots, and CSS variables. To instead change the behavior of components and how they load, see the Embedding Guide.
Targeting
The HTML document below can be hosted on any web host to display the Media Masher application in any modern web browser:
Example: Styled HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Media Masher Styled Example</title>
<script type='importmap'>{ "imports": {
"lit": "https://cdn.jsdelivr.net/gh/lit/dist@3.2.0/all/lit-all.min.js",
"@mashermedia/": "https://js.masher.media/0.0.1-beta.36/"
} }</script>
<script type='module'>
import '@mashermedia/client/media-masher.js';
</script>
<style>
body {
height: 100vh;
display: flex;
margin: 0;
padding: 0;
background-color: white; color: black;
}
@media(prefers-color-scheme: dark) {
body { background-color: black; color: white; }
}
media-masher::part(player) {
--color-chrome-chroma-per: 30%;
}
</style>
</head>
<body>
<media-masher></media-masher>
</body>
</html>
The MEDIA-MASHER element’s constructed CSS includes flex-grow:1, so this example sets display:flex and height:100vh on the BODY element to fill the whole viewport. It also unsets the margin and padding on the BODY, since the editor includes space around and between its subcomponents.
A media query is used to swap the page’s fore and back color when the user’s device is in dark mode. The editor adjusts itself automatically, but the element itself has no coloring.
The --color-chrome-chroma-per variable is used to override the chroma of the color in the headers and footers within the player. The default is 0%, which is grayscale, but we set it here to 30% which results in a blue.
Parts
Without further configuration, the MEDIA-MASHER element will populate itself with all four of the main components (player, browser, timeline, and inspector) as described in the Editing Guide.
Each of these main components contain three vertically stacked subcomponents - a header and footer (chrome), and a content area. These then contain three SPAN elements (left, center, and right) that in turn contain the actual elements the user interacts with.
This nested container structure is utilized by the MEDIA-MASHER element to simplify customization of the editor’s appearance. Its exportparts attribute contains not only the main components, but also the subcomponents and SPAN elements.
For instance, the center SPAN element in the player’s contents component is exported as part browser-content-center which can be styled with the following CSS selector:
Example: CSS Parts
media-masher::part(browser-content-center) {
background-color: red;
}
Slots
The same targeting pattern used with parts can be applied to slots IDs as well. To completely replace a target you can simply add a SLOT child element with its id attriute set to the MEDIA-MASHER element. For instance, the following HTML replaces the left SPAN element in the player’s header component with a custom element containing the text “Media Masher”:
Example: HTML Slots
<media-masher>
<span slot='player-header-left'>
Media Masher
</span>
</media-masher>
If you were to inspect the resultant DOM structure, you’d see SLOT elements that have been created at each tier of the hierarchy. These effectively pass your custom element down to replace the targetted one.
If there are no elements to display in a SPAN, it will not be rendered. Likewise, if there are no SPAN elements in a header or footer component, it will not be rendered. Container components are all styled with display:flex so other child elements fill any available space.
By default, the center slot is not populated in headers or footers so it’s a good place to add your elements. The left and right slots are not populated in the content components.
CSS Variables
The MEDIA-MASHER element defines many core CSS variables that can be used to change the editor’s appearance. Its subcomponents all use these values to calculate variables of their own, which are in turn used by the interface elements they contain. These two types of variables have different limitations on where they can be overridden:
- A core variable can be overridden globally by redefining it on the MEDIA-MASHER element, or locally to one of its children by redefining it on the corresponding part.
- A calculated variable must be redefined on a subcomponent of the MEDIA-MASHER element but it can be targeted as low down the hierarchy as needed.
The core variables can be interactively changed from within the editor itself by clicking on the link in the top right corner of the inspector. Changes here adjust the variables on the MEDIA-MASHER element, forcing recalculation throughout the editor. Click the link to copy the changed values to the clipboard - these can then be pasted directly into your CSS.
Visibility
All core visibility variables are defined as boolean values (1 = true, 0 = false) and are used to calculate the total height of content items. They toggle the display of icons, labels, and previews within the following types of elements:
- timeline clips
- browser media
| Core Variable | Description | Default |
|---|---|---|
| —view-icon-boo | Show icons in the items | 1 |
| —view-label-boo | Show labels in the items | 1 |
| —view-preview-boo | Show preview in the items | 1 |
At least one of these variables must be set to 1, otherwise content items will display improperly, with their height calculated from just the padding and border values.
Borders
All core border variable values are defined in pixels, so there are no calculated border variables. Values either represent the size or the radius of the border, and are applied to the following types of elements:
- button: whether in chrome or content
- item: timeline clips and browser media content
- panel: player, browser, timeline, and inspector
- preview: frame preview within items (no radius)
| Core Variable | Description | Default |
|---|---|---|
| —border-button-radius-pix | Button border radius | 5px |
| —border-button-stroke-pix | Button border size | 1px |
| —border-item-radius-pix | Content item border radius | 5px |
| —border-item-stroke-pix | Content item border size | 1px |
| —border-panel-radius-pix | Panel border radius | 7px |
| —border-panel-stroke-pix | Panel border size | 3px |
| —border-preview-stroke-pix | Preview border size | 1px |
Colors
Most of the core color variables define one of the three values in the oklch colorspace (lightness, chroma, and hue) that are used in calculated variables that are then applied to elements.
There are five lightness levels that represent the darkest to lightest values in the editor when in light mode. And there are two pairs of chroma and hue values - one for content areas and another for chrome.
| Core Variable | Description | Default |
|---|---|---|
| —color-brightness-1-per | Darkest in light mode | 15% |
| —color-brightness-2-per | Darker in light mode | 35% |
| —color-brightness-3-per | Normal in light mode | 50% |
| —color-brightness-4-per | Lighter in light mode | 70% |
| —color-brightness-5-per | Lightest in light mode | 90% |
| —color-chrome-chroma-per | Chroma within headers and footers | 0% |
| —color-chrome-hue-deg | Hue within headers and footers | 281 |
| —color-content-chroma-per | Chroma within content | 0% |
| —color-content-hue-deg | Hue within content | 281 |
The core variables are then used to calculate a variety of colors for these specific combinations of usages and states:
- back: used for background colors
- fore: used for text, icon, and border colors
- off: disabled state color
- on: selected state color
- over: hover state color
| Calculated Variable | Description |
|---|---|
| —back-chrome | Background color of chrome |
| —back-content | Background color of content |
| —fore-chrome | Foreground color in chrome |
| —fore-content | Foreground color in content |
| —off-back-chrome | Disabled background color in chrome |
| —off-fore-chrome | Disabled foreground color in chrome |
| —on-fore-chrome | Selected foreground color in chrome |
| —on-fore-content | Selected foreground color in content |
| —over-back-chrome | Hover background color in chrome |
| —over-back-content | Hover background color in content |
| —over-fore-chrome | Hover foreground color in chrome |
| —over-fore-content | Hover foreground color in content |
These calculations all include one of the lightness values which serves to differentiate between background and foreground colors. But instead of using one of the --color-brightness-* variables directly, one of the --bright-* variables below are used instead. These are redefined in a media query when the user’s device is in dark mode, to effectively invert the color scheme.
| Calculated Variable | Description |
|---|---|
| —bright-1 | Lightest in dark mode |
| —bright-2 | Lighter in dark mode |
| —bright-3 | Normal in both modes |
| —bright-4 | Darker in dark mode |
| —bright-5 | Darkest in dark mode |
| —color-contrast | Mash contrasting color |
| —color-contrast-dark | Dark color |
| —color-contrast-light | Light color |
The --color-contrast value is used to provide contrast around content item previews. It depends on the current mash color and is automatically set to either --color-contrast-light when the color is dark or --color-contrast-dark when it’s light. The values for these variables are also redefined in a media query as either --fore-content or --back-content depending on the light/dark mode. The lighter of the two will always populate --color-contrast-light while the darker populates --color-contrast-dark.
Padding
All the core padding variables are defined in pixels, so there are no calculated padding variables. Values represent interior element padding as well as gaps between children, and are applied to the following types of elements:
- button: space around text and icons
- chrome: space around elements in headers and footers
- content: space around elements in content areas
- control: space around selects and inputs in inspector
- item: space around label and preview in content items
- panel: space around player, browser, timeline, and inspector
| Core Variable | Description | Default |
|---|---|---|
| —pad-button-pix | Button padding and gap | 4px |
| —pad-chrome-pix | Chrome padding and gap | 5px |
| —pad-content-pix | Content area padding and gap | 10px |
| —pad-control-pix | Control row padding and gap | 10px |
| —pad-item-pix | Content item padding and gap | 3px |
| —pad-panel-pix | MEDIA-MASHER padding and gap | 20px |
Sizing
Many of core sizing variables values are defined as ratios (zero to one) of the --size-base-str variable which is the base size defined as a string. These are then used to calculate the total height of the following types of elements:
- button: height of buttons
- control: height of selects and inputs in inspector
- label: height of labels in content items
- preview: height of previews in content items
| Core Variable | Description | Default |
|---|---|---|
| —size-base-str | Base font size | 2rem |
| —size-button-rat | Button height to rem ratio | 0.5 |
| —size-control-rat | Control height to rem ratio | 0.6 |
| —size-label-rat | Label height to rem ratio | 0.5 |
| —size-preview-rat | Preview height to rem ratio | 0.25 |
Other core sizing variables are defined either in pixels or ratios of the viewport and are used to calculate the total height of the following specific elements:
- aside: inspector width and left/right content SPAN elements
- dialog: import/export dialog width and height
- player: player containing dimension
- scrubber: timeline scrub control height and width
| Core Variable | Description | Default |
|---|---|---|
| —size-aside-pix | Inspector width | 240px |
| —size-player-pix | Player containing dimension | 360px |
| —size-dialog-height-rat | Dialog height to viewport ratio | 0.5 |
| —size-dialog-width-rat | Dialog width to viewport ratio | 0.66 |
| —size-scrubber-height-pix | Scrubber height | 13px |
| —size-scrubber-width-pix | Scrubber width | 16px |
The --size-player-pix represents the maximum height or width that the player’s preview can be. The preview’s actual size is calculated based on the aspect ratio of the loaded mash.