diff options
Diffstat (limited to 'readme.md')
| -rw-r--r-- | readme.md | 28 |
1 files changed, 27 insertions, 1 deletions
@@ -174,7 +174,33 @@ If you do not wish to use Vi, you can set your own `ads.tagUrl` [option](#option # Advanced -## SASS +## Custom CSS + +If you want to change any design tokens used for the rendering of the player, you can do so using [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). + +Here's a list of the properties and what they are used for: + +| Name | Description | Fallback | +| ------------------- | ----------------------------------------------- | --------------------- | +| `--plyr-color-main` | The main branding color - used for highlighting | `hsl(198, 100%, 50%)` | + +You can set them in your CSS: + +```css +.player { + --plyr-color-main: #1ac266; +} +``` + +...or in your HTML: + +```html +<video class="player" style="--plyr-color-main: #1ac266;"> + ... +</vieo> +``` + +### SASS You can use `plyr.scss` file included in `/src/sass` as part of your build and change variables to suit your design. The SASS requires you to use [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) (you should be already!) as all declarations use the W3C definitions. |