@open-press/core 0.3.0

package/src/styles/openpress/reader-runtime.css

@@ -0,0 +1,792 @@
+.openpress-reader-app .reader-pages {
+  padding: 30px 24px 56px;
+}
+
+.openpress-reader-app .reader-page {
+  scroll-margin-top: 32px;
+}
+
+.openpress-html-page {
+  width: fit-content;
+  max-width: 100%;
+  margin: 0 auto 12px;
+  scroll-margin-top: 72px;
+}
+
+/* Snap alignment only in paged mode. Reading mode lets pages grow to
+   natural height; snap-stop would yank long sections back to the page top. */
+[data-openpress-view-mode="paged"] .openpress-html-page,
+.openpress-reader-app:not([data-openpress-view-mode]) .openpress-html-page {
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+
+.openpress-html-page__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 10px;
+  color: #90969d;
+  font-size: 12px;
+}
+
+.openpress-html-page__toolbar code {
+  overflow: hidden;
+  max-width: 520px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openpress-reader-app[data-openpress-inspector-mode="on"] .openpress-html-page__html [data-openpress-block-id] {
+  cursor: crosshair;
+}
+
+.openpress-reader-app[data-openpress-inspector-mode="on"] .openpress-html-page__html [data-openpress-block-id]:hover {
+  outline: 2px solid color-mix(in srgb, var(--openpress-accent, #df4b21) 70%, transparent);
+  outline-offset: 4px;
+}
+
+.openpress-reader-app[data-openpress-inspector-mode="on"] .openpress-html-page__html [data-openpress-inspector-selected="true"] {
+  outline: 2px solid var(--openpress-accent, #df4b21);
+  outline-offset: 5px;
+  background: color-mix(in srgb, var(--openpress-accent, #df4b21) 16%, transparent);
+}
+
+.openpress-inline-inspector-layer {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  pointer-events: none;
+}
+
+.openpress-inline-insert-target {
+  position: fixed;
+  z-index: 91;
+  border: 0;
+  border-radius: 999px;
+  padding: 0;
+  background: transparent;
+  color: var(--openpress-accent, #df4b21);
+  cursor: cell;
+  opacity: 0;
+  pointer-events: auto;
+  transition: opacity 140ms ease, transform 140ms ease;
+}
+
+.openpress-inline-insert-target::before {
+  position: absolute;
+  right: 0;
+  left: 0;
+  top: 50%;
+  border-top: 2px solid color-mix(in srgb, var(--openpress-accent, #df4b21) 82%, transparent);
+  content: "";
+}
+
+.openpress-inline-insert-target:hover,
+.openpress-inline-insert-target.is-selected {
+  opacity: 1;
+}
+
+.openpress-inline-insert-target.is-selected {
+  transform: scaleY(1.12);
+}
+
+.openpress-inline-comment-marker {
+  position: fixed;
+  z-index: 132;
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border: 3px solid #f8fbff;
+  border-radius: 999px;
+  padding: 0;
+  background: var(--openpress-accent, #df4b21);
+  color: white;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 800;
+  line-height: 1;
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: 0 10px 26px rgb(0 0 0 / 24%);
+  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
+}
+
+.openpress-inline-comment-marker:hover,
+.openpress-inline-comment-marker:focus-visible {
+  transform: translateY(-1px);
+  outline: 2px solid color-mix(in srgb, var(--openpress-accent, #df4b21) 64%, white);
+  outline-offset: 2px;
+  box-shadow: 0 14px 32px rgb(0 0 0 / 30%);
+}
+
+.openpress-inline-comment-marker[data-openpress-marker-state="saved"] {
+  background: color-mix(in srgb, var(--openpress-accent, #df4b21) 92%, #5f2a16);
+}
+
+.openpress-inline-comment-composer {
+  position: fixed;
+  z-index: 131;
+  display: grid;
+  gap: 8px;
+  border: 1px solid rgb(255 255 255 / 10%);
+  border-radius: 26px;
+  padding: 8px 10px 10px;
+  background: #292929;
+  color: rgb(248 250 252 / 94%);
+  box-shadow: 0 18px 48px rgb(0 0 0 / 30%);
+  pointer-events: auto;
+}
+
+.openpress-inline-comment-composer[data-openpress-composer-open="false"] {
+  gap: 0;
+  border-radius: 999px;
+  padding: 8px;
+}
+
+.openpress-inline-comment-composer__intents {
+  display: flex;
+  gap: 6px;
+  padding: 0 4px;
+}
+
+.openpress-inline-comment-composer__intents button {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  border: 1px solid rgb(255 255 255 / 10%);
+  border-radius: 999px;
+  padding: 0;
+  background: rgb(255 255 255 / 6%);
+  color: rgb(238 242 246 / 72%);
+  font: inherit;
+  cursor: pointer;
+}
+
+.openpress-inline-comment-composer__intents button:hover,
+.openpress-inline-comment-composer__intents button.is-active {
+  border-color: color-mix(in srgb, var(--openpress-accent, #df4b21) 68%, transparent);
+  background: color-mix(in srgb, var(--openpress-accent, #df4b21) 22%, transparent);
+  color: #fff;
+}
+
+.openpress-inline-comment-composer__intents button svg {
+  width: 15px;
+  height: 15px;
+  stroke-width: 2.2;
+}
+
+.openpress-inline-comment-composer__body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 34px;
+  gap: 8px;
+  align-items: end;
+}
+
+.openpress-inline-comment-composer textarea {
+  width: 100%;
+  min-height: 82px;
+  max-height: 128px;
+  resize: vertical;
+  border: 0;
+  border-radius: 16px;
+  padding: 9px 11px;
+  background: rgb(255 255 255 / 5%);
+  color: rgb(248 250 252 / 94%);
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.35;
+}
+
+.openpress-inline-comment-composer textarea::placeholder {
+  color: rgb(248 250 252 / 42%);
+}
+
+.openpress-inline-comment-composer textarea:focus {
+  outline: 2px solid color-mix(in srgb, var(--openpress-accent, #df4b21) 72%, transparent);
+  outline-offset: 2px;
+}
+
+.openpress-inline-comment-composer__body > button {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border: 0;
+  border-radius: 999px;
+  background: var(--openpress-accent, #df4b21);
+  color: white;
+  cursor: pointer;
+}
+
+.openpress-inline-comment-composer__body > button:disabled {
+  cursor: not-allowed;
+  opacity: 0.42;
+}
+
+.openpress-inline-comment-composer__body > button svg {
+  width: 16px;
+  height: 16px;
+}
+
+.openpress-inline-comment-composer__suggestions {
+  display: grid;
+  gap: 4px;
+  margin-top: 10px;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--openpress-accent, #df4b21) 28%, transparent);
+  border-radius: 12px;
+  padding: 6px;
+  background: rgb(36 36 34 / 96%);
+}
+
+.openpress-inline-comment-composer__suggestions button {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 14px;
+  min-width: 0;
+  border: 0;
+  border-radius: 8px;
+  padding: 8px 10px;
+  background: transparent;
+  color: rgb(244 241 235 / 90%);
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+}
+
+.openpress-inline-comment-composer__suggestions button:hover,
+.openpress-inline-comment-composer__suggestions button:focus-visible,
+.openpress-inline-comment-composer__suggestions button[data-highlighted="true"] {
+  background: color-mix(in srgb, var(--openpress-accent, #df4b21) 18%, transparent);
+  outline: 0;
+}
+
+.openpress-inline-comment-composer__suggestions span {
+  min-width: 0;
+  overflow: hidden;
+  font-family: var(--openpress-font-mono);
+  font-size: 12px;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openpress-inline-comment-composer__suggestions small {
+  flex: 0 0 auto;
+  color: rgb(218 161 123 / 78%);
+  font-size: 10px;
+  line-height: 1.2;
+}
+
+.openpress-inline-comment-composer p {
+  min-height: 13px;
+  margin: -2px 8px 0;
+  color: rgb(203 213 225 / 68%);
+  font-size: 11px;
+  line-height: 1.25;
+}
+
+.openpress-inline-comment-composer p[data-openpress-inspector-comment-status="failed"],
+.openpress-dev-inspector-status[data-openpress-inspector-comment-status="failed"] {
+  color: rgb(248 113 113 / 92%);
+}
+
+.openpress-inline-comment-composer p[data-openpress-inspector-comment-status="saved"],
+.openpress-dev-inspector-status[data-openpress-inspector-comment-status="saved"] {
+  color: rgb(134 239 172 / 88%);
+}
+
+.openpress-public-action-entry[data-openpress-inspector-active="true"] {
+  border-color: color-mix(in srgb, var(--openpress-accent, #df4b21) 60%, transparent);
+  color: var(--openpress-accent, #df4b21);
+}
+
+.openpress-dev-inspector-status {
+  display: block;
+  overflow: hidden;
+  max-width: 100%;
+  color: currentColor;
+  font-size: 11px;
+  opacity: 0.72;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openpress-dev-inspector-comment {
+  display: grid;
+  gap: 8px;
+  padding: 12px 0;
+  border-bottom: 1px solid rgb(255 255 255 / 7%);
+}
+
+.openpress-dev-inspector-comment label {
+  color: rgb(198 204 210 / 76%);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.openpress-dev-inspector-comment textarea {
+  width: 100%;
+  min-height: 74px;
+  resize: vertical;
+  border: 1px solid rgb(255 255 255 / 11%);
+  border-radius: 6px;
+  padding: 9px 10px;
+  background: rgb(255 255 255 / 5%);
+  color: rgb(242 242 240 / 92%);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.openpress-dev-inspector-comment textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.openpress-dev-inspector-comment textarea:focus {
+  outline: 2px solid color-mix(in srgb, var(--openpress-accent, #df4b21) 58%, transparent);
+  outline-offset: 2px;
+}
+
+.openpress-dev-inspector-comment button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: 34px;
+  border: 1px solid color-mix(in srgb, var(--openpress-accent, #df4b21) 42%, transparent);
+  border-radius: 6px;
+  padding: 7px 10px;
+  background: color-mix(in srgb, var(--openpress-accent, #df4b21) 16%, transparent);
+  color: rgb(242 242 240 / 92%);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.openpress-dev-inspector-comment button:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+}
+
+.openpress-dev-inspector-comment button svg {
+  width: 13px;
+  height: 13px;
+}
+
+.openpress-dev-inspector-comment p {
+  min-height: 14px;
+  margin: 0;
+  color: rgb(198 204 210 / 70%);
+  font-size: 11px;
+  line-height: 1.25;
+}
+
+.openpress-dev-inspector-comment p[data-openpress-inspector-comment-status="failed"] {
+  color: rgb(241 107 98 / 90%);
+}
+
+.openpress-dev-inspector-comment p[data-openpress-inspector-comment-status="saved"] {
+  color: rgb(132 211 164 / 88%);
+}
+
+.openpress-comments-workspace {
+  min-height: 100%;
+  padding: 34px clamp(22px, 4vw, 56px) 56px;
+  background: #111312;
+  color: #e8e8e4;
+}
+
+.openpress-comments-workspace__header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 20px;
+  padding-bottom: 22px;
+  border-bottom: 1px solid rgb(255 255 255 / 9%);
+}
+
+.openpress-comments-workspace__header h1 {
+  margin: 4px 0 6px;
+  color: rgb(242 242 240 / 94%);
+  font-family: var(--openpress-font-serif);
+  font-size: clamp(30px, 4vw, 52px);
+  font-weight: 520;
+  line-height: 1.05;
+  letter-spacing: 0;
+}
+
+.openpress-comments-workspace__header p,
+.openpress-comments-workspace__eyebrow {
+  margin: 0;
+  color: rgb(160 166 173 / 72%);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.openpress-comments-workspace__eyebrow {
+  display: block;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.openpress-comments-workspace__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.openpress-comments-workspace button {
+  display: inline-flex;
+  min-height: 34px;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  border: 1px solid rgb(255 255 255 / 12%);
+  border-radius: 6px;
+  padding: 7px 10px;
+  background: rgb(255 255 255 / 5%);
+  color: rgb(242 242 240 / 90%);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.openpress-comments-workspace button:hover:not(:disabled) {
+  border-color: rgb(255 255 255 / 20%);
+  background: rgb(255 255 255 / 8%);
+}
+
+.openpress-comments-workspace button:disabled {
+  cursor: not-allowed;
+  opacity: 0.46;
+}
+
+.openpress-comments-workspace button svg {
+  width: 14px;
+  height: 14px;
+}
+
+.openpress-comments-workspace__error {
+  margin: 18px 0 0;
+  border-left: 3px solid rgb(248 113 113 / 76%);
+  padding: 8px 0 8px 12px;
+  color: rgb(248 113 113 / 88%);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.openpress-comments-workspace__empty {
+  margin-top: 22px;
+  border: 1px dashed rgb(255 255 255 / 13%);
+  border-radius: 8px;
+  padding: 24px;
+  color: rgb(160 166 173 / 72%);
+  font-size: 14px;
+}
+
+.openpress-comments-list {
+  display: grid;
+  gap: 12px;
+  margin: 22px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.openpress-comment-entry {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: start;
+  border: 1px solid color-mix(in srgb, var(--openpress-accent, #df4b21) 18%, rgb(255 255 255 / 8%));
+  border-radius: 10px;
+  padding: 14px;
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--openpress-accent, #df4b21) 14%, transparent), transparent 34%),
+    rgb(255 255 255 / 3.5%);
+}
+
+.openpress-comment-entry__body {
+  min-width: 0;
+}
+
+.openpress-comment-entry__topline {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: start;
+}
+
+.openpress-comment-entry__note {
+  margin: 0;
+  color: rgb(242 242 240 / 92%);
+  font-size: 14px;
+  font-weight: 650;
+  line-height: 1.55;
+}
+
+.openpress-comment-entry__intent {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  border: 1px solid color-mix(in srgb, var(--openpress-accent, #df4b21) 45%, transparent);
+  border-radius: 999px;
+  padding: 3px 8px;
+  background: color-mix(in srgb, var(--openpress-accent, #df4b21) 16%, transparent);
+  color: color-mix(in srgb, var(--openpress-accent, #df4b21) 80%, white);
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.openpress-comment-entry__meta {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 8px 10px;
+  margin: 9px 0 0;
+  color: rgb(160 166 173 / 68%);
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.openpress-comment-entry__meta code {
+  overflow-wrap: anywhere;
+  border: 1px solid rgb(255 255 255 / 8%);
+  border-radius: 6px;
+  padding: 2px 5px;
+  background: rgb(0 0 0 / 16%);
+  color: rgb(215 222 230 / 82%);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.openpress-comment-entry__hint {
+  display: inline-flex;
+  width: fit-content;
+  margin: 8px 0 0;
+  border: 1px solid color-mix(in srgb, var(--openpress-accent, #df4b21) 18%, transparent);
+  border-radius: 999px;
+  padding: 3px 8px;
+  background: color-mix(in srgb, var(--openpress-accent, #df4b21) 8%, rgb(255 255 255 / 4%));
+  color: rgb(190 184 178 / 78%);
+  font-size: 11px;
+  line-height: 1.2;
+}
+
+.openpress-comments-workspace--panel {
+  min-height: 0;
+  overflow: auto;
+  padding: 6px 22px 18px;
+  background: transparent;
+}
+
+.openpress-comments-workspace--panel .openpress-comments-workspace__header {
+  display: grid;
+  gap: 10px;
+  align-items: start;
+  padding-bottom: 12px;
+}
+
+.openpress-comments-workspace--panel .openpress-comments-workspace__header h1 {
+  margin: 2px 0 3px;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.openpress-comments-workspace--panel .openpress-comments-workspace__header p,
+.openpress-comments-workspace--panel .openpress-comments-workspace__eyebrow {
+  font-size: 11px;
+}
+
+.openpress-comments-workspace--panel .openpress-comments-workspace__actions {
+  justify-content: flex-start;
+}
+
+.openpress-comments-workspace--panel .openpress-comments-workspace__actions button {
+  width: 34px;
+  min-height: 30px;
+  padding: 0;
+  font-size: 11px;
+}
+
+.openpress-comments-workspace--panel .openpress-comments-workspace__actions button span {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.openpress-comments-workspace--panel .openpress-comments-list {
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.openpress-comments-workspace--panel .openpress-comment-entry {
+  grid-template-columns: minmax(0, 1fr);
+  gap: 10px;
+  padding: 12px;
+}
+
+.openpress-comments-workspace--panel .openpress-comment-entry__note {
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.openpress-comments-workspace--panel .openpress-comment-entry button {
+  width: fit-content;
+  min-height: 30px;
+  padding: 6px 8px;
+  font-size: 11px;
+}
+
+.openpress-comments-workspace--panel .openpress-comments-workspace__empty {
+  margin-top: 10px;
+  padding: 14px;
+  font-size: 12px;
+}
+
+.openpress-html-page__html .reader-page {
+  display: block;
+  width: min(var(--openpress-page-width), calc(100cqw - 48px));
+  height: calc(min(var(--openpress-page-width), calc(100cqw - 48px)) * var(--openpress-page-height-ratio, 1.4142857143));
+  aspect-ratio: var(--openpress-page-aspect-ratio, 210 / 297);
+  margin: 0;
+  box-shadow: 0 16px 48px rgb(0 0 0 / 24%);
+}
+
+.openpress-html-page__html .reader-page--cover,
+.openpress-html-page__html .reader-page--back-cover {
+  display: flex;
+}
+
+.openpress-html-page__html .reader-page--content figure.openpress-component-frame,
+.openpress-print-document .reader-page--content figure.openpress-component-frame {
+  width: min(100%, 168mm);
+  max-width: 100%;
+  margin: var(--openpress-space-4) auto;
+  overflow: visible;
+  box-sizing: border-box;
+  break-inside: avoid;
+}
+
+.openpress-html-page__html .reader-page--content figure.openpress-component-frame > .openpress-component-frame__body,
+.openpress-print-document .reader-page--content figure.openpress-component-frame > .openpress-component-frame__body {
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.openpress-html-page__html .reader-page--content figure.openpress-component-frame > figcaption,
+.openpress-print-document .reader-page--content figure.openpress-component-frame > figcaption {
+  display: block;
+  width: 100%;
+  margin-top: 2.6mm;
+}
+
+.openpress-print-document {
+  width: var(--openpress-page-width);
+  min-height: 100vh;
+  margin: 0;
+  background: #fff;
+  color: var(--openpress-text);
+}
+
+.openpress-print-document,
+.openpress-print-document *,
+.openpress-print-document *::before,
+.openpress-print-document *::after {
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+
+.openpress-print-document .reader-pages {
+  display: block;
+  width: var(--openpress-page-width);
+  min-height: 0;
+  padding: 0;
+  margin: 0;
+  background: #fff;
+  --reader-page-width: var(--openpress-page-width);
+}
+
+.openpress-print-document .openpress-html-page {
+  display: block;
+  width: var(--openpress-page-width);
+  max-width: none;
+  height: var(--openpress-page-height);
+  min-height: var(--openpress-page-height);
+  margin: 0;
+  overflow: hidden;
+  background: #fff;
+  break-after: page;
+  break-inside: avoid;
+  page-break-after: always;
+  page-break-inside: avoid;
+  scroll-margin-top: 0;
+}
+
+.openpress-print-document .openpress-html-page:last-child {
+  break-after: auto;
+  page-break-after: auto;
+}
+
+.openpress-print-document .openpress-html-page__html {
+  display: block;
+  width: var(--openpress-page-width);
+  max-width: none;
+  height: var(--openpress-page-height);
+  min-height: var(--openpress-page-height);
+  max-height: none;
+  margin: 0;
+  overflow: hidden;
+  background: #fff;
+  box-shadow: none;
+  outline: 0;
+  transform: none;
+  animation: none;
+  transition: none;
+}
+
+.openpress-print-document .openpress-html-page__html .reader-page,
+.openpress-print-document .openpress-html-page__html .reader-page--cover,
+.openpress-print-document .openpress-html-page__html .reader-page--back-cover {
+  display: block;
+  width: var(--openpress-page-width);
+  max-width: none;
+  height: var(--openpress-page-height);
+  aspect-ratio: var(--openpress-page-aspect-ratio, 210 / 297);
+  min-height: var(--openpress-page-height);
+  max-height: none;
+  margin: 0;
+  overflow: hidden;
+  box-shadow: none;
+  outline: 0;
+  transform: none;
+  animation: none;
+  transition: none;
+}
+
+.openpress-print-document .openpress-html-page__html .reader-page--cover,
+.openpress-print-document .openpress-html-page__html .reader-page--back-cover {
+  display: flex;
+  padding: clamp(28px, 5cqw, 48px) clamp(24px, 4.5cqw, 42px);
+}