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;
}

[data-ipub-element="content"] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  height: 100%;
}

[data-ipub-element="content"] > [data-ipub-element="page"] {
  margin: 5% 10%;
}

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;
}

}