@lincyaw/viewer 0.0.0-stage → 1.0.0-rc.0

package/src/style.css

@@ -0,0 +1,833 @@
+:root {
+  --pm-c-bg: var(--vp-c-bg, #fff);
+  --pm-c-bg-soft: var(--vp-c-bg-soft, #f6f6f7);
+  --pm-c-text: var(--vp-c-text-1, #213547);
+  --pm-c-text-2: var(--vp-c-text-2, #476582);
+  --pm-c-border: var(--vp-c-divider, #e2e2e3);
+  --pm-c-brand: var(--vp-c-brand-1, #3451b2);
+  --pm-c-danger: var(--vp-c-danger-1, #b8272c);
+  --pm-c-warning: var(--vp-c-warning-1, #915930);
+  --pm-code-bg: var(--vp-code-block-bg, #f6f6f7);
+  --pm-line-highlight: var(--vp-code-line-highlight-color, rgba(142, 150, 170, 0.14));
+  --pm-board-bg: color-mix(in srgb, var(--pm-c-brand) 4%, var(--pm-c-bg));
+  --pm-board-border: var(--pm-c-border);
+  --pm-scroll-shadow: rgba(0, 0, 0, 0.18);
+}
+
+.dark {
+  --pm-scroll-shadow: rgba(255, 255, 255, 0.16);
+}
+
+.pm-hidden,
+[data-pm-click='hidden'] {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.pm-block,
+.pm-block li,
+[data-pm-click] {
+  transition: opacity 0.3s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pm-block,
+  .pm-block li,
+  [data-pm-click] {
+    transition: none;
+  }
+}
+
+.pm-v-click {
+  display: contents;
+}
+
+.pm-section {
+  position: relative;
+  min-width: 0;
+  margin-top: 2.5rem;
+}
+
+.pm-section:first-child {
+  margin-top: 0;
+}
+
+.pm-section__body,
+.pm-stage,
+.pm-track,
+.pm-block {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.pm-block {
+  overflow-x: auto;
+}
+
+.pm-block :where(img, video, iframe, canvas, svg) {
+  max-width: 100%;
+  height: auto;
+}
+
+.pm-section__source {
+  margin: 0.25rem 0 0;
+  font-size: 0.8125em;
+}
+
+.pm-section__source button {
+  padding: 0;
+  color: var(--pm-c-text-2);
+  text-decoration: underline dotted;
+  cursor: pointer;
+}
+
+.pm-section__source button:hover {
+  color: var(--pm-c-brand);
+}
+
+.pm-diagnostics {
+  margin: 0.5rem 0;
+  padding: 0.5rem 0.75rem 0.5rem 1.75rem;
+  border: 1px solid var(--pm-c-danger);
+  border-radius: 0.25rem;
+  color: var(--pm-c-danger);
+  font-size: 0.875em;
+}
+
+.pm-board {
+  margin: 1.25rem 0;
+  padding: 0.75rem 1.25rem;
+  border: 1px solid var(--pm-board-border);
+  border-left: 4px solid var(--pm-c-brand);
+  border-radius: 0.5rem;
+  background: var(--pm-board-bg);
+}
+
+.pm-board > :first-child > :first-child {
+  margin-top: 0;
+}
+
+.pm-block--overlay {
+  overflow: visible;
+}
+
+.pm-board > :last-child > :last-child {
+  margin-bottom: 0;
+}
+
+.pm-board .pm-block strong {
+  font-weight: 700;
+  color: var(--pm-c-text);
+}
+
+.pm-section--scrolly {
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  column-gap: 1.5rem;
+  align-items: start;
+}
+
+.pm-section--scrolly > :not(.pm-stage, .pm-track) {
+  grid-column: 1 / -1;
+}
+
+.pm-section--scrolly > .pm-stage {
+  position: sticky;
+  top: calc(var(--vp-nav-height, 0px) + 1rem);
+  margin: 0;
+  padding: 0.75rem;
+  container-type: inline-size;
+}
+
+.pm-section--scrolly > .pm-track {
+  padding-bottom: 30vh;
+}
+
+.pm-step {
+  min-height: 45vh;
+  padding-left: 0.75rem;
+  border-left: 2px solid var(--pm-c-border);
+}
+
+.pm-step--current {
+  border-left-color: var(--pm-c-brand);
+}
+
+.pm-step--bare {
+  min-height: 25vh;
+}
+
+.pm-section--scrolly > .pm-track .pm-block--narration.pm-hidden {
+  visibility: visible;
+  opacity: 0.35;
+}
+
+@media (max-width: 767px) {
+  .pm-section--scrolly {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .pm-section--scrolly > .pm-stage {
+    top: var(--vp-nav-height, 0px);
+    z-index: 1;
+    max-height: 50vh;
+    overflow-y: auto;
+  }
+}
+
+.pm-code-block {
+  margin: 1rem 0;
+}
+
+.pm-code-origin {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: baseline;
+  font-size: 0.8em;
+  color: var(--pm-c-text-2);
+}
+
+.pm-code-origin__file,
+.pm-code-origin__commit,
+.pm-code-origin__variant {
+  font-family: var(--vp-font-family-mono, monospace);
+  overflow-wrap: anywhere;
+}
+
+.pm-code-origin__variant[data-active] {
+  font-weight: 700;
+  text-decoration: underline;
+}
+
+.pm-code-origin__badge {
+  padding: 0 0.4em;
+  border-radius: 0.25rem;
+  border: 1px solid currentColor;
+  color: var(--pm-c-warning);
+}
+
+.pm-code-origin__badge[data-drift='synced'] {
+  color: var(--pm-c-text-2);
+}
+
+.pm-code-block__run {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  font-size: 0.85em;
+}
+
+.pm-code-block__run button {
+  padding: 0.125rem 0.75rem;
+  border: 1px solid var(--pm-c-brand);
+  border-radius: 0.25rem;
+  color: var(--pm-c-brand);
+}
+
+.pm-code-block__run button:disabled {
+  opacity: 0.6;
+}
+
+.pm-code-block__hint {
+  color: var(--pm-c-danger);
+}
+
+.pm-code-block__label {
+  margin: 0.5rem 0 0;
+  font-size: 0.8em;
+  color: var(--pm-c-text-2);
+}
+
+.pm-code pre {
+  --pm-code-pad: 1rem;
+  margin: 0.5rem 0;
+  padding: 0.75rem var(--pm-code-pad);
+  overflow-x: auto;
+  border-radius: 0.375rem;
+  background:
+    linear-gradient(to right, var(--pm-code-bg) 40%, transparent) left / 1.5rem 100% no-repeat local,
+    linear-gradient(to left, var(--pm-code-bg) 40%, transparent) right / 1.5rem 100% no-repeat local,
+    radial-gradient(farthest-side at 0 50%, var(--pm-scroll-shadow), transparent) left / 0.75rem 100% no-repeat scroll,
+    radial-gradient(farthest-side at 100% 50%, var(--pm-scroll-shadow), transparent) right / 0.75rem 100% no-repeat scroll,
+    var(--pm-code-bg);
+  font-size: 0.875em;
+  line-height: 1.6;
+}
+
+.pm-stage .pm-code pre {
+  --pm-code-pad: 0.75rem;
+  font-size: clamp(0.65rem, (100cqi - 2 * var(--pm-code-pad) - 2px) / (var(--pm-code-columns, 40) * 0.62), 0.875rem);
+}
+
+.pm-view table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.pm-view :is(th, td) code {
+  white-space: pre;
+}
+
+.pm-view th {
+  white-space: nowrap;
+}
+
+.pm-stage table {
+  font-size: 0.875em;
+}
+
+.pm-stage :is(th, td) {
+  white-space: nowrap;
+}
+
+.pm-code code {
+  font-family: var(--vp-font-family-mono, monospace);
+}
+
+.pm-code .shiki span {
+  color: var(--shiki-light);
+}
+
+.dark .pm-code .shiki span {
+  color: var(--shiki-dark);
+}
+
+.pm-code .line.highlighted {
+  display: inline-block;
+  width: calc(100% + 2 * var(--pm-code-pad));
+  margin: 0 calc(-1 * var(--pm-code-pad));
+  padding: 0 var(--pm-code-pad);
+  background: var(--pm-line-highlight);
+}
+
+.pm-code--highlight .line:not(.highlighted) {
+  opacity: 0.45;
+}
+
+.pm-outputs {
+  margin: 0.25rem 0 1rem;
+}
+
+.pm-output pre {
+  margin: 0.25rem 0;
+  padding: 0.5rem 0.75rem;
+  overflow-x: auto;
+  border-left: 3px solid var(--pm-c-border);
+  background: var(--pm-c-bg-soft);
+  font-size: 0.8125em;
+}
+
+.pm-output__stderr,
+.pm-output--failed .pm-output__stdout {
+  border-left-color: var(--pm-c-danger) !important;
+}
+
+.pm-output__note {
+  margin: 0;
+  font-size: 0.75em;
+  color: var(--pm-c-text-2);
+}
+
+.pm-output__stderr,
+.pm-output__error {
+  border-left-color: var(--pm-c-danger) !important;
+}
+
+.pm-output__display {
+  margin: 0.25rem 0;
+  overflow-x: auto;
+}
+
+.pm-output__display img {
+  max-width: 100%;
+}
+
+.pm-outputs--prose,
+.pm-output--prose .pm-output__display {
+  margin: 0;
+}
+
+.pm-math--display {
+  overflow-x: auto;
+  margin: 1rem 0;
+  text-align: center;
+}
+
+.pm-mermaid {
+  margin: 1rem 0;
+  overflow-x: auto;
+  text-align: center;
+}
+
+.pm-mermaid svg {
+  max-width: none;
+}
+
+.pm-admonition {
+  margin: 1rem 0;
+  padding: 0.25rem 1rem;
+  border-left: 4px solid var(--pm-c-brand);
+  border-radius: 0.25rem;
+  background: var(--pm-c-bg-soft);
+}
+
+.pm-admonition--warning,
+.pm-admonition--caution,
+.pm-admonition--danger,
+.pm-admonition--error {
+  border-left-color: var(--pm-c-danger);
+}
+
+.pm-admonition__title {
+  font-weight: 600;
+}
+
+.pm-block kbd {
+  padding: 0.05em 0.35em;
+  border: 1px solid var(--pm-c-border);
+  border-bottom-width: 2px;
+  border-radius: 0.25rem;
+  background: var(--pm-c-bg-soft);
+  font-family: var(--vp-font-family-mono, monospace);
+  font-size: 0.875em;
+}
+
+.pm-block dt {
+  font-weight: 600;
+}
+
+.pm-block dd {
+  margin: 0 0 0.5rem 1.5rem;
+}
+
+.pm-block details {
+  margin: 1rem 0;
+  padding: 0.25rem 1rem;
+  border: 1px solid var(--pm-c-border);
+  border-radius: 0.25rem;
+}
+
+.pm-block summary {
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.pm-grid {
+  --pm-grid-columns: var(--pm-grid-xs, 1);
+  --pm-span-xs: initial;
+  --pm-span-sm: initial;
+  --pm-span-md: initial;
+  --pm-span-lg: initial;
+  display: grid;
+  grid-template-columns: repeat(var(--pm-grid-columns), minmax(0, 1fr));
+  gap: 1rem;
+  margin: 1rem 0;
+}
+
+.pm-grid > * {
+  --pm-span: var(--pm-span-xs, 1);
+  grid-column: span var(--pm-span);
+  min-width: 0;
+}
+
+@media (min-width: 576px) {
+  .pm-grid {
+    --pm-grid-columns: var(--pm-grid-sm, 1);
+  }
+
+  .pm-grid > * {
+    --pm-span: var(--pm-span-sm, 1);
+  }
+}
+
+@media (min-width: 768px) {
+  .pm-grid {
+    --pm-grid-columns: var(--pm-grid-md, 1);
+  }
+
+  .pm-grid > * {
+    --pm-span: var(--pm-span-md, 1);
+  }
+}
+
+@media (min-width: 992px) {
+  .pm-grid {
+    --pm-grid-columns: var(--pm-grid-lg, 1);
+  }
+
+  .pm-grid > * {
+    --pm-span: var(--pm-span-lg, 1);
+  }
+}
+
+.pm-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin: 1rem 0;
+  border: 1px solid var(--pm-c-border);
+  border-radius: 0.5rem;
+  background: var(--pm-c-bg);
+  overflow: hidden;
+}
+
+.pm-grid > .pm-card {
+  margin: 0;
+}
+
+.pm-card--link:hover {
+  border-color: var(--pm-c-brand);
+}
+
+.pm-card__header,
+.pm-card__footer {
+  padding: 0 1rem;
+  background: var(--pm-c-bg-soft);
+}
+
+.pm-card__header {
+  border-bottom: 1px solid var(--pm-c-border);
+}
+
+.pm-card__footer {
+  margin-top: auto;
+  border-top: 1px solid var(--pm-c-border);
+}
+
+.pm-card > .pm-card__title {
+  margin: 0.75rem 1rem 0;
+  font-weight: 600;
+}
+
+.pm-card__body {
+  padding: 0 1rem;
+}
+
+.pm-card__header > :first-child,
+.pm-card__body > :first-child,
+.pm-card__footer > :first-child {
+  margin-top: 0.75rem;
+}
+
+.pm-card__header > :last-child,
+.pm-card__body > :last-child,
+.pm-card__footer > :last-child {
+  margin-bottom: 0.75rem;
+}
+
+.pm-card.pm-card--link > .pm-card__title > a[href]::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  width: auto;
+  height: auto;
+  margin: 0;
+  background: none;
+  mask-image: none;
+}
+
+.pm-card--link :is(.pm-card__header, .pm-card__body, .pm-card__footer) a {
+  position: relative;
+  z-index: 1;
+}
+
+.pm-block .pm-button {
+  display: inline-block;
+  padding: 0.3em 1em;
+  border: 1px solid var(--pm-c-brand);
+  border-radius: 999px;
+  color: var(--pm-c-brand);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.pm-block a.pm-button:hover {
+  background: var(--pm-c-brand);
+  color: var(--pm-c-bg);
+}
+
+.pm-tabs {
+  margin: 1rem 0;
+}
+
+.pm-tabs__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  border-bottom: 1px solid var(--pm-c-border);
+}
+
+.pm-tabs__tab {
+  margin-bottom: -1px;
+  padding: 0.4rem 0.9rem;
+  border-bottom: 2px solid transparent;
+  color: var(--pm-c-text-2);
+  cursor: pointer;
+}
+
+.pm-tabs__tab:hover {
+  color: var(--pm-c-text);
+}
+
+.pm-tabs__tab[aria-selected='true'] {
+  border-bottom-color: var(--pm-c-brand);
+  color: var(--pm-c-brand);
+  font-weight: 600;
+}
+
+.pm-tabs__panel {
+  padding-top: 0.25rem;
+}
+
+.pm-footnote {
+  font-size: 0.875em;
+  color: var(--pm-c-text-2);
+}
+
+.pm-footnote-ref a::before {
+  content: '[' attr(data-label) ']';
+}
+
+.pm-footnote > sup::before {
+  content: attr(data-label);
+}
+
+.pm-component-missing {
+  padding: 0.5rem 0.75rem;
+  border: 1px dashed var(--pm-c-border);
+  border-radius: 0.25rem;
+  color: var(--pm-c-text-2);
+  font-size: 0.875em;
+}
+
+.pm-boundary-error {
+  padding: 0.5rem 0.75rem;
+  border: 1px dashed var(--pm-c-danger);
+  border-radius: 0.25rem;
+  color: var(--pm-c-danger);
+  font-size: 0.85em;
+}
+
+html.pm-presenting {
+  overflow: hidden;
+}
+
+.pm-present,
+.pm-presenter {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  background: var(--pm-c-bg);
+  color: var(--pm-c-text);
+}
+
+.pm-present:focus {
+  outline: none;
+}
+
+:where(.pm-present, .pm-presenter) :where(ul) {
+  padding-left: 1.5em;
+  list-style: disc;
+}
+
+:where(.pm-present, .pm-presenter) :where(ol) {
+  padding-left: 1.5em;
+  list-style: decimal;
+}
+
+:where(.pm-present, .pm-presenter) :where(p, ul, ol, pre) {
+  margin: 0.5em 0;
+}
+
+.pm-present__slide {
+  position: relative;
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  max-width: min(92vw, 120rem);
+  margin: 0 auto;
+  padding: 5vh 4vw;
+  overflow: hidden;
+  font-size: clamp(1rem, min(2vw, 3.6vh), 1.75rem);
+}
+
+.pm-present__content {
+  transform-origin: top left;
+}
+
+.pm-present .pm-present__slide :is(table, th, td) {
+  font-size: 1em;
+}
+
+.pm-present .pm-present__slide :is(th, td) {
+  padding: 0.3em 0.6em;
+}
+
+.pm-present .pm-present__slide ul {
+  padding-inline-start: 1.5em;
+}
+
+.pm-present .pm-present__slide ol {
+  padding-inline-start: 2em;
+}
+
+.pm-overview {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  overflow: auto;
+  padding: 1.5rem;
+  background: var(--pm-c-bg);
+  font-size: 1rem;
+}
+
+.pm-overview__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  gap: 0.75rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.pm-overview__item {
+  display: flex;
+  gap: 0.5rem;
+  align-items: baseline;
+  width: 100%;
+  min-height: 4.5rem;
+  padding: 0.75rem;
+  border: 1px solid var(--pm-c-border);
+  border-radius: 0.375rem;
+  background: var(--pm-c-bg-soft);
+  color: var(--pm-c-text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.pm-overview__item[aria-current='true'] {
+  border-color: var(--pm-c-brand);
+  box-shadow: inset 0 0 0 1px var(--pm-c-brand);
+}
+
+.pm-overview__item:focus-visible {
+  outline: 2px solid var(--pm-c-brand);
+  outline-offset: 2px;
+}
+
+.pm-overview__index {
+  color: var(--pm-c-text-2);
+  font-variant-numeric: tabular-nums;
+}
+
+.pm-present .pm-present__title,
+.pm-presenter .pm-present__title {
+  margin: 0 0 1em;
+  font-size: 1.6em;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.pm-present__bar,
+.pm-presenter__bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  border-top: 1px solid var(--pm-c-border);
+  font-size: 0.875rem;
+  color: var(--pm-c-text-2);
+}
+
+.pm-present__counter {
+  margin-right: auto;
+}
+
+.pm-present__button {
+  padding: 0.25rem 0.75rem;
+  border: 1px solid var(--pm-c-border);
+  border-radius: 0.25rem;
+  background: var(--pm-c-bg-soft);
+  color: var(--pm-c-text);
+  cursor: pointer;
+}
+
+.pm-presenter__bar {
+  border-top: none;
+  border-bottom: 1px solid var(--pm-c-border);
+}
+
+.pm-presenter__title {
+  color: var(--pm-c-text);
+}
+
+.pm-presenter__timer {
+  margin-left: auto;
+  font-family: var(--vp-font-family-mono, monospace);
+  font-size: 1.25rem;
+  color: var(--pm-c-text);
+}
+
+.pm-presenter__main {
+  flex: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  gap: 1rem;
+  min-height: 0;
+  padding: 1rem;
+}
+
+.pm-presenter__slide,
+.pm-presenter__side {
+  overflow: auto;
+  min-height: 0;
+}
+
+.pm-presenter__slide {
+  padding: 1rem;
+  border: 1px solid var(--pm-c-border);
+  border-radius: 0.5rem;
+}
+
+.pm-presenter .pm-presenter__label {
+  margin: 0 0 0.5rem;
+  font-size: 0.875rem;
+  color: var(--pm-c-text-2);
+}
+
+.pm-presenter__note {
+  padding: 0 0.5rem;
+  border-left: 3px solid transparent;
+  opacity: 0.5;
+}
+
+.pm-presenter__note.pm-current {
+  border-left-color: var(--pm-c-brand);
+  opacity: 1;
+}
+
+.pm-presenter__next {
+  white-space: pre-line;
+}
+
+@media (max-width: 767px) {
+  .pm-presenter__main {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.pm-role-mark {
+  margin: 0 0.15em;
+  padding: 0 0.2em;
+  border-radius: 3px;
+  font-size: 0.85em;
+  color: var(--vp-c-text-2, #666);
+  background: var(--vp-c-default-soft, rgba(128, 128, 128, 0.15));
+}
+
+.pm-step-range.pm-hidden { display: none !important; }