@slidev-react/client 0.2.5

package/src/theme/mark.css

@@ -0,0 +1,379 @@
+.slide-mark {
+  display: inline-block;
+  position: relative;
+  border-radius: var(--slide-mark-radius);
+  vertical-align: baseline;
+  line-height: inherit;
+  isolation: isolate;
+}
+
+.slide-mark-target {
+  display: inline-block;
+  line-height: inherit;
+  position: relative;
+  z-index: 1;
+}
+
+.slide-mark-overlay {
+  position: absolute;
+  pointer-events: none;
+}
+
+.slide-mark--highlight .slide-mark-overlay {
+  left: calc(var(--mark-pad-left) * -1);
+  right: calc(var(--mark-pad-right) * -1);
+  top: 0.42em;
+  bottom: -0.05em;
+  z-index: 0;
+  border-radius: 0.3em 0.16em 0.34em 0.22em;
+  background:
+    repeating-linear-gradient(
+      96deg,
+      rgb(255 255 255 / 0.045) 0 0.08em,
+      rgb(255 255 255 / 0) 0.08em 0.2em,
+      rgb(0 0 0 / 0.012) 0.2em 0.28em,
+      rgb(255 255 255 / 0) 0.28em 0.42em
+    ),
+    linear-gradient(
+      180deg,
+      rgb(255 255 255 / 0.05) 0%,
+      color-mix(in srgb, var(--mark-color) 92%, rgb(255 255 255 / 0) 8%) 16%,
+      var(--mark-color) 48%,
+      color-mix(in srgb, var(--mark-color) 94%, rgb(0 0 0 / 0) 6%) 82%,
+      rgb(255 255 255 / 0.04) 100%
+    );
+  opacity: 0.9;
+  transform: rotate(-0.75deg);
+  box-shadow:
+    0 0.01em 0 rgb(255 255 255 / 0.06) inset,
+    0 -0.015em 0 rgb(0 0 0 / 0.015) inset;
+}
+
+.slide-mark--highlight .slide-mark-overlay::before,
+.slide-mark--highlight .slide-mark-overlay::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--mark-color);
+  pointer-events: none;
+}
+
+.slide-mark--highlight .slide-mark-overlay::before {
+  inset: -0.01em 0.08em 0.03em -0.03em;
+  border-radius: 0.24em 0.25em 0.34em 0.18em;
+  opacity: 0.34;
+  background:
+    repeating-linear-gradient(
+      92deg,
+      rgb(255 255 255 / 0.035) 0 0.07em,
+      rgb(255 255 255 / 0) 0.07em 0.16em,
+      rgb(0 0 0 / 0.01) 0.16em 0.22em,
+      rgb(255 255 255 / 0) 0.22em 0.34em
+    ),
+    linear-gradient(
+      180deg,
+      rgb(255 255 255 / 0.02) 0%,
+      var(--mark-color) 28%,
+      color-mix(in srgb, var(--mark-color) 95%, rgb(255 255 255 / 0) 5%) 100%
+    );
+  transform: rotate(0.45deg);
+}
+
+.slide-mark--highlight .slide-mark-overlay::after {
+  inset: 0.04em -0.05em -0.01em 0.05em;
+  border-radius: 0.34em 0.14em 0.28em 0.24em;
+  opacity: 0.12;
+  background:
+    linear-gradient(
+      180deg,
+      rgb(255 255 255 / 0.04) 0%,
+      rgb(255 255 255 / 0) 36%,
+      rgb(0 0 0 / 0.012) 100%
+    ),
+    repeating-linear-gradient(
+      100deg,
+      rgb(255 255 255 / 0.03) 0 0.06em,
+      rgb(255 255 255 / 0) 0.06em 0.18em
+    );
+  transform: rotate(-0.28deg);
+}
+
+.slide-mark--underline .slide-mark-overlay {
+  left: calc(var(--mark-pad-left) * -0.5);
+  right: calc(var(--mark-pad-right) * -0.5);
+  bottom: -0.1em;
+  height: 0.48em;
+  z-index: 0;
+  border-bottom: var(--mark-stroke-width) solid var(--mark-color);
+  border-radius: 999px;
+  transform: rotate(-0.85deg);
+}
+
+.slide-mark--underline .slide-mark-overlay::before {
+  content: "";
+  position: absolute;
+  inset: auto 0 0.05em 0.06em;
+  border-bottom: calc(var(--mark-stroke-width) * 0.78) solid var(--mark-color);
+  border-radius: 999px;
+  opacity: 0.42;
+  transform: rotate(0.38deg);
+}
+
+.slide-mark--box .slide-mark-overlay {
+  inset: calc(var(--mark-pad-top) * -1) calc(var(--mark-pad-right) * -1)
+    calc(var(--mark-pad-bottom) * -1) calc(var(--mark-pad-left) * -1);
+  z-index: 0;
+  border: var(--mark-stroke-width) solid var(--mark-color);
+  border-radius: 0.34em 0.26em 0.32em 0.22em;
+  transform: rotate(-0.95deg);
+}
+
+.slide-mark--box .slide-mark-overlay::before {
+  content: "";
+  position: absolute;
+  inset: -0.03em 0.04em 0.02em -0.05em;
+  border: calc(var(--mark-stroke-width) * 0.84) solid var(--mark-color);
+  border-radius: 0.26em 0.34em 0.22em 0.36em;
+  opacity: 0.42;
+  transform: rotate(0.42deg);
+}
+
+.slide-mark--circle .slide-mark-overlay {
+  inset: calc(var(--mark-pad-top) * -1) calc(var(--mark-pad-right) * -1)
+    calc(var(--mark-pad-bottom) * -1) calc(var(--mark-pad-left) * -1);
+  z-index: 0;
+  border: var(--mark-stroke-width) solid var(--mark-color);
+  border-radius: 48% 52% 50% 55% / 53% 47% 56% 44%;
+  transform: rotate(-2.6deg);
+}
+
+.slide-mark--circle .slide-mark-overlay::before {
+  content: "";
+  position: absolute;
+  inset: -0.02em 0.04em 0.02em -0.04em;
+  border: calc(var(--mark-stroke-width) * 0.82) solid var(--mark-color);
+  border-radius: 52% 48% 55% 49% / 45% 54% 46% 55%;
+  opacity: 0.38;
+  transform: rotate(1.35deg);
+}
+
+.slide-mark--strike-through .slide-mark-overlay {
+  left: calc(var(--mark-pad-left) * -0.5);
+  right: calc(var(--mark-pad-right) * -0.5);
+  top: 50%;
+  height: 0;
+  z-index: 0;
+  border-top: var(--mark-stroke-width) solid var(--mark-color);
+  transform: translateY(-50%) rotate(-1.1deg);
+}
+
+.slide-mark--strike-through .slide-mark-overlay::before {
+  content: "";
+  position: absolute;
+  inset: -0.02em 0.04em auto 0;
+  border-top: calc(var(--mark-stroke-width) * 0.78) solid var(--mark-color);
+  opacity: 0.42;
+  transform: rotate(0.42deg);
+}
+
+.slide-mark--crossed-off .slide-mark-overlay {
+  inset: calc(var(--mark-pad-top) * -1) calc(var(--mark-pad-right) * -1)
+    calc(var(--mark-pad-bottom) * -1) calc(var(--mark-pad-left) * -1);
+  z-index: 0;
+}
+
+.slide-mark--crossed-off .slide-mark-overlay::before,
+.slide-mark--crossed-off .slide-mark-overlay::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: calc(100% + 0.3em);
+  border-top: var(--mark-stroke-width) solid var(--mark-color);
+  transform-origin: center;
+}
+
+.slide-mark--crossed-off .slide-mark-overlay::before {
+  transform: translate(-50%, -50%) rotate(22deg);
+}
+
+.slide-mark--crossed-off .slide-mark-overlay::after {
+  transform: translate(-50%, -50%) rotate(-22deg);
+}
+
+@keyframes slide-mark-highlight-draw {
+  from {
+    opacity: 0;
+    clip-path: inset(-0.08em 100% -0.08em 0);
+  }
+
+  78% {
+    opacity: 0.96;
+    clip-path: inset(-0.08em -7% -0.08em 0);
+  }
+
+  to {
+    opacity: 0.92;
+    clip-path: inset(-0.08em 0 -0.08em 0);
+  }
+}
+
+@keyframes slide-mark-line-draw {
+  from {
+    opacity: 0;
+    clip-path: inset(-0.24em 100% -0.24em 0);
+  }
+
+  80% {
+    opacity: 1;
+    clip-path: inset(-0.24em -9% -0.24em 0);
+  }
+
+  to {
+    opacity: 1;
+    clip-path: inset(-0.24em 0 -0.24em 0);
+  }
+}
+
+@keyframes slide-mark-shape-draw {
+  from {
+    opacity: 0;
+    clip-path: inset(-0.25em 100% -0.25em 0);
+  }
+
+  82% {
+    opacity: 1;
+    clip-path: inset(-0.25em -10% -0.25em 0);
+  }
+
+  to {
+    opacity: 1;
+    clip-path: inset(-0.25em 0 -0.25em 0);
+  }
+}
+
+@keyframes slide-mark-cross-a-draw {
+  from {
+    opacity: 0;
+    clip-path: inset(-0.24em 100% -0.24em 0);
+  }
+
+  82% {
+    opacity: 1;
+    clip-path: inset(-0.24em -10% -0.24em 0);
+  }
+
+  to {
+    opacity: 1;
+    clip-path: inset(-0.24em 0 -0.24em 0);
+  }
+}
+
+@keyframes slide-mark-cross-b-draw {
+  from {
+    opacity: 0;
+    clip-path: inset(-0.24em 100% -0.24em 0);
+  }
+
+  82% {
+    opacity: 1;
+    clip-path: inset(-0.24em -10% -0.24em 0);
+  }
+
+  to {
+    opacity: 1;
+    clip-path: inset(-0.24em 0 -0.24em 0);
+  }
+}
+
+.slide-mark--animate .slide-mark-overlay,
+.slide-mark--animate .slide-mark-overlay::before,
+.slide-mark--animate .slide-mark-overlay::after {
+  animation-duration: var(--mark-animation-duration);
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.2, 0.9, 0.22, 1.08);
+  animation-iteration-count: var(--mark-animation-iterations);
+  will-change: clip-path, opacity;
+}
+
+.slide-mark--highlight.slide-mark--animate .slide-mark-overlay {
+  transform-origin: left center;
+  animation-name: slide-mark-highlight-draw;
+}
+
+.slide-mark--highlight.slide-mark--animate .slide-mark-overlay::before,
+.slide-mark--highlight.slide-mark--animate .slide-mark-overlay::after {
+  animation-name: slide-mark-highlight-draw;
+}
+
+.slide-mark--highlight.slide-mark--animate .slide-mark-overlay::before {
+  animation-duration: calc(var(--mark-animation-duration) * 0.92);
+}
+
+.slide-mark--highlight.slide-mark--animate .slide-mark-overlay::after {
+  animation-duration: calc(var(--mark-animation-duration) * 0.84);
+  animation-delay: calc(var(--mark-animation-duration) * 0.04);
+}
+
+.slide-mark--underline.slide-mark--animate .slide-mark-overlay {
+  --mark-line-transform: rotate(-0.85deg);
+  transform-origin: left center;
+  animation-name: slide-mark-line-draw;
+}
+
+.slide-mark--underline.slide-mark--animate .slide-mark-overlay::before {
+  --mark-line-transform: rotate(0.38deg);
+  transform-origin: left center;
+  animation-name: slide-mark-line-draw;
+  animation-duration: calc(var(--mark-animation-duration) * 0.86);
+  animation-delay: calc(var(--mark-animation-duration) * 0.06);
+}
+
+.slide-mark--strike-through.slide-mark--animate .slide-mark-overlay {
+  --mark-line-transform: translateY(-50%) rotate(-1.1deg);
+  transform-origin: left center;
+  animation-name: slide-mark-line-draw;
+}
+
+.slide-mark--strike-through.slide-mark--animate .slide-mark-overlay::before {
+  --mark-line-transform: rotate(0.42deg);
+  transform-origin: left center;
+  animation-name: slide-mark-line-draw;
+  animation-duration: calc(var(--mark-animation-duration) * 0.82);
+  animation-delay: calc(var(--mark-animation-duration) * 0.08);
+}
+
+.slide-mark--box.slide-mark--animate .slide-mark-overlay {
+  animation-name: slide-mark-shape-draw;
+}
+
+.slide-mark--box.slide-mark--animate .slide-mark-overlay::before {
+  animation-duration: calc(var(--mark-animation-duration) * 0.88);
+  animation-delay: calc(var(--mark-animation-duration) * 0.05);
+  animation-name: slide-mark-shape-draw;
+}
+
+.slide-mark--circle.slide-mark--animate .slide-mark-overlay {
+  --mark-shape-transform: rotate(-2.6deg);
+  transform-origin: center;
+  animation-name: slide-mark-shape-draw;
+}
+
+.slide-mark--circle.slide-mark--animate .slide-mark-overlay::before {
+  --mark-shape-transform: rotate(1.35deg);
+  transform-origin: center;
+  animation-name: slide-mark-shape-draw;
+  animation-duration: calc(var(--mark-animation-duration) * 0.86);
+  animation-delay: calc(var(--mark-animation-duration) * 0.06);
+}
+
+.slide-mark--crossed-off.slide-mark--animate .slide-mark-overlay::before {
+  transform-origin: center;
+  animation-name: slide-mark-cross-a-draw;
+}
+
+.slide-mark--crossed-off.slide-mark--animate .slide-mark-overlay::after {
+  transform-origin: center;
+  animation-name: slide-mark-cross-b-draw;
+  animation-delay: calc(var(--mark-animation-duration) * 0.14);
+}

