easy-slides/packages/slidev-theme-easy-jyy/styles/layouts.css

.easy-layout-center,
.easy-layout-section,
.easy-layout-cover {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.easy-layout-center {
  align-items: center;
  text-align: center;
}

.easy-layout-center h1,
.easy-layout-center h2 {
  text-align: center;
}

.easy-layout-cover h1 {
  margin-bottom: 28px;
  font-size: 68px;
}

.easy-layout-cover blockquote {
  border: 0;
  padding: 0;
  color: var(--easy-accent);
}

.easy-layout-section h1,
.easy-layout-section h2 {
  max-width: 980px;
}

.easy-layout-quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.easy-layout-quote blockquote {
  border: 0;
  padding: 0;
  color: var(--easy-accent);
  font-size: 46px;
  line-height: 1.35;
  text-align: center;
}

.easy-layout-two-cols {
  display: grid;
  grid-template-rows: auto 1fr;
}

.easy-layout-two-cols .easy-two-cols-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 46px;
  min-height: 0;
}

.easy-layout-image-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 42px;
}

.easy-layout-image-split.easy-image-left .easy-image-pane { order: -1; }

.easy-layout-image-auto.easy-image-top,
.easy-layout-image-auto.easy-image-bottom {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 22px;
}

.easy-layout-image-auto.easy-image-top .easy-image-pane { order: -1; }

.easy-image-pane {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
}

.easy-image-pane img {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.easy-content-scale-host {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.easy-content-table-host {
  width: 100%;
  overflow: auto;
}

.easy-content-code-host {
  width: 100%;
  margin-bottom: 0 !important;
}

.easy-image-preview-trigger {
  cursor: zoom-in;
}

.easy-image-preview-trigger:focus-visible {
  outline: 3px solid var(--easy-accent);
  outline-offset: 4px;
}

.easy-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: block;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: clamp(16px, 4vmin, 42px) clamp(16px, 4vmin, 42px) clamp(86px, 12vmin, 112px);
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgba(0, 0, 0, .92);
}

.easy-image-lightbox-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

.easy-image-lightbox-viewport.easy-image-lightbox-pannable {
  cursor: grab;
}

.easy-image-lightbox-viewport.easy-image-lightbox-dragging {
  cursor: grabbing;
}

.easy-image-lightbox-preview {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  max-width: none;
  max-height: none;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  transform-origin: 0 0;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.easy-image-lightbox-close {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 22px;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  padding: 0 0 4px;
  font: 300 38px/1 Arial, sans-serif;
  cursor: pointer;
}

.easy-image-lightbox-close:hover,
.easy-image-lightbox-close:focus-visible {
  border-color: #fff;
  background: var(--easy-accent);
  outline: none;
}

.easy-image-scale-toolbar {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 52px minmax(76px, auto) 52px;
  align-items: center;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: rgba(250, 250, 250, .96);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .32);
  color: #202124;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.easy-image-scale-button {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #e4e5e7;
  color: #202124;
  padding: 0 0 3px;
  font: 300 34px/1 Arial, sans-serif;
  cursor: pointer;
}

.easy-image-scale-button:hover,
.easy-image-scale-button:focus-visible {
  background: var(--easy-accent);
  color: #fff;
  outline: none;
}

.easy-image-scale-button:disabled {
  color: #9aa0a6;
  cursor: not-allowed;
  opacity: .55;
}

.easy-image-scale-value {
  min-width: 76px;
  padding: 0 10px;
  text-align: center;
  font: 500 20px/1 Lato, "Noto Sans SC", sans-serif;
  font-variant-numeric: tabular-nums;
}

.easy-content-scale-toolbar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 30;
  display: flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(180, 180, 180, .9);
  border-radius: 7px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  opacity: 0;
  transition: opacity .14s ease;
}

.easy-content-scale-host:hover > .easy-content-scale-toolbar,
.easy-content-scale-host:focus-within > .easy-content-scale-toolbar {
  opacity: 1;
}

.easy-content-scale-button {
  min-width: 32px;
  border: 0;
  border-radius: 5px;
  background: #eee;
  color: #222;
  padding: 6px 8px;
  font: 600 14px/1 Lato, "Noto Sans SC", sans-serif;
  cursor: pointer;
}

.easy-content-scale-button:hover,
.easy-content-scale-button:focus-visible {
  background: var(--easy-accent);
  color: #fff;
  outline: none;
}

.easy-content-scale-reset {
  min-width: 52px;
}

.easy-content-code-host > .easy-content-scale-toolbar {
  right: 48px;
}

body.easy-slide-scroll-fallback .slidev-layout {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--easy-accent) 65%, transparent) transparent;
}

.easy-image-content {
  min-width: 0;
  align-self: center;
}

.easy-layout-image-full {
  padding: 0;
}

.easy-layout-image-full > img {
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
}

.easy-layout-image-full .easy-image-overlay {
  position: absolute;
  inset: auto 0 0;
  padding: 46px 54px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .78));
  color: #fff;
}

.easy-layout-image-full .easy-image-overlay :is(h1, h2, h3, p) {
  color: inherit;
}

@media (max-aspect-ratio: 4 / 3) {
  .easy-layout-two-cols .easy-two-cols-grid,
  .easy-layout-image-split {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 22px;
  }
}

@media (hover: none) {
  .easy-content-scale-toolbar { opacity: .78; }
}

@media (max-width: 520px) {
  .easy-image-lightbox {
    padding: 14px 14px calc(84px + env(safe-area-inset-bottom));
  }

  .easy-image-lightbox-close {
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
  }

  .easy-image-scale-toolbar {
    bottom: max(12px, env(safe-area-inset-bottom));
    grid-template-columns: 48px minmax(68px, auto) 48px;
    padding: 5px;
  }

  .easy-image-scale-button {
    width: 42px;
    height: 42px;
  }

  .easy-image-scale-value {
    min-width: 68px;
    font-size: 18px;
  }
}

@media print {
  .easy-content-scale-toolbar,
  .easy-image-lightbox { display: none !important; }

  body.easy-slide-scroll-fallback .slidev-layout { overflow: hidden !important; }
}