@open-press/cli 0.8.0 → 1.0.0

package/template/packs/editorial-monograph/document/theme/shell/reader-controls.css

@@ -1,761 +0,0 @@
-.reader-side-nav {
-  grid-area: right;
-  display: grid;
-  grid-template-rows: minmax(0, 1fr) auto;
-  gap: 0;
-  padding: 20px 0;
-  border-left: 1px solid rgba(255, 255, 255, 0.06);
-  color: var(--openpress-color-text-placeholder);
-  font-size: 13px;
-  letter-spacing: 0.06em;
-  user-select: none;
-  overflow: hidden;
-}
-
-.reader-side-nav .reader-bookmarks {
-  position: relative;
-  overflow-y: auto;
-  padding: 0 18px 24px 28px;
-  scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
-}
-
-.reader-side-nav .reader-bookmarks::-webkit-scrollbar { width: 4px; }
-.reader-side-nav .reader-bookmarks::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); }
-
-.reader-bookmarks-rail {
-  position: absolute;
-  left: 16px;
-  top: 0;
-  bottom: 24px;
-  width: 1px;
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.reader-bookmarks-rail .reader-bookmarks-rail-fill {
-  position: absolute;
-  left: -1px;
-  top: 0;
-  width: 3px;
-  height: var(--progress, 0%);
-  background: var(--openpress-color-text-on-dark);
-  transition: height 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
-}
-
-.side-nav-indicator {
-  display: none;
-}
-
-.reader-side-nav .side-menu {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
-  padding: 12px 18px 0 32px;
-  position: relative;
-}
-
-.reader-side-nav .side-menu::before {
-  content: "";
-  position: absolute;
-  left: 16px;
-  top: 14px;
-  bottom: 4px;
-  width: 1px;
-  background: rgba(255, 255, 255, 0.18);
-}
-
-.reader-side-nav .side-menu-item {
-  display: grid;
-  grid-template-columns: 16px 1fr;
-  align-items: center;
-  gap: 12px;
-  background: transparent;
-  border: 0;
-  color: var(--openpress-color-text-placeholder);
-  font-family: inherit;
-  font-size: 11px;
-  letter-spacing: 0.16em;
-  cursor: pointer;
-  padding: 7px 0;
-  text-align: left;
-  white-space: nowrap;
-  transition: color 150ms ease;
-  line-height: 1.4;
-}
-
-.reader-side-nav .side-menu-item:hover:not(:disabled):not(.side-menu-static) {
-  color: var(--openpress-color-text-on-dark);
-}
-
-.reader-side-nav .side-menu-item:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-.side-menu-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 13px;
-  line-height: 1;
-  letter-spacing: 0;
-  opacity: 0.75;
-}
-
-.side-menu-label {
-  min-width: 0;
-}
-
-.side-menu-static {
-  cursor: default;
-}
-
-.side-menu-count {
-  font-variant-numeric: tabular-nums;
-  letter-spacing: 0.12em;
-}
-
-.side-menu-count .sep {
-  margin: 0 4px;
-  opacity: 0.5;
-}
-
-.reader-progress-track {
-  width: 2px;
-  height: 180px;
-  background: rgba(255, 255, 255, 0.12);
-  position: relative;
-}
-
-.reader-progress-track .reader-progress-fill {
-  position: absolute;
-  top: 0;
-  left: -1px;
-  width: 4px;
-  height: var(--progress, 0%);
-  background: rgba(255, 255, 255, 0.6);
-  transition: height 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
-              width 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
-}
-
-.reader-side-count {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 3px;
-  font-variant-numeric: tabular-nums;
-  font-size: 13px;
-  letter-spacing: 0.08em;
-  opacity: 0.7;
-}
-
-.reader-side-count .sep {
-  color: var(--openpress-color-border-strong);
-  font-size: 10px;
-}
-
-.reader-thumb-strip {
-  grid-area: left;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  padding: 20px 16px;
-  border-right: 1px solid rgba(255, 255, 255, 0.06);
-  scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
-}
-
-.reader-thumb-strip::-webkit-scrollbar { width: 4px; }
-.reader-thumb-strip::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); }
-
-.thumb-strip-item {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  padding: 0;
-  width: 100%;
-  text-align: left;
-  font-family: inherit;
-  color: var(--openpress-color-text-placeholder);
-  transition: color 150ms ease;
-}
-
-.thumb-strip-frame {
-  position: relative;
-  width: 100%;
-  aspect-ratio: 210 / 297;
-  overflow: hidden;
-  background: var(--openpress-color-document);
-  outline: 1px solid rgba(255, 255, 255, 0.08);
-  transition: outline 150ms ease;
-}
-
-.thumb-strip-content {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 980px;
-  transform-origin: 0 0;
-  pointer-events: none;
-}
-
-.thumb-strip-item:hover .thumb-strip-frame {
-  outline-color: rgba(255, 255, 255, 0.25);
-}
-
-.thumb-strip-item.is-active .thumb-strip-frame {
-  outline: 2px solid var(--openpress-color-focus);
-  outline-offset: 2px;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(15, 98, 254, 0.35);
-}
-
-.thumb-strip-item.is-active .thumb-strip-label {
-  color: var(--openpress-color-focus);
-}
-
-.thumb-strip-item.is-active {
-  color: var(--openpress-color-text-on-dark);
-}
-
-.thumb-strip-label {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  font-size: 10px;
-  letter-spacing: 0.06em;
-  padding: 0 2px;
-}
-
-.thumb-strip-index {
-  font-variant-numeric: tabular-nums;
-  letter-spacing: 0.06em;
-  flex-shrink: 0;
-}
-
-.thumb-strip-title {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.reader-bookmarks {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  width: 100%;
-  overflow: hidden;
-  padding: 0;
-  min-width: 0;
-}
-
-.bookmark-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.bookmark-item {
-  display: grid;
-  width: 100%;
-  min-width: 0;
-  column-gap: 10px;
-  align-items: baseline;
-  padding: 7px 0;
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  text-align: left;
-  font-family: inherit;
-  letter-spacing: 0.02em;
-  color: var(--openpress-color-text-secondary);
-  transition: color 150ms ease;
-}
-
-.bookmark-title {
-  min-width: 0;
-}
-
-.bookmark-h2 {
-  grid-template-columns: 28px minmax(0, 1fr);
-  font-size: 14.5px;
-  line-height: 1.5;
-  font-weight: 400;
-  opacity: 0.7;
-  padding: 8px 0;
-}
-
-.bookmark-h2:hover {
-  opacity: 1;
-}
-
-.bookmark-h2.is-active {
-  opacity: 1;
-  color: var(--openpress-color-text-on-dark);
-}
-
-.bookmark-h3 {
-  grid-template-columns: 34px minmax(0, 1fr);
-  padding: 6px 0 6px 38px;
-  margin-left: 0;
-  font-size: 12.5px;
-  line-height: 1.45;
-  opacity: 0.5;
-  color: var(--openpress-color-text-placeholder);
-}
-
-.bookmark-h3:hover {
-  opacity: 0.85;
-}
-
-.bookmark-h3.is-active {
-  opacity: 1;
-  color: var(--openpress-color-text-on-dark);
-}
-
-.bookmark-index {
-  font-variant-numeric: tabular-nums;
-  letter-spacing: 0.06em;
-  color: inherit;
-}
-
-.bookmark-title {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  color: inherit;
-}
-
-.bookmark-h3 .bookmark-title {
-  -webkit-line-clamp: 1;
-}
-
-.bookmark-subs {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  max-height: 0;
-  transition: max-height 220ms ease;
-}
-
-.bookmark-group.is-open .bookmark-subs {
-  max-height: none;
-  overflow: visible;
-}
-
-.bookmark-item:focus-visible {
-  outline: 1px solid var(--openpress-color-focus);
-  outline-offset: 2px;
-}
-
-
-.reader-thumbs {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  align-content: start;
-  gap: 24px;
-  padding: 48px;
-  overflow-y: auto;
-  background: rgba(15, 15, 15, 0.96);
-  backdrop-filter: blur(18px);
-  animation: thumbs-in 140ms ease-out both;
-}
-
-.reader-thumbs[hidden] {
-  display: none;
-}
-
-@keyframes thumbs-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.thumb-item {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  border: 0;
-  color: var(--openpress-color-text-secondary);
-  font-family: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.thumb-frame {
-  position: relative;
-  width: 100%;
-  aspect-ratio: 210 / 297;
-  overflow: hidden;
-  background: var(--openpress-color-document);
-  outline: 1px solid var(--openpress-color-border-subtle);
-  outline-offset: 0;
-  transition: outline-color 120ms ease, transform 120ms ease;
-}
-
-.thumb-item:hover .thumb-frame {
-  outline-color: var(--openpress-color-text-secondary);
-  transform: translateY(-2px);
-}
-
-.thumb-item.is-active .thumb-frame {
-  outline: 1px solid var(--openpress-color-text-on-dark);
-}
-
-.thumb-content {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 980px;
-  transform-origin: 0 0;
-  pointer-events: none;
-}
-
-.thumb-label {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  font-size: 12px;
-  line-height: 1.35;
-  color: var(--openpress-color-text-secondary);
-}
-
-.thumb-index {
-  flex-shrink: 0;
-  color: var(--openpress-color-text-placeholder);
-  font-variant-numeric: tabular-nums;
-  font-size: 11px;
-  letter-spacing: 0.06em;
-}
-
-.thumb-title {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.thumb-item.is-active .thumb-label {
-  color: var(--openpress-color-text-on-dark);
-}
-
-.thumb-item:focus-visible .thumb-frame {
-  outline: 2px solid var(--openpress-color-focus);
-}
-
-body.thumbs-open {
-  overflow: hidden;
-}
-
-@media screen and (max-width: 1199px) {
-  .reader-app,
-  .reader-app.is-closed-left,
-  .reader-app.is-closed-right,
-  .reader-app.is-closed-left.is-closed-right {
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-areas:
-      "nav"
-      "main";
-  }
-
-  .reader-thumb-strip {
-    position: fixed;
-    top: 56px;
-    left: 0;
-    width: clamp(240px, 60vw, 320px);
-    height: calc(100vh - 56px);
-    z-index: 25;
-    background: var(--openpress-color-app-bg);
-    transform: translateX(0);
-    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
-    box-shadow: 16px 0 32px rgba(0, 0, 0, 0.55);
-    display: flex !important;
-  }
-
-  .reader-app.is-closed-left .reader-thumb-strip {
-    transform: translateX(-100%);
-    box-shadow: none;
-  }
-
-  .reader-side-nav {
-    position: fixed;
-    top: 56px;
-    right: 0;
-    width: clamp(280px, 70vw, 360px);
-    height: calc(100vh - 56px);
-    z-index: 25;
-    background: var(--openpress-color-app-bg);
-    transform: translateX(0);
-    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
-    box-shadow: -16px 0 32px rgba(0, 0, 0, 0.55);
-    padding: 20px 0;
-    display: grid !important;
-  }
-
-  .reader-app.is-closed-right .reader-side-nav {
-    transform: translateX(100%);
-    box-shadow: none;
-  }
-
-  .reader-app.is-floating-backdrop::before {
-    content: "";
-    position: fixed;
-    top: 56px;
-    inset-inline: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.35);
-    z-index: 24;
-    -webkit-backdrop-filter: blur(2px);
-    backdrop-filter: blur(2px);
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .reader-app {
-    grid-template-rows: 52px minmax(0, 1fr);
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "nav"
-      "main";
-  }
-
-  .reader-thumb-strip,
-  .reader-side-nav {
-    top: 52px;
-    height: calc(100vh - 52px);
-  }
-
-  .reader-app.is-floating-backdrop::before {
-    top: 52px;
-  }
-
-  .reader-thumb-strip {
-    display: none;
-  }
-
-  .reader-navbar {
-    padding: 0 14px;
-    grid-template-columns: 1fr auto;
-  }
-
-  .navbar-sub,
-  .navbar-hints,
-  [data-reader-thumbs] {
-    display: none;
-  }
-
-  .navbar-icon[data-toggle-right],
-  .navbar-icon[data-toggle-left] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    color: var(--openpress-color-text-secondary);
-    opacity: 1;
-  }
-
-  .navbar-icon[data-toggle-left] {
-    font-size: 18px;
-  }
-
-  .navbar-mark {
-    font-size: 16px;
-  }
-
-  .navbar-btn,
-  .navbar-menu-btn {
-    display: none;
-  }
-
-  .reader-stage {
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-    background: var(--openpress-color-app-bg);
-  }
-
-  .reader-pages {
-    display: flex;
-    gap: 18px;
-    padding: 16px 14px calc(128px + env(safe-area-inset-bottom));
-    height: auto;
-    background: var(--openpress-color-app-bg);
-    --reader-page-width: calc(100cqw - 28px);
-  }
-
-  .reader-page,
-  .reader-page.is-active,
-  .reader-page--cover.is-active,
-  .reader-page--back-cover.is-active {
-    width: var(--reader-page-width);
-    min-height: calc(var(--reader-page-width) * 297 / 210);
-    height: auto;
-    overflow: visible;
-    margin: 0;
-    --openpress-space-1: 0.8cqw;
-    --openpress-space-2: 1.45cqw;
-    --openpress-space-3: 2.2cqw;
-    --openpress-space-4: 3.1cqw;
-    --openpress-space-5: 4.4cqw;
-    animation: none !important;
-    transform: none !important;
-  }
-
-  .reader-page .page-frame {
-    height: auto;
-    min-height: inherit;
-    grid-template-rows: var(--page-header-height) minmax(max-content, 1fr) var(--page-footer-height);
-  }
-
-  .reader-page.no-footer .page-frame {
-    grid-template-rows: var(--page-header-height) minmax(max-content, 1fr);
-  }
-
-  .reader-page.measurement {
-    display: block !important;
-    width: var(--openpress-page-width);
-    height: var(--openpress-page-height);
-    min-height: var(--openpress-page-height);
-    overflow: hidden;
-  }
-
-  .reader-page--cover,
-  .reader-page--back-cover {
-    margin-bottom: 0;
-  }
-
-  .cover-meta,
-  .back-cover-meta,
-  .cover-byline,
-  .back-cover-byline {
-    font-size: 1.5cqw;
-    letter-spacing: 0.08em;
-  }
-
-  .cover-title {
-    font-size: 9.2cqw;
-  }
-
-  .cover-tagline {
-    font-size: 2.55cqw;
-  }
-
-  .cover-subtitle {
-    font-size: 2.25cqw;
-    line-height: 1.45;
-  }
-
-  .cover-summary {
-    max-width: 100%;
-    font-size: 1.8cqw;
-    line-height: 1.7;
-  }
-
-  .cover-visual,
-  .back-cover-visual {
-    margin-top: var(--openpress-space-2);
-  }
-
-  .cover-visual img,
-  .back-cover-visual img {
-    max-height: 28cqw;
-  }
-
-  .reader-page--toc {
-    margin-bottom: 0;
-    border-top: 0;
-  }
-
-  .back-cover-kicker {
-    font-size: 8cqw;
-  }
-
-  .back-cover-rule {
-    width: 5.2cqw;
-  }
-
-  .back-cover-statement {
-    max-width: 100%;
-    font-size: 2.35cqw;
-    line-height: 1.45;
-  }
-
-  .back-cover-summary {
-    max-width: 100%;
-    font-size: 1.8cqw;
-    line-height: 1.7;
-  }
-
-  h2 {
-    font-size: 3.35cqw;
-  }
-
-  h2::before {
-    width: 5.2cqw;
-  }
-
-  h3 {
-    font-size: 2.4cqw;
-  }
-
-  h4 {
-    font-size: 2.05cqw;
-  }
-
-  p,
-  ol,
-  ul {
-    font-size: 1.86cqw;
-  }
-
-  table {
-    font-size: 1.45cqw;
-  }
-
-  figcaption,
-  caption {
-    font-size: 1.38cqw;
-  }
-
-  .reader-page--content .page-body > figure {
-    width: 100%;
-  }
-
-  th, td {
-    padding: 0.9cqw 1cqw;
-  }
-
-  .toc-list a {
-    grid-template-columns: 8cqw 1fr 6cqw;
-    padding: 1.6cqw 0;
-    font-size: 2cqw;
-  }
-
-  .reader-thumbs {
-    padding: 16px;
-    gap: 12px;
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  }
-
-  .thumb-label {
-    font-size: 10px;
-  }
-
-  .reader-side-nav {
-    width: clamp(260px, 80vw, 340px);
-  }
-}