Skip to content

Commit

Permalink
Improve CSS vars (#528)
Browse files Browse the repository at this point in the history 
* fix: make color cases more consistent. introduce primary and secondary css vars.

* fix: update a couple themes to use new css vars.

* fix: make listbox background (more) consistent. Cleanup empty css lines.

* fix: Make other listbox background styles and values more consistent.

* chore: simplify youtube theme example.

* fix: Make experimental components icon color css var consistent with other components.

* fix: Make control bar color use expected CSS vars.

* fix: change control-font-color to text-color

* fix: remove unneeded `-control` of `icon-color`

* fix: Demuxed 2022 color issues

* fix: remove dup selector

* fix: add --media-font and co

* chore: update styling.md

* fix: range-background, uniform colors

* fix: 1px rounding to range track, no sticking out

* Update src/js/media-time-range.js

Co-authored-by: Gary Katsevman <git@gkatsev.com>

---------

Co-authored-by: Christian Pillsbury <cpillsbury@mux.com>
Co-authored-by: Gary Katsevman <git@gkatsev.com>
  • Loading branch information
@luwes @cjpillsbury @gkatsev
3 people authored Apr 17, 2023
1 parent 502f83f commit 33cd238
Show file tree
Hide file tree
Showing 11 changed files with 131 additions and 155 deletions.
118 changes: 60 additions & 58 deletions docs/src/pages/en/styling.md
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/js/experimental/media-captions-listbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { parseTextTracksStr, formatTextTrackObj } from '../utils/captions.js';
import { toggleSubsCaps } from '../utils/captions.js';

const captionsIndicatorInlineStyle = `
fill: var(--media-icon-color, #eee);
fill: var(--media-icon-color, var(--media-primary-color, rgb(238 238 238)));
height: var(--media-captions-indicator-height, 1em);
vertical-align: var(--media-captions-indicator-vertical-align, bottom);
margin-inline-start: 1ch;
Expand Down
18 changes: 11 additions & 7 deletions src/js/experimental/media-chrome-listbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,38 @@ import { window, document } from '../utils/server-safe-globals.js';

const template = document.createElement('template');

template.innerHTML = `
template.innerHTML = /*html*/`
<style>
:host ul {
font: var(--media-font,
var(--media-font-weight, normal)
var(--media-font-size, 1em) /
var(--media-text-content-height, var(--media-control-height, 24px))
var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif));
color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238)));
background: var(--media-listbox-background, var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .8))));
list-style: none;
display: inline-flex;
flex-direction: column;
gap: 0.5em;
margin: 0;
padding: 0.5em;
background-color: var(--media-listbox-background, var(--media-control-background, rgba(10,10,15, .8)));
color: var(--media-text-color, white);
font-family: helvetica neue, segoe ui, roboto, arial, sans-serif;
}
::slotted(media-chrome-listitem[tabindex="0"]:focus-visible),
media-chrome-listitem[tabindex="0"]:focus-visible {
box-shadow: inset 0 0 0 2px rgba(27, 127, 204, 0.9);
box-shadow: inset 0 0 0 2px rgb(27 127 204 / .9);
outline: 0;
}
::slotted(media-chrome-listitem[aria-selected="true"]),
media-chrome-listitem[aria-selected="true"] {
background-color: var(--media-listbox-selected-background, rgba(122,122,184, .8));
background-color: var(--media-listbox-selected-background, rgb(122 122 184 / .8));
}
::slotted(media-chrome-listitem:hover),
media-chrome-listitem:hover {
background-color: var(--media-listbox-hover-background, rgba(82,82,122, .8));
background-color: var(--media-listbox-hover-background, rgb(82 82 122 / .8));
outline: var(--media-listbox-hover-outline, none);
}
</style>
Expand Down
30 changes: 13 additions & 17 deletions src/js/media-chrome-button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,33 @@ import { window, document } from './utils/server-safe-globals.js';

const template = document.createElement('template');

template.innerHTML = `
template.innerHTML = /*html*/`
<style>
:host {
font: var(--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));
color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238)));
background: var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .7)));
padding: var(--media-control-padding, 10px);
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
box-sizing: border-box;
background: var(--media-control-background, rgba(20,20,30, 0.7));
padding: var(--media-control-padding, 10px);
${/* Vertically center any text */''}
font-size: 14px;
line-height: var(--media-text-content-height, var(--media-control-height, 24px));
font-weight: bold;
color: #fff;
transition: background 0.15s linear;
transition: background .15s linear;
pointer-events: auto;
cursor: pointer;
font-family: helvetica neue, segoe ui, roboto, arial, sans-serif;
}
${/*
Only show outline when keyboard focusing.
https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
*/''}
:host(:focus-visible) {
box-shadow: inset 0 0 0 2px rgba(27, 127, 204, 0.9);
box-shadow: inset 0 0 0 2px rgb(27 127 204 / .9);
outline: 0;
}
${/*
Expand All @@ -46,15 +42,15 @@ template.innerHTML = `
}
:host(:hover) {
background: var(--media-control-hover-background, rgba(50,50,70, 0.7));
background: var(--media-control-hover-background, rgba(50 50 70 / .7));
}
svg, img, ::slotted(svg), ::slotted(img) {
width: var(--media-button-icon-width);
height: var(--media-button-icon-height, var(--media-control-height, 24px));
transform: var(--media-button-icon-transform);
transition: var(--media-button-icon-transition);
fill: var(--media-icon-color, #eee);
fill: var(--media-icon-color, var(--media-primary-color, rgb(238 238 238)));
vertical-align: middle;
max-width: 100%;
max-height: 100%;
Expand Down
22 changes: 11 additions & 11 deletions src/js/media-chrome-range.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const thumbStyles = `
width: var(--media-range-thumb-width, 10px);
border: var(--media-range-thumb-border, none);
border-radius: var(--media-range-thumb-border-radius, 10px);
background: var(--media-range-thumb-background, #fff);
background: var(--media-range-thumb-background, var(--media-primary-color, rgb(238 238 238)));
box-shadow: var(--media-range-thumb-box-shadow, 1px 1px 1px transparent);
cursor: pointer;
transition: var(--media-range-thumb-transition, none);
Expand All @@ -25,28 +25,28 @@ const trackStyles = `
border: var(--media-range-track-border, none);
outline: var(--media-range-track-outline);
outline-offset: var(--media-range-track-outline-offset);
border-radius: var(--media-range-track-border-radius, 0);
background: var(--media-range-track-progress-internal, var(--media-range-track-background, #eee));
border-radius: var(--media-range-track-border-radius, 1px);
background: var(--media-range-track-progress-internal, var(--media-range-track-background, rgb(255 255 255 / .2)));
box-shadow: var(--media-range-track-box-shadow, none);
transition: var(--media-range-track-transition, none);
transform: translate(var(--media-range-track-translate-x, 0), var(--media-range-track-translate-y, 0));
cursor: pointer;
`;

template.innerHTML = `
template.innerHTML = /*html*/`
<style>
:host {
--thumb-height: var(--media-range-thumb-height, 10px);
--track-height: var(--media-range-track-height, 4px);
--_focus-box-shadow: var(--media-focus-box-shadow, inset 0 0 0 2px rgba(27, 127, 204, 0.9));
--_focus-box-shadow: var(--media-focus-box-shadow, inset 0 0 0 2px rgb(27 127 204 / .9));
--_media-range-padding: var(--media-range-padding, var(--media-control-padding, 10px));
vertical-align: middle;
box-sizing: border-box;
display: inline-block;
position: relative;
background: var(--media-control-background, rgba(20,20,30, 0.7));
transition: background 0.15s linear;
background: var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .7)));
transition: background .15s linear;
width: 100px;
height: calc(var(--media-control-height, 24px) + 2 * var(--_media-range-padding));
padding-left: var(--media-range-padding-left, var(--_media-range-padding));
Expand All @@ -66,7 +66,7 @@ template.innerHTML = `
}
:host(:hover) {
background: var(--media-control-hover-background, rgba(50,50,60, 0.7));
background: var(--media-control-hover-background, rgb(50 50 70 / .7));
}
#container {
Expand Down Expand Up @@ -121,11 +121,11 @@ template.innerHTML = `
min-width: 40px;
width: var(--media-range-track-width, 100%);
height: var(--track-height);
border-radius: var(--media-range-track-border-radius, 0);
border-radius: var(--media-range-track-border-radius, 1px);
position: absolute;
top: 50%;
transform: translate(var(--media-range-track-translate-x, 0px), calc(var(--media-range-track-translate-y, 0px) - 50%));
background: var(--media-range-track-background, #333);
background: var(--media-range-track-background, rgb(255 255 255 / .2));
}
#pointer {
Expand Down Expand Up @@ -326,7 +326,7 @@ class MediaChromeRange extends window.HTMLElement {
}

let colorArray = [
['var(--media-range-bar-color, #fff)', rangePercent + thumbPercent],
['var(--media-range-bar-color, var(--media-primary-color, rgb(238 238 238)))', rangePercent + thumbPercent],
['var(--media-range-track-color, transparent)', 100],
];

Expand Down
2 changes: 1 addition & 1 deletion src/js/media-control-bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ template.innerHTML = `
${/* Need position to display above video for some reason */''}
box-sizing: border-box;
display: var(--media-control-display, var(--media-control-bar-display, inline-flex));
color: var(--media-icon-color, #eee);
color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238)));
--media-loading-icon-width: 44px;
}
Expand Down
4 changes: 2 additions & 2 deletions src/js/media-loading-indicator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const loadingIndicatorIcon = `
</svg>
`;

