embedded-media.css in Drupal 10

Embedded Media.

File

core/themes/olivero/css/components/embedded-media.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Embedded Media.
 */

/*
 * Media query breakpoints.
 * Processed by postcss/postcss-custom-media.
 */

/* Navigation related breakpoints */

/* Grid related breakpoints */

/* Grid shifts from 6 to 14 columns. */

/* Width of the entire grid maxes out. */

figure {
  background: var(--color--gray-100);
}

[dir="ltr"] figcaption {
  padding-left: var(--sp0-5);
}

[dir="rtl"] figcaption {
  padding-right: var(--sp0-5);
}

[dir="ltr"] figcaption {
  padding-right: var(--sp0-5);
}

[dir="rtl"] figcaption {
  padding-left: var(--sp0-5);
}

figcaption {
  padding-top: var(--sp0-5);
  padding-bottom: var(--sp0-5);
  color: var(--color-text-neutral-medium);
  background: var(--color--gray-100);
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-style: italic;
  line-height: var(--sp)
}

@media (min-width: 31.25rem) {

[dir="ltr"] figcaption {
    padding-left: var(--sp);
  }

[dir="rtl"] figcaption {
    padding-right: var(--sp);
  }

[dir="ltr"] figcaption {
    padding-right: var(--sp);
  }

[dir="rtl"] figcaption {
    padding-left: var(--sp);
  }

figcaption {
    padding-top: var(--sp);
    padding-bottom: var(--sp)
}
  }

[dir="ltr"] .align-right {
  margin-left: 0;
}

[dir="rtl"] .align-right {
  margin-right: 0;
}

[dir="ltr"] .align-right {
  margin-right: 0;
}

[dir="rtl"] .align-right {
  margin-left: 0;
}

.align-right {
  float: none; /* Override core's align.module.css. */
  max-width: 100%;
  margin-top: var(--sp3);
  margin-bottom: var(--sp3)
}

@media (min-width: 43.75rem) {

[dir="ltr"] .align-right {
    float: right;
  }

[dir="rtl"] .align-right {
    float: left;
  }

[dir="ltr"] .align-right {
    margin-left: var(--sp);
  }

[dir="rtl"] .align-right {
    margin-right: var(--sp);
  }

[dir="ltr"] .align-right {
    margin-right: 0;
  }

[dir="rtl"] .align-right {
    margin-left: 0;
  }

.align-right {
    max-width: 50%;
    margin-top: var(--sp);
    margin-bottom: var(--sp)
}
  }

/* Pull out of grid if nested in content narrow layout. */

.layout--content-narrow .align-right,
.layout--pass--content-narrow > * .align-right {
  /* @todo this can be simplified. */
}

@media (min-width: 43.75rem) {

[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
.layout--pass--content-narrow > * .align-right {
    margin-right: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
  }

[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
.layout--pass--content-narrow > * .align-right {
    margin-left: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
  }
  }

@media (min-width: 62.5rem) {

[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
.layout--pass--content-narrow > * .align-right {
    margin-right: calc(-2 * ((var(--grid-col-width) + var(--grid-gap))));
  }

[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
.layout--pass--content-narrow > * .align-right {
    margin-left: calc(-2 * ((var(--grid-col-width) + var(--grid-gap))));
  }
  }

@media (min-width: 75rem) {

[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
.layout--pass--content-narrow > * .align-right {
    margin-right: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
  }

[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
.layout--pass--content-narrow > * .align-right {
    margin-left: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
  }
  }

@media (min-width: 90rem) {

[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
.layout--pass--content-narrow > * .align-right {
    margin-right: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
  }

[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
.layout--pass--content-narrow > * .align-right {
    margin-left: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
  }
  }

[dir="ltr"] .align-left {
  margin-left: 0;
}

[dir="rtl"] .align-left {
  margin-right: 0;
}

[dir="ltr"] .align-left {
  margin-right: 0;
}

[dir="rtl"] .align-left {
  margin-left: 0;
}

.align-left {
  float: none; /* Override core's align.module.css. */
  max-width: 100%;
  margin-top: var(--sp3);
  margin-bottom: var(--sp3)
}

@media (min-width: 43.75rem) {

[dir="ltr"] .align-left {
    float: left;
  }

[dir="rtl"] .align-left {
    float: right;
  }

[dir="ltr"] .align-left {
    margin-left: 0;
  }

[dir="rtl"] .align-left {
    margin-right: 0;
  }

[dir="ltr"] .align-left {
    margin-right: var(--sp2);
  }

[dir="rtl"] .align-left {
    margin-left: var(--sp2);
  }

.align-left {
    max-width: 50%;
    margin-top: var(--sp);
    margin-bottom: var(--sp) /* Extra right margins in case of aligning next to lists. */
}
  }

/* Pull out of grid if nested in content narrow layout. */

@media (min-width: 43.75rem) {

[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"] 
.layout--pass--content-narrow > * .align-left {
    margin-left: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
  }

[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"] 
.layout--pass--content-narrow > * .align-left {
    margin-right: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
  }
  }

.align-center img,
.align-center video,
.align-center audio {
  margin-left: auto;
  margin-right: auto;
}

.media-oembed-content {
  display: block;
  max-width: 100%;
}