comicverse/.epub/example/OEBPS/styles/stylesheet.css

.body {
  -epub-writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  direction: ltr;
  /* direction: rtl; */
  writing-mode: horizontal-tb;
  position: relative;
  margin: 0;

  max-width: 100vw;
}

ipub-content {
  --ipub-padding: 0%;
  --ipub-gap: 0%;
  --ipub-padding-x: var(--ipub-padding, 0%);
  --ipub-padding-y: var(--ipub-padding, 0%);
  --ipub-padding-t: var(--ipub-padding-y, 0%);
  --ipub-padding-r: var(--ipub-padding-x, 0%);
  --ipub-padding-b: var(--ipub-padding-y, 0%);
  --ipub-padding-l: var(--ipub-padding-x, 0%);

  & > article,
  & > main,
  & > section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    & > *:first-child:not(ipub-background),
    & > ipub-background:first-child + *:first-of-type {
      margin-top: var(--ipub-padding-t);
    }

    & > *:not(ipub-background) {
      margin-top: calc(var(--ipub-gap) / 2);
      margin-right: var(--ipub-padding-r);
      margin-left: var(--ipub-padding-l);
      margin-bottom: calc(var(--ipub-gap) / 2);
    }

    & > *:last-child:not(ipub-background),
    & > ipub-background:last-child + *:last-of-type {
      margin-bottom: var(--ipub-padding-b);
    }
  }
}

ipub-background {
  --ipub-width: 100vw;
  --ipub-height: 100vh;

  &[sticky] {
    display: inline-block;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    position: sticky;
    align-self: start;
  }

  &[fade] img {
    /* For testing */
    /* background-image: linear-gradient( */
    /*   rgba(266, 0, 0, 1) 0%, */
    /*   rgba(0, 266, 0, 1) calc(100% + calc(var(--ipub-fade, 100%) * -1)), */
    /*   rgba(266, 0, 266, 1) 100% */
    /* ) !important; */
    --mask: linear-gradient(
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) calc(100% + calc(var(--ipub-fade, 100%) * -1))
    ) !important;
    /* background-image: var(--mask); */
    mask-image: var(--mask);
    -webkit-mask-image: var(--mask);
  }

  & > picture {
    display: block;
    width: var(--ipub-width);
    height: var(--ipub-height);
    & > img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
  /* Support standalone img element */
  & > img {
    display: block;
    object-fit: cover;
    width: var(--ipub-width);
    height: var(--ipub-height);
  }
}

  position: relative;
}

[data-ipub-element="image"] {
  width: var(--ipub-width, unset);
  height: var(--ipub-height, unset);
  background-image: var(--ipub-image, unset);
  background-repeat: no-repeat;
  background-size: cover;
  display: block;

  img {
    max-width: 100%;
    max-height: 100%;
  }
}

[data-ipub-element="interaction"] {
  position: absolute;
  left: var(--ipub-x, 0%);
  top: var(--ipub-y, 0%);
  border-radius: var(--ipub-radius, unset);
  width: var(--ipub-width, unset);
  height: var(--ipub-height, unset);
  transform: translate(
    var(--ipub-origin-offset-x, 0%),
    var(--ipub-origin-offset-y, 0%)
  );
  aspect-ratio: var(--ipub-ratio, unset);
  /* 
  * The opacity would be, by default, zero. Here it is 0.3 for easier debugging and
  * showing of the example ebook 
  */
  background-color: red;
  opacity: 0.3;
}

a[data-ipub-element="interaction"] {
  /* The text inside the interaction anchor are for accessibility purposes */
  font-size: 0px;
}

}