template.innerHTML = `
template.innerHTML = /*html*/`
<style>
:host {
display: var(--media-control-display, var(--media-loading-indicator-display, inline-block));
Expand Down Expand Up @@ -52,7 +52,7 @@ template.innerHTML = `
svg, img, ::slotted(svg), ::slotted(img) {
width: var(--media-loading-icon-width, 100px);
height: var(--media-loading-icon-height);
fill: var(--media-icon-color, #fff);
fill: var(--media-icon-color, var(--media-primary-color, rgb(238 238 238)));
vertical-align: middle;
}
</style>
Expand Down
20 changes: 10 additions & 10 deletions src/js/media-text-display.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,23 @@ import { window, document } from './utils/server-safe-globals.js';

const template = document.createElement('template');

template.innerHTML = `
template.innerHTML = /*html*/`
<style>
:host {
font: var(--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));
color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238)));
background: var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .7)));
padding: var(--media-control-padding, 10px);
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: middle;
box-sizing: border-box;
background: var(--media-control-background, rgba(20,20,30, 0.7));
padding: var(--media-control-padding, 10px);
font-size: 14px;
line-height: var(--media-text-content-height, var(--media-control-height, 24px));
font-family: helvetica neue, segoe ui, roboto, arial, sans-serif;
text-align: center;
color: #ffffff;
pointer-events: auto;
}
Expand All @@ -30,7 +30,7 @@ template.innerHTML = `
https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
*/''}
:host(:focus-visible) {
box-shadow: inset 0 0 0 2px rgba(27, 127, 204, 0.9);
box-shadow: inset 0 0 0 2px rgb(27 127 204 / .9);
outline: 0;
}
Expand Down
17 changes: 6 additions & 11 deletions src/js/media-time-range.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,12 @@ const updateAriaValueText = (el) => {
};

