@mosetta/editor 0.0.0-stage → 0.0.28

package/tiles/content/blockPage.css

@@ -0,0 +1,390 @@
+/* THE BLOCK'S PAGE (blockPage.tsx): the block live on a stage, its settings form always open beside
+   it, and its variants as a wall of live specimens below. */
+.block-page {
+  /* the workbench's main area is a frame of the window's height: the page scrolls inside it (the
+     settings stick to its top meanwhile) */
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  box-sizing: border-box;
+  padding: 24px 28px 40px;
+  color: #18181b;
+  font-family: ui-sans-serif, system-ui, sans-serif;
+  font-size: var(--mosetta-wb-font);
+}
+
+.block-page__header {
+  margin-bottom: 18px;
+}
+
+.block-page__back {
+  margin: 0 0 12px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: #52525b;
+  font: inherit;
+  cursor: pointer;
+}
+
+.block-page__back:hover {
+  color: #18181b;
+}
+
+.block-page__title-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.block-page__icon {
+  flex: none;
+  width: 36px;
+  height: 36px;
+  border-radius: 9px;
+}
+
+.block-page__title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 650;
+}
+
+.block-page__meta {
+  overflow: hidden;
+  color: #a1a1aa;
+  font-size: var(--mosetta-wb-font-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.block-page__note {
+  padding: 14px 4px;
+  color: #a1a1aa;
+  font-size: var(--mosetta-wb-font-sm);
+}
+
+/* the stage with the variants under it, the settings beside both — a column of the page's whole
+   height, so they stay in sight down to the last variant (Storybook's controls); where there is no
+   room, one under another: the stage, the settings, the variants */
+.block-page__main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 340px;
+  grid-template-rows: auto 1fr;
+  grid-template-areas:
+    "stage settings"
+    "variants settings";
+  gap: 16px 16px;
+  align-items: start;
+}
+
+@media (max-width: 900px) {
+  .block-page__main {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto;
+    grid-template-areas:
+      "stage"
+      "settings"
+      "variants";
+  }
+
+  .block-page__settings {
+    position: static;
+    max-height: none;
+  }
+}
+
+.block-page__stage-frame {
+  grid-area: stage;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid #e4e4e7;
+  border-radius: 12px;
+  background: #ffffff;
+}
+
+.block-page__stage-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 8px;
+  padding: 10px 14px;
+  border-bottom: 1px solid #f4f4f5;
+}
+
+.block-page__stage-name {
+  font-weight: 600;
+}
+
+.block-page__changed {
+  padding: 0 6px;
+  border-radius: 4px;
+  background: #fef3c7;
+  color: #92400e;
+  font-size: var(--mosetta-wb-font-xs);
+  line-height: 18px;
+}
+
+.block-page__stage-description {
+  color: #71717a;
+  font-size: var(--mosetta-wb-font-sm);
+}
+
+/* the block at its own size, on a quiet field that shows where it ends */
+.block-page__stage-view {
+  min-height: 220px;
+  padding: 28px;
+  overflow: auto;
+  background:
+    linear-gradient(45deg, #fafafa 25%, transparent 25%, transparent 75%, #fafafa 75%),
+    linear-gradient(45deg, #fafafa 25%, transparent 25%, transparent 75%, #fafafa 75%);
+  background-position: 0 0, 8px 8px;
+  background-size: 16px 16px;
+}
+
+/* the block's own box, on the field: where it ends shows */
+.block-page__stage {
+  display: flow-root;
+}
+
+/* the settings: the popover's frame, standing — sticky while the page scrolls */
+.block-page__settings {
+  grid-area: settings;
+  position: sticky;
+  top: 16px;
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 32px);
+  overflow: hidden;
+  border: 1px solid #e4e4e7;
+  border-radius: 12px;
+  background: #ffffff;
+  box-shadow: 0 6px 18px rgb(0 0 0 / 6%);
+}
+
+.block-page__settings-head {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+  border-bottom: 1px solid #f4f4f5;
+}
+
+.block-page__settings-name {
+  font-weight: 600;
+}
+
+.block-page__settings-note {
+  color: #a1a1aa;
+  font-size: var(--mosetta-wb-font-xs);
+}
+
+.block-page__tabs {
+  display: flex;
+  gap: 2px;
+  padding: 6px 10px 0;
+  border-bottom: 1px solid #f4f4f5;
+}
+
+.block-page__tab {
+  padding: 6px 10px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: #71717a;
+  font: inherit;
+  font-size: var(--mosetta-wb-font-sm);
+  cursor: pointer;
+}
+
+.block-page__tab:hover {
+  color: #18181b;
+}
+
+.block-page__tab--on {
+  border-bottom-color: #2563eb;
+  color: #18181b;
+}
+
+.block-page__settings-body {
+  flex: 1 1 auto;
+  min-height: 120px;
+  padding: 12px 14px;
+  overflow: auto;
+}
+
+/* one tab at a time, as in the popover (settingsTabs.ts): a named section shows on its own tab… */
+.block-page__settings-body[data-settings-tab="main"] [data-inspector-tab]:not([data-inspector-tab="main"]),
+.block-page__settings-body[data-settings-tab="styles"] [data-inspector-tab]:not([data-inspector-tab="styles"]),
+.block-page__settings-body[data-settings-tab="other"] [data-inspector-tab]:is([data-inspector-tab="main"], [data-inspector-tab="styles"]) {
+  display: none !important;
+}
+
+/* …and what the form leaves unnamed is its main settings */
+.block-page__settings-body:not([data-settings-tab="main"]) .settings__form-host :not([data-inspector-tab], [data-inspector-tab] *):not(:has([data-inspector-tab])) {
+  display: none !important;
+}
+
+.block-page__settings-foot {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 10px 14px;
+  border-top: 1px solid #f4f4f5;
+}
+
+.block-page__action {
+  height: 30px;
+  padding: 0 12px;
+  border: 1px solid #e4e4e7;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #18181b;
+  font: inherit;
+  font-size: var(--mosetta-wb-font-sm);
+  cursor: pointer;
+}
+
+.block-page__action:hover:not(:disabled) {
+  border-color: #a1a1aa;
+}
+
+/* the copy an author wants: the block, to paste on a page */
+.block-page__action--main {
+  border-color: #18181b;
+  background: #18181b;
+  color: #ffffff;
+}
+
+.block-page__action--main:hover:not(:disabled) {
+  border-color: #3f3f46;
+  background: #3f3f46;
+}
+
+.block-page__action:disabled {
+  color: #a1a1aa;
+  cursor: default;
+}
+
+.block-page__variants-frame {
+  grid-area: variants;
+  min-width: 0;
+  margin-top: 12px;
+}
+
+.block-page__variants-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 12px;
+  font-size: 16px;
+  font-weight: 650;
+}
+
+.block-page__variants-count {
+  padding: 0 7px;
+  border-radius: 9px;
+  background: #f4f4f5;
+  color: #71717a;
+  font-size: var(--mosetta-wb-font-xs);
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.block-page__variants-hint {
+  margin: -4px 0 12px;
+  color: #71717a;
+  font-size: var(--mosetta-wb-font-sm);
+}
+
+/* the variants: a wall of columns, each card as tall as its specimen — wide enough to hold a
+   block at its own size */
+.block-page__variants {
+  column-width: 340px;
+  column-gap: 16px;
+}
+
+.block-page__variant {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0 0 16px;
+  overflow: hidden;
+  border: 1px solid #e4e4e7;
+  border-radius: 12px;
+  background: #ffffff;
+  break-inside: avoid;
+  cursor: pointer;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.block-page__variant:hover {
+  border-color: #d4d4d8;
+  box-shadow: 0 6px 18px rgb(0 0 0 / 8%);
+}
+
+.block-page__variant--picked,
+.block-page__variant--picked:hover {
+  border-color: #2563eb;
+  box-shadow: 0 0 0 1px #2563eb;
+}
+
+.block-page__variant-head {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 12px;
+  border-bottom: 1px solid #f4f4f5;
+}
+
+.block-page__variant-name {
+  font-weight: 600;
+}
+
+.block-page__variant-description {
+  color: #71717a;
+  font-size: var(--mosetta-wb-font-xs);
+  line-height: 1.4;
+}
+
+/* the specimen at its own size, on the stage's field; for looking, not for clicking */
+.block-page__variant-view {
+  min-height: 48px;
+  overflow: hidden;
+  padding: 16px;
+  pointer-events: none;
+  background:
+    linear-gradient(45deg, #fafafa 25%, transparent 25%, transparent 75%, #fafafa 75%),
+    linear-gradient(45deg, #fafafa 25%, transparent 25%, transparent 75%, #fafafa 75%);
+  background-position: 0 0, 8px 8px;
+  background-size: 16px 16px;
+}
+
+.block-page__variant-stage {
+  display: flow-root;
+}
+
+.block-page__settings-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+/* the developer's copy: a small grey link under the buttons, not a button to mistake for the block's */
+.block-page__json {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: #a1a1aa;
+  font: inherit;
+  font-size: var(--mosetta-wb-font-xs);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+.block-page__json:hover {
+  color: #52525b;
+}