@open-press/core 0.3.0

package/src/styles/openpress/workbench-panels.css

@@ -0,0 +1,558 @@
+.openpress-html-source {
+  display: contents;
+}
+
+.openpress-workspace-panel {
+  min-width: 0;
+  height: 100%;
+  background: #171717;
+  scrollbar-width: none;
+}
+
+.openpress-reader-app .reader-thumb-strip {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.openpress-reader-app .reader-side-nav {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  overflow: hidden;
+}
+
+.openpress-workspace-panel--left {
+  padding: 18px 14px 26px;
+  border-right: 1px solid rgb(255 255 255 / 8%);
+}
+
+.openpress-workspace-panel--right {
+  min-width: 300px;
+  border-left: 1px solid rgb(255 255 255 / 8%);
+  padding: 0;
+}
+
+.openpress-reader-app.is-closed-right .openpress-workspace-panel--right,
+.openpress-reader-app.is-closed-left.is-closed-right .openpress-workspace-panel--right {
+  min-width: 0;
+}
+
+.openpress-left-nav-tabs {
+  display: grid;
+  flex: 0 0 auto;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 4px;
+}
+
+.openpress-left-nav-tab {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 5px;
+  align-items: center;
+  border: 1px solid rgb(255 255 255 / 10%);
+  padding: 7px 7px;
+  background: rgb(255 255 255 / 3%);
+  color: #858b92;
+  font: inherit;
+  font-size: 11px;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    background 160ms ease,
+    color 160ms ease;
+}
+
+.openpress-left-nav-tab:hover,
+.openpress-left-nav-tab.is-active {
+  border-color: rgb(223 75 33 / 45%);
+  background: rgb(223 75 33 / 10%);
+  color: #f2f2f0;
+}
+
+.openpress-left-nav-tab svg {
+  width: 13px;
+  height: 13px;
+  color: var(--openpress-accent);
+}
+
+.openpress-left-nav-tab span {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openpress-left-nav-tab small {
+  color: #676e76;
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+}
+
+.openpress-left-nav-tab.is-active small {
+  color: #b5babf;
+}
+
+.openpress-left-nav-body {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.openpress-left-nav-body::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+.openpress-left-page-list,
+.openpress-left-asset-list {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.openpress-left-asset-list {
+  gap: 4px;
+}
+
+.openpress-left-asset-item {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  grid-template-columns: 42px minmax(0, 1fr);
+  gap: 10px;
+  align-items: baseline;
+  border: 0;
+  padding: 9px 0;
+  background: transparent;
+  color: #8e949b;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.openpress-left-asset-item:hover,
+.openpress-left-asset-item.is-active {
+  color: #f2f2f0;
+}
+
+.openpress-left-asset-label {
+  color: #d95a36;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.openpress-left-asset-item--table .openpress-left-asset-label {
+  color: #d7a034;
+}
+
+.openpress-left-asset-copy {
+  display: grid;
+  min-width: 0;
+  gap: 3px;
+}
+
+.openpress-left-asset-copy strong {
+  overflow: hidden;
+  display: -webkit-box;
+  color: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.35;
+  word-break: keep-all;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.openpress-left-asset-copy small {
+  overflow: hidden;
+  color: #626970;
+  font-size: 10px;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openpress-left-nav-empty {
+  margin: 0;
+  padding: 12px 2px;
+  color: #70777f;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.openpress-reader-app .thumb-strip-frame {
+  outline-color: rgb(255 255 255 / 10%);
+  box-shadow: 0 8px 18px rgb(0 0 0 / 18%);
+}
+
+.openpress-reader-app .thumb-strip-content {
+  display: block;
+  height: calc(980px * var(--openpress-page-height-ratio, 1.4142857143));
+  transform: scale(0.195);
+  transform-origin: 0 0;
+}
+
+.openpress-reader-app .thumb-strip-content .reader-page {
+  display: block !important;
+  width: 980px !important;
+  height: auto !important;
+  max-height: none !important;
+  overflow: hidden !important;
+  box-shadow: none !important;
+  transform: none !important;
+}
+
+.openpress-reader-app .thumb-strip-item.is-active .thumb-strip-frame {
+  outline: 2px solid rgb(223 75 33 / 80%);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 55%), 0 6px 20px rgb(223 75 33 / 24%);
+}
+
+.openpress-reader-app .thumb-strip-item.is-active .thumb-strip-label {
+  color: #f2f2f0;
+}
+
+.openpress-reader-app .reader-side-nav .reader-bookmarks {
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  padding: 0 18px 18px 30px;
+  scrollbar-width: none;
+}
+
+.openpress-reader-app .reader-bookmarks-rail {
+  left: 18px;
+  background: rgb(255 255 255 / 10%);
+}
+
+.openpress-reader-app .bookmark-group {
+  margin-bottom: 4px;
+}
+
+.openpress-reader-app .bookmark-item {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  column-gap: 16px;
+  align-items: baseline;
+  background: transparent;
+  color: #969ca3;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.openpress-reader-app .bookmark-item:hover,
+.openpress-reader-app .bookmark-item.is-active {
+  color: #f2f2f0;
+}
+
+.openpress-reader-app .bookmark-index {
+  display: block;
+  min-width: 0;
+  color: inherit;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+.openpress-reader-app .bookmark-h2 {
+  grid-template-columns: 34px minmax(0, 1fr);
+  padding: 10px 0 9px;
+  color: #d2d6da;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.38;
+}
+
+.openpress-reader-app .bookmark-h2 .bookmark-index {
+  color: #f2f2f0;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.35;
+}
+
+.openpress-reader-app .bookmark-h3 {
+  grid-template-columns: 50px minmax(0, 1fr);
+  padding: 7px 0 7px 64px;
+  color: #757b82;
+  font-size: 13px;
+  line-height: 1.35;
+}
+
+.openpress-reader-app .bookmark-h3.is-active,
+.openpress-reader-app .bookmark-h3:hover {
+  color: #f2f2f0;
+}
+
+.openpress-reader-app .bookmark-subgroup {
+  display: flex;
+  flex-direction: column;
+}
+
+.openpress-reader-app .bookmark-h4 {
+  grid-template-columns: 54px minmax(0, 1fr);
+  padding: 5px 0 5px 82px;
+  color: #666c73;
+  font-size: 12px;
+  line-height: 1.32;
+}
+
+.openpress-reader-app .bookmark-h4.is-active,
+.openpress-reader-app .bookmark-h4:hover {
+  color: #f2f2f0;
+}
+
+.openpress-reader-app .bookmark-title {
+  overflow: hidden;
+  display: -webkit-box;
+  min-width: 0;
+  white-space: normal;
+  word-break: keep-all;
+  overflow-wrap: normal;
+  line-break: loose;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.openpress-reader-app .bookmark-h3 .bookmark-title {
+  -webkit-line-clamp: 2;
+}
+
+.openpress-reader-app .bookmark-h4 .bookmark-title {
+  -webkit-line-clamp: 1;
+}
+
+.openpress-reader-app .bookmark-subs {
+  display: block;
+  max-height: 0;
+  overflow: hidden;
+  padding-bottom: 0;
+  opacity: 0;
+  transform: translateY(-6px);
+  transition:
+    max-height 340ms cubic-bezier(0.22, 0.61, 0.36, 1),
+    opacity 180ms ease,
+    padding-bottom 340ms cubic-bezier(0.22, 0.61, 0.36, 1),
+    transform 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
+  will-change: max-height, opacity, transform;
+  pointer-events: none;
+}
+
+.openpress-reader-app .bookmark-group.is-open .bookmark-subs {
+  max-height: none;
+  overflow: visible;
+  padding-bottom: 8px;
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.openpress-public-viewer.openpress-reader-app .bookmark-item {
+  column-gap: 8px;
+}
+
+.openpress-public-viewer.openpress-reader-app .bookmark-h2 {
+  grid-template-columns: 24px minmax(0, 1fr);
+  padding: 8px 0 7px;
+  font-family: var(--openpress-font-serif);
+  font-size: 14px;
+  line-height: 1.42;
+}
+
+.openpress-public-viewer.openpress-reader-app .bookmark-h3 {
+  grid-template-columns: 24px minmax(0, 1fr);
+  column-gap: 8px;
+  padding: 4px 0 4px 32px;
+  font-family: var(--openpress-font-serif);
+  font-size: 14px;
+  line-height: 1.42;
+}
+
+.openpress-public-viewer.openpress-reader-app .bookmark-title {
+  display: block;
+  overflow: visible;
+  font-family: var(--openpress-font-serif);
+  letter-spacing: 0;
+  -webkit-line-clamp: unset;
+}
+
+.openpress-public-viewer.openpress-reader-app .bookmark-h3 .bookmark-index {
+  font-size: 12px;
+}
+
+.openpress-panel-section {
+  min-width: 0;
+  min-height: 0;
+}
+
+.openpress-panel-section--current {
+  border-bottom: 1px solid rgb(255 255 255 / 8%);
+  padding: 18px 0 16px;
+}
+
+.openpress-current-page-card {
+  display: grid;
+  gap: 8px;
+  padding: 0 18px 0 30px;
+}
+
+.openpress-current-page-card__number {
+  display: flex;
+  align-items: baseline;
+  gap: 7px;
+  color: #f2f2f0;
+  font-size: 28px;
+  font-weight: 400;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.03em;
+}
+
+.openpress-current-page-card__number .sep {
+  color: #5f656c;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.openpress-current-page-card__number [data-openpress-total-pages] {
+  color: #8c939a;
+  font-size: 16px;
+}
+
+.openpress-current-page-card__prefix {
+  color: #7f858c;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+}
+
+.openpress-current-page-card__title {
+  overflow: hidden;
+  color: #9ba1a8;
+  font-size: 12px;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openpress-current-page-card__progress {
+  overflow: hidden;
+  width: 100%;
+  height: 2px;
+  background: rgb(255 255 255 / 10%);
+}
+
+.openpress-current-page-card__progress span {
+  display: block;
+  width: var(--progress, 0%);
+  height: 100%;
+  background: var(--openpress-accent);
+  transition: width 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+.openpress-panel-section--bookmarks {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  min-height: 0;
+  overflow: hidden;
+  padding-top: 18px;
+}
+
+.openpress-panel-heading {
+  padding: 0 18px 12px 30px;
+  color: #73787f;
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.openpress-asset-index {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  max-height: 38vh;
+  border-top: 1px solid rgb(255 255 255 / 8%);
+  padding: 16px 0 18px;
+  overflow: hidden;
+}
+
+.openpress-asset-list {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  gap: 2px;
+  overflow: auto;
+  padding: 0 18px 0 30px;
+  scrollbar-width: none;
+}
+
+.openpress-asset-list::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+.openpress-asset-link {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  gap: 10px;
+  align-items: baseline;
+  padding: 7px 0;
+  color: #9aa0a6;
+  text-decoration: none;
+}
+
+.openpress-asset-link:hover {
+  color: #f1f1ef;
+}
+
+.openpress-asset-label {
+  color: #d95a36;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.openpress-asset-link--table .openpress-asset-label {
+  color: #d7a034;
+}
+
+.openpress-asset-title {
+  display: -webkit-box;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 1.38;
+  word-break: keep-all;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.openpress-asset-title small {
+  display: block;
+  margin-top: 3px;
+  overflow: hidden;
+  color: #62676d;
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openpress-asset-empty {
+  margin: 0;
+  padding: 0 18px 0 30px;
+  color: #696f75;
+  font-size: 12px;
+}