package/src/theme/print.css

@@ -0,0 +1,106 @@
+html[data-presentation-mode="print"],
+html[data-presentation-mode="print"] body,
+html[data-presentation-mode="print"] #root {
+  height: auto;
+  min-height: 100%;
+  overflow: auto;
+}
+
+html[data-presentation-mode="print"] body {
+  overscroll-behavior: auto;
+}
+
+.print-slide-viewport {
+  margin: 0 auto;
+  max-width: 100%;
+}
+
+.print-slide-sheet {
+  position: relative;
+  width: 100%;
+  aspect-ratio: var(--print-page-aspect-ratio, 297 / 210);
+  overflow: hidden;
+}
+
+.print-slide-frame {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+@media print {
+  html,
+  body,
+  #root {
+    width: auto;
+    height: auto;
+    min-height: auto;
+    overflow: visible;
+    background: #fff;
+  }
+
+  body {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  .print-slides-toolbar {
+    display: none;
+  }
+
+  .print-slides-view {
+    min-height: auto;
+    background: #fff;
+  }
+
+  .print-slides-content {
+    align-items: center;
+    width: 100%;
+    max-width: none;
+    padding: 0;
+    gap: 0;
+  }
+
+  .print-slide-shell {
+    break-inside: avoid;
+    page-break-inside: avoid;
+    break-after: page;
+    page-break-after: always;
+    margin: 0;
+    width: var(--print-page-width, 297mm);
+    height: var(--print-page-height, 210mm);
+  }
+
+  .print-slide-meta {
+    display: none;
+  }
+
+  .print-slide-shell:last-child {
+    break-after: auto;
+    page-break-after: auto;
+  }
+
+  .print-slide-sheet {
+    width: var(--print-page-width, 297mm);
+    height: var(--print-page-height, 210mm);
+    aspect-ratio: auto;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .print-slide-frame {
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .print-slide-frame article {
+    box-shadow: none;
+  }
+}