Skip to content

Commit

Permalink
docs: remove remote svg example from styling guide bc will not work w…
Browse files Browse the repository at this point in the history
…ithout additional effort.
  • Loading branch information
cjpillsbury committed May 10, 2023
1 parent c3ae0d7 commit 9175d85
Show file tree
Hide file tree
Showing 3 changed files with 0 additions and 32 deletions.
5 changes: 0 additions & 5 deletions docs/public/assets/pause.svg

This file was deleted.

4 changes: 0 additions & 4 deletions docs/public/assets/play.svg

This file was deleted.

23 changes: 0 additions & 23 deletions docs/src/pages/en/styling.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -113,29 +113,6 @@ Earlier, I mentioned that you can use whatever you want for your "icons". This i
</media-controller>`}
/>

!!!WORDS ABOUT REMOTE SVG!!!

{/* !!!UPDATE URLS BEFORE FINAL MERGE!!! */}
<ComponentSandpack
client:load
css={`media-play-button {
--media-icon-color: mistyrose;
--media-control-background: rgb(27 54 93 / 0.85);
--media-control-hover-background: rgb(128 0 0 / 0.85);
}`}
html={`<media-controller>
<video
slot="media"
src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
muted
></video>
<media-play-button>
<svg slot="play"><use href="https://media-chrome-docs-git-fork-cjpillsbury-docs-styling-guide-mux.vercel.app/assets/play.svg#play"/></svg>
<svg slot="pause"><use href="https://media-chrome-docs-git-fork-cjpillsbury-docs-styling-guide-mux.vercel.app/assets/play.svg/pause.svg#pause"/></svg>
</media-play-button>
</media-controller>`}
/>

## Styling Multiple Components

In the previous example, I ended up using different CSS variables for my font-based icons vs. the SVG-based ones. This also applies for other color styles used in Media Chrome components. Since folks will typically want a consistent palette for their media player, Media Chrome has a couple of "color palette" CSS variables that work as defaults for some of the CSS variables used above: `--media-primary-color`, which you can think of as a "foreground" color, and `--media-secondary-color`, which you can think of as a "background" color. This makes styling multiple Media Chrome components easier with just a few CSS variables.
Expand Down

0 comments on commit 9175d85

Please sign in to comment.