const template = document.createElement('template');
template.innerHTML = `
template.innerHTML = /*html*/`
<style>
:host {
--media-preview-background-color: rgba(20,20,30, .5);
--media-preview-background: var(--media-control-background,
var(--media-preview-background-color));
--media-preview-border-radius: 3px;
--media-box-padding-left: 10px;
--media-box-padding-right: 10px;
color: #fff;
}
#preview-rail,
Expand Down Expand Up @@ -72,8 +68,8 @@ template.innerHTML = `
${/* delay changing these CSS props until the preview box transition is ended */''}
transition: visibility 0s .25s;
transition-delay: calc(var(--media-preview-transition-delay-out, 0s) + var(--media-preview-transition-duration-out, .25s));
background: var(--media-preview-time-background, var(--media-preview-background));
box-shadow: var(--media-preview-thumbnail-box-shadow, 0 0 4px rgba(0,0,0, .2));
background: var(--media-preview-time-background, var(--media-preview-background, var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .7)))));
box-shadow: var(--media-preview-thumbnail-box-shadow, 0 0 4px rgb(0 0 0 / .2));
max-width: var(--media-preview-thumbnail-max-width, 180px);
max-height: var(--media-preview-thumbnail-max-height, 160px);
min-width: var(--media-preview-thumbnail-min-width, 120px);
Expand All @@ -91,18 +87,17 @@ template.innerHTML = `
media-preview-time-display,
::slotted(media-preview-time-display) {
color: unset;
min-width: 0;
${/* delay changing these CSS props until the preview box transition is ended */''}
transition: min-width 0s, border-radius 0s;
transition-delay: calc(var(--media-preview-transition-delay-out, 0s) + var(--media-preview-transition-duration-out, .25s));
background: var(--media-preview-time-background, var(--media-preview-background));
background: var(--media-preview-time-background, var(--media-preview-background, var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .7)))));
border-radius: var(--media-preview-time-border-radius,
var(--media-preview-border-radius) var(--media-preview-border-radius)
var(--media-preview-border-radius) var(--media-preview-border-radius));
padding: var(--media-preview-time-padding, 1px 10px 0);
margin: var(--media-preview-time-margin, 0 0 10px);
text-shadow: var(--media-preview-time-text-shadow, 0 0 4px rgba(0,0,0, .75));
text-shadow: var(--media-preview-time-text-shadow, 0 0 4px rgb(0 0 0 / .75));
}
:host([${MediaUIAttributes.MEDIA_PREVIEW_IMAGE}]) media-preview-time-display,
Expand Down Expand Up @@ -329,7 +324,7 @@ class MediaTimeRange extends MediaChromeRange {

const buffPercent = (relativeBufferedEnd / relativeMax) * 100;
colorsArray.splice(1, 0, [
'var(--media-time-buffered-color, rgba(255,255,255, .4))',
'var(--media-time-buffered-color, rgb(255 255 255 / .4))',
buffPercent,
]);
return colorsArray;
Expand Down
37 changes: 13 additions & 24 deletions src/js/themes/demuxed-2022.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,38 +11,27 @@ import { window, document } from '../utils/server-safe-globals.js';
import { MediaThemeElement } from '../media-theme-element.js';

const template = document.createElement('template');
template.innerHTML = `
template.innerHTML = /*html*/`
<style>
:host {
--primary-color: black;
--secondary-color: transparent;
--tertiary-color: #7596CC;
}
:host([stream-type="live"]) media-time-range, :host([stream-type="live"]) media-time-display {
opacity: 0;
}
media-controller {
width: 100%;
aspect-ratio: 16 / 9;
--media-control-background: var(--secondary-color);
--media-control-hover-background: transparent;
--media-icon-color: var(--primary-color);
--media-primary-color: black;
--media-secondary-color: transparent;
--media-tertiary-color: #7596CC;
--media-text-color: white;
--media-control-hover-background: var(--media-secondary-color);
--media-range-track-height: 6px;
--media-range-bar-color: white;
--media-range-track-background: rgba(0,0,0,0.4);
--media-range-track-border-radius: 9999px;
--media-range-thumb-background: var(--tertiary-color);
--media-range-thumb-background: var(--media-tertiary-color);
--media-range-thumb-width: 14px;
--media-range-thumb-height: 14px;
}
media-controller[media-is-fullscreen] {
aspect-ratio: auto;
:host([stream-type="live"]) media-time-range, :host([stream-type="live"]) media-time-display {
opacity: 0;
}
media-control-bar {
Expand Down Expand Up @@ -84,7 +73,7 @@ template.innerHTML = `
}
.small-button:hover {
box-shadow: 0 0 0 calc(2px) var(--tertiary-color);
box-shadow: 0 0 0 calc(2px) var(--media-tertiary-color);
}
media-cinema-button.small-button {
Expand All @@ -101,12 +90,12 @@ template.innerHTML = `
justify-items: center;
height: 96px;
width: 96px;
background: rgba(0,0,0,0.8);
background: rgb(0 0 0 / 0.8);
border-radius: 9999px;
}
div[slot="centered-chrome"] media-play-button:hover {
box-shadow: 0 0 0 calc(2px) var(--tertiary-color);
box-shadow: 0 0 0 calc(2px) var(--media-tertiary-color);
}
div[slot="centered-chrome"] media-play-button svg {
Expand Down
Loading

2 comments on commit 33cd238

@vercel
Copy link

@vercel vercel bot commented on 33cd238 Apr 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

media-chrome – ./

media-chrome-git-main-mux.vercel.app
media-chrome-mux.vercel.app
media-chrome.mux.dev
media-chrome.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 33cd238 Apr 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

media-chrome-docs – ./docs

media-chrome-docs.vercel.app
media-chrome-docs-mux.vercel.app
media-chrome-docs-git-main-mux.vercel.app
media-chrome.org
www.media-chrome.org

Please sign in to comment.