06 Customize CSS

Overwrite styles with custom properties

The generated CSS has a lot of custom properties with default values. The key to the property is the same as in the _Variables.scss file, the $ ist just replaced width --. So, for example if you want to change the size of the play button, you could do it like that in your css:

:root {
    --prettyembed-button-play-size: 60px;
}

If you want, you can also target single player with this with a style attribute.

Disable inclusion of the CSS file

If you want to load your own CSS, you can disable it like that:

Jonnitto:
  PrettyEmbed:
    includeAssets:
      css: false

If you use SCCS in your build pipeline, you can adjust the look and feel of Main.scss with following variables:

// Buttons (play / pause)
$prettyembed-button-play-size: 72px !default;
$prettyembed-button-pause-size: calc($prettyembed-button-play-size / 2) !default;
$prettyembed-button-pause-margin: calc($prettyembed-button-pause-size / 2) !default;
$prettyembed-button-opacity: 0.9 !default;
$prettyembed-button-scale: 0.8 !default;
$prettyembed-button-scale-hover: 1 !default;
$prettyembed-button-scale-active: 0.9 !default;
$prettyembed-button-foreground-color: #fff !default;
$prettyembed-button-background-color: #000 !default;
$prettyembed-button-background-opactiy: 0.4 !default;
$prettyembed-button-background-stroke: 5 !default;

// Lightbox
$prettyembed-lightbox-include: true !default;
$prettyembed-lightbox-overlay-background: rgba(11, 11, 11, 0.8) !default;
$prettyembed-lightbox-padding: 15px !default;
$prettyembed-lightbox-max-width: 900px !default;
$prettyembed-lightbox-shadow: 0 0 8px rgba(#000, 0.6) !default;
$prettyembed-lightbox-z-index: 5500 !default;
$prettyembed-lightbox-close-size: 30px !default;
$prettyembed-lightbox-close-opacity: 0.65 !default;
$prettyembed-lightbox-close-opacity-hover: 1 !default;
$prettyembed-lightbox-close-color: #fff !default;
$prettyembed-lightbox-backdrop-filter: blur(5px) !default;

// GDPR Message
$prettyembed-gdpr-include: true !default;
$prettyembed-gdpr-color: #fff !default;
$prettyembed-gdpr-font-size-breakpoint: 640px !default;
$prettyembed-gdpr-font-size-mobile: 0.8rem !default;
$prettyembed-gdpr-font-size: 1rem !default;
$prettyembed-gdpr-gap: 1em !default;
$prettyembed-gdpr-padding: 0.5em !default;
$prettyembed-gdpr-explantation-font-size: 0.9em !default;
$prettyembed-gdpr-explantation-max-width: 60ch !default;
$prettyembed-gdpr-button-gap: 1em !default;
$prettyembed-gdpr-button-padding: 0.5em 1em !default;
$prettyembed-gdpr-button-border-radius: 0.25em !default;

$prettyembed-gdpr-button-accept-color: #fff !default;
$prettyembed-gdpr-button-accept-background-color: #16a34a !default;
$prettyembed-gdpr-button-accept-border: 1px solid #16a34a !default;
$prettyembed-gdpr-button-accept-color-hover: #fff !default;
$prettyembed-gdpr-button-accept-background-color-hover: #15803d !default;
$prettyembed-gdpr-button-accept-border-color-hover: #15803d !default;

$prettyembed-gdpr-button-external-color: #fff !default;
$prettyembed-gdpr-button-external-background-color: transparent !default;
$prettyembed-gdpr-button-external-border: 1px solid #fff !default;
$prettyembed-gdpr-button-external-color-hover: #000 !default;
$prettyembed-gdpr-button-external-background-color-hover: #fff !default;
$prettyembed-gdpr-button-external-border-color-hover: false !default;

$prettyembed-gdpr-backdrop-filter: blur(5px) !default;
$prettyembed-gdpr-overlay-color: #0b0b0b !default;
$prettyembed-gdpr-overlay-opacity: 0.8 !default;

Because all variables have the !default flag, the variables don't get overwritten if you declare them before you import Main.scss. Like that, most of the frequent adjustments can be easily achieved.