feat(ipub): soundtrack support with fade transition

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

@@ -64,12 +64,14 @@ ipub-body {
     flex-direction: column;
     align-items: center;
 
-    & > *:first-child:not(ipub-background),
-    & > ipub-background:first-child + *:first-of-type {
+    & > *:first-child:not(ipub-background):not(ipub-soundtrack),
+    & > ipub-background:first-of-type + *:first-of-type:not(ipub-soundtrack),
+    & > ipub-soundtrack:first-of-type + *:first-of-type:not(ipub-background) {
       margin-top: var(--ipub-padding-t);
+      margin-bottom: calc(var(--ipub-gap) / 2);
     }
 
-    & > *:not(ipub-background) {
+    & > *:not(ipub-background):not(ipub-soundtrack) {
       margin-top: calc(var(--ipub-gap) / 2);
       margin-right: var(--ipub-padding-r);
       margin-left: var(--ipub-padding-l);
@@ -77,43 +79,151 @@ ipub-body {
     }
 
     & > *:last-child:not(ipub-background),
-    & > ipub-background:last-child + *:last-of-type {
+    & > *:last-child:not(ipub-soundtrack),
+    & > ipub-background:last-of-type + *:last-of-type:not(ipub-soundtrack),
+    & > ipub-soundtrack:last-of-type + *:last-of-type:not(ipub-background) {
+      margin-top: calc(var(--ipub-gap) / 2);
       margin-bottom: var(--ipub-padding-b);
     }
   }
 }
 
+ipub-soundtrack {
+  display: inline-block;
+
+  z-index: var(--z-overlays);
+
+  --ipub-color: red;
+
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 0;
+  position: sticky;
+  align-self: start;
+
+  border-top: 0.1rem dashed var(--ipub-color);
+
+  figure {
+    margin: 0;
+    height: 1.5rem;
+    font-size: small;
+    width: 100%;
+
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    flex: 1;
+
+    label {
+      background-color: var(--ipub-color);
+      border-end-end-radius: 0.5rem;
+
+      padding: 0.1rem 0.4rem;
+      width: max-content;
+      max-width: 50%;
+      height: 100%;
+      white-space: nowrap;
+
+      display: flex;
+      align-items: center;
+    }
+
+    &:has(input:checked) label {
+      border-end-end-radius: 0;
+    }
+
+    figcaption::before {
+      content: "0 "; /* TODO: change to an icon and better positioning */
+    }
+
+    figcaption::after {
+      content: " >"; /* TODO: change to an icon and better positioning */
+    }
+    &:has(input:checked) figcaption::after {
+      content: " <"; /* TODO: change to an icon and better positioning */
+    }
+
+    input {
+      width: 0;
+      height: 0;
+      display: none;
+    }
+
+    &:has(input) audio {
+      width: 0;
+      height: 0;
+    }
+
+    &:has(input:checked) audio {
+      width: 100%;
+      @media (width >= 40rem) {
+        width: 70%;
+      }
+      height: 100%;
+
+      background-color: var(--ipub-color);
+      @media (width >= 40rem) {
+        border-end-end-radius: 0.5rem;
+      }
+
+      padding: 0.1rem 0.4rem;
+    }
+
+    audio::-webkit-media-controls-enclosure {
+      background-color: transparent;
+      padding: 0;
+      border-radius: 0px;
+    }
+    audio::-webkit-media-controls-panel {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  &[playing] figure figcaption::before {
+    content: "P "; /* TODO: change to an icon and better positioning */
+  }
+}
+
 ipub-background {
+  --ipub-mask: linear-gradient(
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 1) calc(100% + calc(var(--ipub-fade, 100%) * -1))
+  );
+
   --ipub-width: 100vw;
   --ipub-height: 100vh;
 
-  &[sticky] {
-    display: inline-block;
-    top: 0;
-    left: 0;
-    width: 0;
-    height: 0;
-    position: sticky;
-    align-self: start;
+  display: inline-block;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  position: sticky;
+  align-self: start;
+
+  &:first-of-type,
+  &[nofade] {
+    --ipub-mask: unset;
   }
 
-  &[fade] img {
+  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);
+    mask-image: var(--ipub-mask);
+    -webkit-mask-image: var(--ipub-mask);
   }
 
   & > picture {
+    position: absolute;
+    top: 0;
+    left: 0;
     display: block;
     width: var(--ipub-width);
     height: var(--ipub-height);
@@ -125,6 +235,9 @@ ipub-background {
   }
   /* Support standalone img element */
   & > img {
+    position: absolute;
+    top: 0;
+    left: 0;
     display: block;
     object-fit: cover;
     width: var(--ipub-width);