@open-press/core 0.3.0

package/src/styles/openpress/responsive.css

@@ -0,0 +1,384 @@
+@media (max-width: 1184px) {
+  .openpress-shell {
+    padding: 18px;
+  }
+}
+
+@media screen and (max-width: 899px) {
+  .openpress-workbench,
+  .openpress-workbench[data-panel-open="false"] {
+    display: block;
+    min-height: 100vh;
+  }
+
+  .openpress-reader-app,
+  .openpress-reader-app.is-closed-left,
+  .openpress-reader-app.is-closed-right,
+  .openpress-reader-app.is-closed-left.is-closed-right {
+    grid-template-rows: 58px minmax(0, 1fr);
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "nav"
+      "main";
+  }
+
+  .openpress-workspace-navbar {
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 8px;
+    padding: 0 12px;
+  }
+
+  .openpress-workspace-brand strong {
+    max-width: 42vw;
+    font-size: 13px;
+  }
+
+  .openpress-workspace-progress {
+    position: absolute;
+    right: 14px;
+    bottom: 0;
+    left: 14px;
+    width: auto;
+  }
+
+  .openpress-page-count {
+    display: none;
+  }
+
+  .openpress-navbar-button {
+    height: 32px;
+    padding: 0 10px;
+  }
+
+  .openpress-reader-app .reader-thumb-strip {
+    position: static;
+    display: flex !important;
+    width: 100%;
+    height: 100%;
+  }
+
+  .openpress-editor-rail {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 34;
+    flex-direction: row;
+    justify-content: center;
+    border-top: 1px solid rgb(255 255 255 / 9%);
+    border-right: 0;
+    padding: 6px max(8px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));
+  }
+
+  .openpress-editor-rail__button {
+    min-width: 66px;
+    padding: 7px 9px;
+  }
+
+  .openpress-editor-navigator {
+    position: fixed;
+    top: 58px;
+    bottom: calc(52px + env(safe-area-inset-bottom));
+    left: 0;
+    z-index: 25;
+    width: min(78vw, 320px);
+    transform: translateX(0);
+    transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
+    box-shadow: 16px 0 34px rgb(0 0 0 / 36%);
+  }
+
+  .openpress-reader-app.is-closed-left .openpress-editor-navigator {
+    transform: translateX(-100%);
+    pointer-events: none;
+    box-shadow: none;
+  }
+
+  .openpress-reader-app.is-closed-left .openpress-editor-navigator > * {
+    opacity: 1;
+  }
+
+  .openpress-reader-app .reader-side-nav {
+    position: fixed;
+    top: 58px;
+    right: 0;
+    z-index: 25;
+    display: grid !important;
+    min-width: 0;
+    width: min(82vw, 340px);
+    height: calc(100dvh - 110px - env(safe-area-inset-bottom));
+    transform: translateX(0);
+    transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
+    box-shadow: -16px 0 34px rgb(0 0 0 / 36%);
+  }
+
+  .openpress-reader-app.is-closed-right .reader-side-nav {
+    display: grid !important;
+    transform: translateX(100%);
+    pointer-events: none;
+    box-shadow: none;
+  }
+
+  .openpress-reader-app.is-floating-backdrop::before {
+    top: 0;
+  }
+
+  .openpress-reader-app .reader-stage {
+    height: 100%;
+    min-height: 0;
+  }
+
+  .openpress-reader-app .reader-pages {
+    gap: 18px;
+    padding: 16px 14px calc(96px + env(safe-area-inset-bottom));
+  }
+
+  .openpress-reader-app .reader-page {
+    scroll-margin-top: 16px;
+  }
+
+  .openpress-public-viewer .reader-pages {
+    padding: 16px 10px calc(80px + env(safe-area-inset-bottom));
+  }
+
+  .openpress-public-viewer .openpress-html-page,
+  .openpress-html-page {
+    width: 100%;
+    margin-bottom: 8px;
+    scroll-margin-top: 68px;
+    container-type: inline-size;
+  }
+
+  .openpress-public-viewer .openpress-html-page__html .reader-page,
+  .openpress-public-viewer .openpress-html-page__html .reader-page--cover,
+  .openpress-public-viewer .openpress-html-page__html .reader-page--back-cover,
+  .openpress-html-page__html .reader-page,
+  .openpress-html-page__html .reader-page--cover,
+  .openpress-html-page__html .reader-page--back-cover {
+    width: 100%;
+    height: auto;
+    min-height: calc(100cqw * var(--openpress-page-height-ratio, 1.4142857143));
+    aspect-ratio: var(--openpress-page-aspect-ratio, 210 / 297);
+    max-height: none;
+    overflow: visible;
+    margin: 0 auto;
+    box-shadow: 0 10px 30px rgb(0 0 0 / 26%);
+  }
+
+  .openpress-public-viewer .openpress-html-page__html .reader-page .page-frame {
+    height: auto;
+    min-height: inherit;
+    grid-template-rows: auto minmax(max-content, 1fr) auto;
+  }
+
+  .openpress-public-viewer .openpress-html-page__html .reader-page.no-footer .page-frame {
+    grid-template-rows: auto minmax(max-content, 1fr);
+  }
+
+  .openpress-public-viewer .openpress-html-page__html .reader-page .page-body {
+    overflow: visible;
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="paged"] .openpress-html-page__html .reader-page {
+    height: calc(100cqw * var(--openpress-page-height-ratio, 1.4142857143));
+    min-height: calc(100cqw * var(--openpress-page-height-ratio, 1.4142857143));
+    aspect-ratio: var(--openpress-page-aspect-ratio, 210 / 297);
+    max-height: none;
+    overflow: hidden;
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="paged"] .openpress-html-page__html .reader-page .page-frame {
+    height: 100%;
+    min-height: 0;
+    grid-template-rows: var(--page-header-height) minmax(0, 1fr) var(--page-footer-height);
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="paged"] .openpress-html-page__html .reader-page.no-footer .page-frame {
+    grid-template-rows: var(--page-header-height) minmax(0, 1fr);
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="paged"] .reader-page--content figure,
+  .openpress-public-viewer[data-openpress-view-mode="paged"] .reader-page--content table {
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior-x: contain;
+  }
+}
+
+@media (max-width: 1184px) {
+  .openpress-public-viewer.reader-app,
+  .openpress-public-viewer.openpress-reader-app,
+  .openpress-public-viewer.openpress-reader-app.is-closed-right {
+    grid-template-rows: minmax(0, 1fr);
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "main";
+  }
+
+  .openpress-public-viewer.openpress-reader-app .openpress-public-navigation {
+    position: fixed;
+    top: 0;
+    right: auto;
+    bottom: 0;
+    left: 0;
+    z-index: 40;
+    display: grid !important;
+    width: min(88vw, var(--openpress-public-nav-max-width));
+    min-width: 0;
+    max-width: var(--openpress-public-nav-max-width);
+    height: 100dvh;
+    margin: 0;
+    grid-template-rows: auto auto minmax(0, 1fr) auto;
+    overflow-x: hidden;
+    background: #181818;
+    box-shadow: 16px 0 44px rgb(0 0 0 / 42%);
+    transform: translateX(0);
+    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
+  }
+
+  .openpress-dev-public-navigation {
+    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
+  }
+
+  .openpress-public-viewer[data-active-workspace="project"] .openpress-dev-public-navigation {
+    grid-template-rows: auto auto minmax(0, 1fr) auto;
+  }
+
+  .openpress-public-viewer.openpress-reader-app .openpress-public-identity {
+    min-width: 0;
+    padding-right: 54px;
+  }
+
+  .openpress-public-viewer.openpress-reader-app .openpress-public-identity strong,
+  .openpress-public-viewer.openpress-reader-app .openpress-public-title-main,
+  .openpress-public-viewer.openpress-reader-app .openpress-public-title-sub {
+    min-width: 0;
+    max-width: 100%;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: normal;
+  }
+
+  .openpress-public-viewer.openpress-reader-app .reader-bookmarks {
+    overflow-x: hidden;
+  }
+
+  .openpress-public-viewer.openpress-reader-app.is-closed-right .openpress-public-navigation {
+    transform: translateX(-110%);
+    pointer-events: none;
+    box-shadow: none;
+  }
+
+  .openpress-public-viewer.openpress-reader-app[data-openpress-pagination="pending"] .openpress-public-navigation {
+    transform: translateX(-110%);
+    pointer-events: none;
+    box-shadow: none;
+  }
+
+  .openpress-public-viewer.openpress-reader-app .openpress-public-scrim {
+    position: fixed;
+    inset: 0;
+    z-index: 35;
+    background: rgb(0 0 0 / 42%);
+    backdrop-filter: blur(1px);
+  }
+
+  .openpress-public-viewer.openpress-reader-app.is-closed-right .openpress-public-fab {
+    position: fixed;
+    left: 20px;
+    bottom: calc(24px + env(safe-area-inset-bottom));
+    z-index: 30;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    border: 1px solid rgb(255 255 255 / 14%);
+    border-radius: 50%;
+    background: rgb(28 28 28 / 96%);
+    color: #f2f2f0;
+    box-shadow: 0 4px 20px rgb(0 0 0 / 50%);
+    backdrop-filter: blur(10px);
+  }
+
+  .openpress-public-viewer.openpress-reader-app:not(.is-closed-right) .openpress-public-fab {
+    display: none;
+  }
+
+  .openpress-public-viewer.openpress-reader-app:not(.is-closed-right) .openpress-public-scrim {
+    display: block;
+  }
+
+  .openpress-public-viewer.openpress-reader-app[data-openpress-pagination="pending"] .openpress-public-scrim {
+    display: none;
+  }
+
+  .openpress-public-viewer.openpress-reader-app[data-openpress-pagination="pending"] .openpress-public-fab {
+    display: flex;
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="paged"] .reader-pages {
+    --openpress-public-page-width: min(
+      var(--openpress-page-width),
+      860px,
+      calc(100cqw - 48px)
+    );
+  }
+
+  .openpress-public-viewer .openpress-html-page {
+    width: min(100%, var(--openpress-public-page-width));
+    container-type: inline-size;
+  }
+
+  .openpress-public-viewer .openpress-html-page__html .reader-page,
+  .openpress-public-viewer .openpress-html-page__html .reader-page--cover,
+  .openpress-public-viewer .openpress-html-page__html .reader-page--back-cover {
+    width: 100%;
+    height: auto;
+    min-height: min(calc(100cqw * var(--openpress-page-height-ratio, 1.4142857143)), calc(100dvh - 48px));
+    aspect-ratio: var(--openpress-page-aspect-ratio, 210 / 297);
+    max-height: none;
+    overflow: visible;
+  }
+
+  .openpress-public-viewer .openpress-html-page__html .reader-page .page-frame {
+    height: auto;
+    min-height: inherit;
+    grid-template-rows: auto minmax(max-content, 1fr) auto;
+  }
+
+  .openpress-public-viewer .openpress-html-page__html .reader-page.no-footer .page-frame {
+    grid-template-rows: auto minmax(max-content, 1fr);
+  }
+
+  .openpress-public-viewer .openpress-html-page__html .reader-page .page-body {
+    overflow: visible;
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="paged"] .openpress-html-page__html .reader-page {
+    height: calc(100cqw * var(--openpress-page-height-ratio, 1.4142857143));
+    min-height: calc(100cqw * var(--openpress-page-height-ratio, 1.4142857143));
+    aspect-ratio: var(--openpress-page-aspect-ratio, 210 / 297);
+    max-height: none;
+    overflow: hidden;
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="paged"] .openpress-html-page__html .reader-page .page-frame {
+    height: 100%;
+    min-height: 0;
+    grid-template-rows: var(--page-header-height) minmax(0, 1fr) var(--page-footer-height);
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="paged"] .openpress-html-page__html .reader-page.no-footer .page-frame {
+    grid-template-rows: var(--page-header-height) minmax(0, 1fr);
+  }
+
+  .openpress-public-viewer[data-openpress-view-mode="paged"] .reader-page--content figure,
+  .openpress-public-viewer[data-openpress-view-mode="paged"] .reader-page--content table {
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior-x: contain;
+  }
+}