{ "id": "v1-md-8331", "long_id": "v1.material-design.app.s08.p03.t03.u01", "name": "Material media player, 2016", "era": { "slug": "material-design", "code": "md", "name": "Material Design", "years": [ 2014, 2018 ], "description": "Paper and ink, 2014 to 2018: flat sheets that cast soft shadows, a coloured app bar, uppercase medium-weight buttons, two-pixel corners and one bright accent for the floating action." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "A signed-in listening application in the paper-and-ink manner: a low coloured app bar with the views, a queue sheet that runs down the right edge of the window, and a player bar fixed along the bottom whose round play button, the floating action button, rides its top edge. The home screen opens with a band in the secondary bar colour that holds a square cover and the featured title, then a row of tabs and a tight grid list of square colour tiles with a caption strip along the foot of each. Music, podcast and video applications built on the 2014 guidelines looked like this from about 2015 to 2018.", "url": "https://chrono.skin/s/v1-md-8331", "preview_url": "https://chrono.skin/s/v1-md-8331/specimen.html", "files": { "STYLE.md": "# Material media player, 2016\n\n## Summary\n\nA signed-in listening application in the paper-and-ink manner: a low coloured app bar with the views, a queue sheet that runs down the right edge of the window, and a player bar fixed along the bottom whose round play button, the floating action button, rides its top edge. The home screen opens with a band in the secondary bar colour that holds a square cover and the featured title, then a row of tabs and a tight grid list of square colour tiles with a caption strip along the foot of each. Music, podcast and video applications built on the 2014 guidelines looked like this from about 2015 to 2018.\n\n## Layout\n\n- The page is fluid: `--size-page` is `100%` and nothing is centred or capped; tiles and sheets stretch with the window, as in an application. Designed at 1440px. Running text is capped at `--size-measure` (620px).\n- Order: `.ds-nav` (one row, `--size-bar` 56px: brand, the view links directly after it, `.ds-nav__search` of `--size-search` and the round `.ds-avatar` at the right), then the view, then the one-line `.ds-footer`, then `.ds-player`, which is the last element of the page and sticks to the bottom of the window (`--size-player` 72px).\n- A listening view is `.ds-app`, a two-column grid: `.ds-main` and the `.ds-sidebar` queue (`--size-queue` 320px), which is flush with the right edge of the window and as tall as the view. On the home screen `.ds-main` holds `.ds-hero`, flush with the bar and the queue, and then `.ds-content`, the padded stack: `.ds-toolbar` (tabs and one filter field), the `.ds-grid`, and a `.ds-columns` row (2 to 1) with the recently played sheet and one card.\n- `.ds-grid` is four square tiles to a row with only `--space-1` (4px) between them; each tile is one flat fill with a drawn disc or diamond and a `.ds-grid__caption` strip across its foot. Tiles have no shadow: the grid reads as one surface.\n- `.ds-content` stacks its blocks `--space-4` (24px) apart, with `--space-5` at the sides (`--space-6` in `.ds-content--wide`, the form of a view without the queue).\n- Everything is on an 8px grid. `--space-1` 4px (gap between tiles, label to field, list padding), `--space-2` 8px (between buttons, card action padding, player controls), `--space-3` 16px (list and queue row padding, button side padding, gap between figure cards), `--space-4` 24px (gap between blocks, sheet padding, bar and player side padding), `--space-5` 32px (band padding, content side padding), `--space-6` 48px (bottom of the content, wide side padding), `--space-7` 64px and `--space-8` 80px (spare steps).\n- Heights: bar `--size-bar` 56px; player `--size-player` 72px; tabs, table rows, queue rows and sheet heads `--size-row` 48px; table head and icon buttons `--size-row-dense` 40px; list rows 56px; buttons, the search field and the avatar `--size-control` 36px, fields 40px; floating button `--size-fab` 56px. Other sizes: `--size-brand` 30px, `--size-cover` 216px (featured cover), `--size-thumb` 40px (small cover), `--size-meter` 4px (progress and volume lines), `--size-volume` 96px, `--size-stripe` 4px, `--size-icon` 24px, `--size-check` 18px, `--size-badge` 22px, `--size-dialog` 440px, `--size-area` 96px.\n- Inner pages (one record, its notes, an upload form, the library) have no `.ds-hero`. The bar, the footer and the player stay. `.ds-content` opens with `.ds-breadcrumb`, then `.ds-page-header` set directly on the page (title, one grey line, raised buttons at the right), then the working sheets. A record page keeps `.ds-app` with the queue: `.ds-stats`, then one `.ds-panel` with the `.ds-table` and a `.ds-panel__foot` holding the row count and `.ds-pagination`. Pages without the queue use `.ds-content--wide` and `.ds-columns--detail` (7 to 5): the text sheet or form sheet at the left, a `.ds-stack` of notices, cards and the dialog at the right; `.ds-columns--even` stretches both columns to one height. Tabs on an inner page run along the top edge of a sheet.\n- Views: the specimen is one application with five views. `listen` is the home view: featured band, tabs, the grid of records, recently played, and the queue. `record` is one record: page header, figures, the table of recordings with pagination and labels, and the queue. `notes` is the text about a record beside two notices and related links. `upload` is the form for a recording with its page actions, the file card and the delete dialog. `library` is the listener's playlists, shown empty under its tabs, beside the saved records.\n- Below 1100px the `.ds-columns` row becomes one column and the filter field hides. Below 900px the queue drops under the main column, the search field and the volume line hide, and the page header stacks. Below 600px the bar wraps into a brand row and a full-width `.ds-nav__links` row whose items are equal cells with centred links (the current one keeps `.is-current`), the band stacks a half-size cover over its text, the grid has two tiles to a row, figures sit two by two, the player keeps only the title and the controls, and table cells marked `.ds-table__extra` are hidden.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- `--color-bar` soft teal `#80cbc4` with dark `--color-bar-text` `#212121`: navigation bar and header band carry dark text, not white. `--color-bar-alt` and `--color-inverse` are blue-grey `#455a64` with white text (toolbar, footer).\n- Green is the colour of action: `--color-button`, `--color-link`, `--color-focus` and `--color-success` are `#46873b` with white button text; `--color-link-hover` stays `#46873b`, so hover is shown by elevation; `--color-link-active` is `#455a64`.\n- `--color-accent` mint `#64ffda` with `#212121` text: floating button, count badges. The 3px indicator under the current toolbar link and tab is `--color-link`, which reads on a white sheet under every palette. `--color-accent-alt` is blue-grey `#455a64`.\n- Page `#f3f3f3`, sheets white, `--color-surface-alt` `#fafafa`, `--color-surface-strong` `#e3e3e3`; borders `#dcdcdc`, inner dividers `#ebebec`. Text `#212121`, secondary `#757575`, section titles `#444444`.\n- Block fills: teal `#80cbc4`, mint `#64ffda`, light green `#6ab344` (all with dark text), blue-grey `#455a64` (white text). `--color-danger` `#c2185b`, `--color-warning` amber `#ffc400`, notice `#e3e3e3`.\n- One family, Roboto, for body, headings and UI; `--font-mono` for code only.\n- Dense text: `--text-base` 13px on a 24px line (`--line-body` 1.85), `--text-small` 12px, `--text-ui` 14px.\n- Small regular headings: `--text-display` 34px, `--text-h1` 24px, `--text-h2` 20px, `--text-h3` 15px at `--weight-bold` 500; `--text-large` 18px for the lead.\n- `--ui-transform` is `none`: buttons, navigation and tabs are sentence case at `--weight-ui` 500. No uppercase anywhere, no underlines, no tracking.\n- Raised paper: every sheet floats visibly. `--shadow-panel` is a three-layer shadow (10px blur, 4px drop); `--shadow-control` a deeper one (14px blur, 6px drop) on resting buttons; `--shadow-control-hover` drops 8px; `--shadow-control-pressed` falls back to two tight layers; `--shadow-dialog` is two layers, 14px blur with a 12px drop.\n- All corners are 2px, including `--radius-pill`: badges, chips and pagination cells are small rectangles, not pills.\n- Fills are flat; depth comes from shadow only. `--border-width` 1px, `--border-width-strong` 3px for indicators, stat rules and the focus and error line of a field. A hovered button darkens: `--fill-button-hover` is the button colour mixed with 12% black. `--fill-input` is transparent, so fields are a bottom line only; `--focus-ring` is a solid 3px line; `--transition` is a quick 0.15s ease-out.\n- In this layout the toolbar is a white sheet (`--fill-panel`) with `--color-text-muted` links and a `--color-heading` brand name; `--fill-bar` with `--color-bar-text` fills the hero and the inner page header instead. `--fill-inverse` with `--color-inverse-text` is the dark band and the footer. `--color-surface-strong` is the grey band and the table head, both with `--color-text`.\n- Text on fills follows fixed pairs: `--color-bar-text` on the hero, the page header, `--color-fill-1` and `--color-fill-3`; `--color-accent-text` on the accent, `--color-fill-2` and the warning badge; `--color-inverse-text` on `--color-fill-4`, the dark band and the footer; `--color-button-text` on the primary and danger buttons and on the new, success and danger badges. Links and muted text are used only on the page and on white sheets, never on a grey, coloured or dark band.\n- One-off values built with `color-mix()`, `calc()` or `opacity` because the vocabulary has no token: 87% and 70% of the bar text colour for the hero lead, the page header text and its breadcrumb; 14%, 22% and 40% washes of it for the hero shapes; 87% opacity for card text on a colour block; 87%, 70% and 40% of the inverse text in the dark band and footer; 66% of the quiet link colour for rail links; a 20% grey wash behind a hovered flat button; line heights 1.18, 1.2, 1.43, 1.6 and 1.85.\n\n## Components\n\n- `.ds-page` on ``: the page fill, family and 14px text.\n- `.ds-nav`: the app bar. `.ds-nav__links` > `.ds-nav__item` > `.ds-nav__link` follow the brand; `is-current` has a `--border-width-strong` line in `--color-bar-text`. `.ds-nav__search` is a pill holding an icon and a borderless `.ds-nav__field`; `.ds-avatar` is the account disc, the button of the account `.ds-menu`.\n- `.ds-brand`: the site's mark and name at the left of the bar, one link. `.ds-brand__mark` is a `--size-brand` tile dressed like the primary button (`--fill-button`, `--color-button-text`, `--radius-control`, `--shadow-control`) with a hairline ring of the bar text at 70%; `.ds-brand__name` is the name at `--text-large` in the heading font. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the featured band: a `.ds-cover--large` at the left and `.ds-hero__body` with `.ds-hero__label`, `.ds-hero__title`, `.ds-hero__lead` and a `.ds-buttons` row of one `.ds-button--secondary` and one `.ds-button--onbar`. Never put a primary or a flat button on the band: their colours are not chosen for it.\n- `.ds-cover`: a square drawn cover, `--size-thumb` wide (`--2`, `--3`, `--4` pick the fill; `--large` is the featured size). Used in lists, the queue and the player.\n- `.ds-app`, `.ds-main`, `.ds-content` (`--wide`), `.ds-columns` (2 to 1; `--detail` 7 to 5; `--even` equal heights), `.ds-stack` and `.ds-caption` (a small uppercase caption on the page).\n- `.ds-page-header`: the head of an inner page, unboxed. `.ds-page-header__body` holds `.ds-page-header__title` and `.ds-page-header__text`; `.ds-page-header__actions` sits at the right.\n- `.ds-prose`: long-form text inside a `.ds-panel--pad`; styles h1 to h3, paragraphs, lists, `strong`, inline `code` and links. `.ds-prose__lead` is the opening paragraph.\n- `.ds-link`: inline link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet` is text-coloured. `.ds-links` stacks several.\n- `.ds-button`: the primary button, 36px, uppercase, may start with a `.ds-icon`. `--secondary` is the light button, `--flat` has no fill (cards, dialogs, empty states), `--danger` is filled with `--color-danger` (with `--flat`, danger-coloured text), `--onbar` is the outlined button in `--color-bar-alt-text` for the featured band, `--small` and `--wide` change its size, `--fab` is the 56px accent disc. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`. `.ds-iconbutton` is a 40px round button with one icon and no fill.\n- `.ds-icon`: 24px stroked inline SVG in the current colour; `--solid` fills it instead.\n- `.ds-form`: stacked fields; `.ds-form__row` puts two side by side. `.ds-form__field` wraps a `.ds-form__label` and a `.ds-form__control` (filled, bottom line only; `--area` for a textarea; inside `.ds-form__select` for a select). `is-focus` thickens the line in `--color-focus`; `is-invalid` on the field plus `.ds-form__error` shows an error; `.ds-form__hint` is help text; `.ds-form__check` with `.ds-form__checkbox` is a checkbox; `.ds-form__actions` right-aligns buttons; `.ds-form__inline` puts one field and one button on a line.\n- `.ds-table`: sits in a `.ds-panel`; 48px rows divided by hairlines, `.ds-table__index` the centred row number, `.ds-table__name` a bold title, `.ds-table__num` right-aligned numbers, `.ds-table__extra` cells a phone can do without, `tr.is-current` tinted with its number in `--color-link`.\n- `.ds-list`: dense rows inside a `.ds-panel`, without dividers. `.ds-list__item` holds a `.ds-cover`, `.ds-list__body` with `.ds-list__title` and `.ds-list__text` (one line each, cut with an ellipsis), and `.ds-list__meta` at the right.\n- `.ds-panel`: a card with `.ds-panel__title`, `.ds-panel__body` and optional `.ds-panel__actions` (`--end` for raised buttons at the right). `.ds-panel__head` is a ruled head with the title and one flat button; `.ds-panel__foot` a foot with a count and pagination; `--form` holds a form, `--pad` pads the sheet for prose. `.ds-meter` with `.ds-meter__bar` (`--2` for the longer one) is a thin progress line.\n- `.ds-stat`: one figure card with a `--size-stripe` line in `--color-accent` at its left; four sit in a `.ds-stats` row. `.ds-stat__value` is the number, `.ds-stat__label` the small caption under it.\n- `.ds-grid`: the grid list. Each `.ds-grid__cell` is a square link (`--2`, `--3`, `--4` pick the fill, `--square` draws a diamond instead of a disc) with a `.ds-grid__caption` holding `.ds-grid__text`, `.ds-grid__title` and a play icon.\n- `.ds-tabs`: a hairline-ruled row of uppercase `.ds-tabs__tab`; `is-current` is text-coloured with a line in `--color-accent`. `.ds-toolbar` puts the tabs and a `.ds-toolbar__field` on one rule.\n- `.ds-badge`: accent count label; `--new` for new items; `--success`, `--warning`, `--danger` for the state of a recording; `--chip` is a 32px grey chip, `is-current` when chosen. Group with `.ds-badges`.\n- `.ds-sidebar`: the queue sheet at the right edge. `.ds-sidebar__title` is a small uppercase heading, `.ds-sidebar__list` a group of `.ds-sidebar__link` rows, each a cover, a `.ds-sidebar__name` and a `.ds-sidebar__count`; `is-current` is the playing row, with a stripe in `--color-accent`. `.ds-sidebar__actions` holds two buttons at its foot.\n- `.ds-notice`: tinted block with a left stripe and a `.ds-notice__title`; `--error` uses the danger surface and colour. Group with `.ds-notices`.\n- `.ds-pagination`: a row of round `.ds-pagination__link` in a sheet foot; `is-current` is filled, `is-disabled` grey.\n- `.ds-breadcrumb`: small grey trail of `.ds-breadcrumb__item` with `.ds-breadcrumb__link`, separated by drawn chevrons; the last carries `is-current`.\n- `.ds-dialog`: a sheet with the deepest shadow, `.ds-dialog__title`, `.ds-dialog__body` and right-aligned flat buttons in `.ds-dialog__actions`. Sits on `.ds-overlay`.\n- `.ds-player`: the bar fixed to the bottom of the window. `.ds-player__progress` is a meter along its top edge; `.ds-player__now` holds a cover and the title; `.ds-player__controls` two icon buttons around the floating play button, which is raised by half its height; `.ds-player__extra` the time and `.ds-player__volume`.\n- `.ds-empty`: centred `.ds-empty__mark` disc, `.ds-empty__title`, `.ds-empty__text` and one flat button, inside a sheet under its tabs.\n- `.ds-footer`: one inverse line with a `.ds-footer__list` of `.ds-footer__link` at the left and `.ds-footer__legal` at the right.\n- `.ds-menu`: a `
` whose `.ds-menu__button` (the ``: an icon, or the account's `.ds-avatar`) opens `.ds-menu__list`, a white sheet with the dialog shadow holding 48px `.ds-menu__link` rows. Use it for the account menu and the overflow (three dots) at the end of the bar; `--start` hangs the sheet from the left, for the menu button that carries the navigation on a phone.\n- `.ds-tooltip`: on an icon-only button, with a `.ds-tooltip__text` child naming it; the small dark label shows on hover and focus (`is-open` statically). It sits below; `--left`, `--right` and `--above` move it. Use it on the floating button and bar icons, never on a button that already has a text label.\n- `.ds-switch`: an on-off setting that takes effect at once: a `` or `