@open-press/cli 0.3.0

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

@@ -0,0 +1,761 @@
+.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);
+  }
+}