@goodfellow-cms/admin 0.4.0 → 0.6.0

package/styles.css

@@ -4,8 +4,11 @@
  */
 /* Each color is light-dark(light, dark): light-dark() picks by color-scheme, which follows
  * the computer's setting unless the admin panel's color menu chose (data-gfa-theme). */
-:root {
+:root:not(.gfa-frame-render) {
   color-scheme: light dark;
+}
+
+:root {
   --gfa-bg: light-dark(#f8fafc, #0b1120);
   --gfa-surface: light-dark(#ffffff, #111827);
   --gfa-text: light-dark(#0f172a, #e2e8f0);
@@ -24,11 +27,18 @@
   --gfa-published-text: light-dark(#ffffff, #022c22);
   --gfa-error-bg: light-dark(#fef2f2, #3b0d0d);
   --gfa-error-text: light-dark(#991b1b, #fca5a5);
+  --gfa-warning-bg: light-dark(#fef3c7, #451a03);
+  --gfa-warning-text: light-dark(#92400e, #fde68a);
   --gfa-demo-bg: light-dark(#fef9c3, #422006);
   --gfa-demo-border: light-dark(#fde68a, #854d0e);
   --gfa-demo-text: light-dark(#713f12, #fde68a);
+  --gfa-draft-bg: light-dark(#eff6ff, #172554);
+  --gfa-draft-border: light-dark(#bfdbfe, #1e40af);
+  --gfa-draft-text: light-dark(#1e3a8a, #dbeafe);
   --gfa-checker: light-dark(#f1f5f9, #1e293b);
   --gfa-checker-alt: light-dark(#ffffff, #0f172a);
+  --gfa-tooltip-bg: light-dark(#0f172a, #e2e8f0);
+  --gfa-tooltip-text: light-dark(#f8fafc, #0b1120);
   --gfa-radius: 6px;
   --gfa-topbar-height: 52px;
   --gfa-code-active-line: light-dark(rgb(37 99 235 / 0.06), rgb(96 165 250 / 0.08));
@@ -98,6 +108,28 @@ body,
   font-size: 14px;
 }
 
+.gfa-draft-banner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 8px 12px;
+  flex-shrink: 0;
+  padding: 6px 16px;
+  background: var(--gfa-draft-bg);
+  border-bottom: 1px solid var(--gfa-draft-border);
+  color: var(--gfa-draft-text);
+  font-size: 14px;
+}
+
+.gfa-draft-banner .gfa-draft-count {
+  font-weight: 600;
+}
+
+.gfa-draft-banner a {
+  color: inherit;
+}
+
 .gfa-brand {
   font-weight: 700;
   white-space: nowrap;
@@ -151,12 +183,178 @@ body,
   overflow: auto;
 }
 
+/* Site Settings: the sidebar, and the tab chosen beside it, left-aligned. */
+.gfa-settings {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+}
+
+.gfa-settings-content {
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+}
+
+.gfa-sidebar {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 216px;
+  padding: 12px 8px;
+  box-sizing: border-box;
+  background: var(--gfa-surface);
+  border-right: 1px solid var(--gfa-border);
+  overflow-y: auto;
+  transition: width 180ms ease;
+}
+
+.gfa-sidebar[data-collapsed] {
+  width: 56px;
+  /* Tooltips hang outside it. */
+  overflow: visible;
+}
+
+.gfa-sidebar-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.gfa-sidebar-divider {
+  width: 100%;
+  margin: 10px 0;
+  border: 0;
+  border-top: 1px solid var(--gfa-border);
+}
+
+/*
+ * A plugin's screen, drawn by the plugin in a frame of its own, which looks
+ * like any other screen: as wide as the screen, with no border, and as tall
+ * as what the plugin draws, which its frame reports.
+ */
+.gfa-plugin-screen {
+  display: block;
+  width: 100%;
+  min-height: 240px;
+  border: 0;
+  background: var(--gfa-bg);
+}
+
+.gfa-plugin-screen-wrap > .gfa-error {
+  margin: 24px;
+}
+
+.gfa-sidebar-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 36px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--gfa-radius);
+  background: none;
+  color: var(--gfa-muted);
+  font: inherit;
+  font-size: 14px;
+  text-align: left;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.gfa-sidebar-item:hover {
+  background: var(--gfa-bg);
+  color: var(--gfa-text);
+}
+
+.gfa-sidebar-item[aria-current="page"] {
+  background: var(--gfa-current-bg);
+  color: var(--gfa-accent);
+  font-weight: 600;
+}
+
+.gfa-sidebar-item:focus-visible {
+  outline: 2px solid var(--gfa-accent);
+  outline-offset: -2px;
+}
+
+.gfa-sidebar-icon {
+  flex-shrink: 0;
+}
+
+.gfa-sidebar-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.gfa-sidebar-footer {
+  margin-top: auto;
+}
+
+/* Collapsed, each name becomes a tooltip beside its icon, which fades and slides in. */
+.gfa-sidebar[data-collapsed] .gfa-sidebar-label {
+  position: absolute;
+  left: calc(100% + 10px);
+  top: 50%;
+  z-index: 20;
+  padding: 5px 9px;
+  border-radius: var(--gfa-radius);
+  background: var(--gfa-tooltip-bg);
+  color: var(--gfa-tooltip-text);
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: 0 4px 12px rgb(15 23 42 / 0.18);
+  pointer-events: none;
+  opacity: 0;
+  transform: translate(-6px, -50%);
+  transition:
+    opacity 140ms ease,
+    transform 140ms ease;
+}
+
+.gfa-sidebar[data-collapsed] .gfa-sidebar-label::before {
+  content: "";
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  border: 5px solid transparent;
+  border-right-color: var(--gfa-tooltip-bg);
+  transform: translateY(-50%);
+}
+
+.gfa-sidebar[data-collapsed] .gfa-sidebar-item:hover .gfa-sidebar-label,
+.gfa-sidebar[data-collapsed] .gfa-sidebar-item:focus-visible .gfa-sidebar-label {
+  opacity: 1;
+  transform: translate(0, -50%);
+  transition-delay: 120ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gfa-sidebar,
+  .gfa-sidebar[data-collapsed] .gfa-sidebar-label {
+    transition: none;
+  }
+}
+
 .gfa-screen {
   max-width: 960px;
   margin: 0 auto;
   padding: 24px 16px;
 }
 
+/* Site Settings' tabs sit beside the sidebar, left-aligned. */
+.gfa-settings-content > .gfa-screen {
+  margin: 0;
+  padding: 24px;
+}
+
 .gfa-screen-header {
   display: flex;
   align-items: center;
@@ -418,6 +616,66 @@ body,
   color: var(--gfa-error-text);
 }
 
+.gfa-notice-warning {
+  background: var(--gfa-demo-bg);
+  border-color: var(--gfa-demo-border);
+  color: var(--gfa-demo-text);
+}
+
+/* Scheduled publishing: when a page or item is on the site, and what's coming up. */
+.gfa-schedule {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+.gfa-schedule-times {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 16px;
+}
+
+.gfa-schedule-times .gfa-field {
+  flex: 1 1 14rem;
+}
+
+.gfa-schedule-status {
+  display: block;
+  margin-top: 2px;
+  color: var(--gfa-muted);
+  font-size: 13px;
+}
+
+.gfa-coming-up {
+  margin: 0 0 24px;
+  padding: 12px 16px;
+  border: 1px solid var(--gfa-border);
+  border-radius: var(--gfa-radius);
+  background: var(--gfa-surface);
+}
+
+.gfa-coming-up ul {
+  margin: 0 0 8px;
+  padding: 0;
+  list-style: none;
+}
+
+.gfa-coming-up li {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 8px;
+  padding: 4px 0;
+}
+
+.gfa-coming-up time {
+  font-variant-numeric: tabular-nums;
+}
+
+.gfa-coming-up-kind {
+  color: var(--gfa-muted);
+}
+
 .gfa-details summary {
   cursor: pointer;
   margin-bottom: 8px;
@@ -460,10 +718,20 @@ body,
   margin-top: 8px;
 }
 
+.gfa-check-list {
+  display: grid;
+  gap: 6px;
+  max-height: 40vh;
+  margin: 0 0 16px;
+  padding-left: 20px;
+  overflow-y: auto;
+}
+
 .gfa-editor {
   position: relative;
   display: flex;
   flex-direction: column;
+  width: 100%;
   height: 100%;
 }
 
@@ -487,13 +755,33 @@ body,
   height: 100%;
 }
 
-.gfa-layout-screen > .gfa-tabs {
-  margin: 0;
+.gfa-layout-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 16px;
   padding: 8px 16px;
   background: var(--gfa-surface);
   border-bottom: 1px solid var(--gfa-border);
 }
 
+.gfa-layout-bar > .gfa-tabs {
+  margin: 0;
+}
+
+/* A field with its label beside it, such as the layout editor's language. */
+.gfa-inline-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+}
+
+.gfa-inline-field > .gfa-input {
+  width: auto;
+}
+
 .gfa-layout-screen > .gfa-editor {
   flex: 1;
   min-height: 0;
@@ -725,6 +1013,109 @@ body,
   min-height: 0;
 }
 
+/* The editor's header, outside the frame that runs the site's code. */
+.gfa-editor-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 16px;
+  padding: 8px 16px;
+  background: var(--gfa-surface);
+  border-bottom: 1px solid var(--gfa-border);
+}
+
+.gfa-editor-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  font-size: 15px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.gfa-editor-title code {
+  color: var(--gfa-muted);
+  font-size: 13px;
+  font-weight: 400;
+}
+
+.gfa-editor-tools {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Tools an editor plugin doesn't have, such as Puck's sidebars and preview widths. */
+.gfa-editor-tools[hidden] {
+  display: none;
+}
+
+/* Which editor to edit with, where the site has editor plugins. */
+.gfa-editor-choice {
+  font-size: 13px;
+  color: var(--gfa-muted);
+}
+
+.gfa-editor-tools .gfa-button[aria-pressed="true"],
+.gfa-header-actions .gfa-button[aria-pressed="true"] {
+  background: var(--gfa-current-bg);
+}
+
+.gfa-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+}
+
+.gfa-editor-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.gfa-editor-ai-panel {
+  flex: none;
+  width: min(360px, 40vw);
+  overflow-y: auto;
+  background: var(--gfa-surface);
+  border-right: 1px solid var(--gfa-border);
+}
+
+.gfa-editor-frame-wrap {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+}
+
+.gfa-editor-frame {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: var(--gfa-bg);
+}
+
+/* The frames that run the site's code: the editor fills its page, and its canvas can be a phone's width. */
+:root.gfa-frame,
+.gfa-frame body {
+  height: 100%;
+  margin: 0;
+}
+
+.gfa-frame-editor #goodfellow-frame,
+.gfa-frame-editor .gfa-editor-puck {
+  height: 100%;
+}
+
+.gfa-frame-editor .gf-canvas {
+  width: var(--gf-canvas-width, auto);
+  max-width: 100%;
+  min-height: 100%;
+  margin-inline: auto;
+}
+
 .gfa-editor-notice {
   padding: 8px 16px;
   background: var(--gfa-surface);
@@ -979,6 +1370,54 @@ body,
 }
 
 .gfa-media-actions .gfa-button,
+/* A table's cells, in the editor's fields. */
+.gfa-table-field {
+  padding: 0 16px 16px;
+  font:
+    14px / 1.5 ui-sans-serif,
+    system-ui,
+    sans-serif;
+}
+
+.gfa-table-field-label {
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.gfa-table-field-grid {
+  display: grid;
+  gap: 4px;
+  overflow-x: auto;
+}
+
+.gfa-table-field-row {
+  display: contents;
+}
+
+.gfa-table-field-cell {
+  min-width: 0;
+}
+
+.gfa-table-field-remove {
+  border: 1px solid var(--gfa-border);
+  border-radius: var(--gfa-radius);
+  background: transparent;
+  color: var(--gfa-muted);
+  cursor: pointer;
+}
+
+.gfa-table-field-remove:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
+.gfa-table-field-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
 .gfa-media-chooser .gfa-button {
   min-height: 30px;
   padding: 0 10px;
@@ -1134,11 +1573,9 @@ body,
 
 /*
  * Items have no blocks, so the item editor leaves out Puck's Blocks and Outline
- * buttons, always the first two in its side bar (after the legacy side bar's,
- * which only shows on wide screens, when the AI assistant is off).
+ * buttons, the two after the legacy side bar's, which only shows on wide screens.
  */
-.gfa-editor-entry.gfa-editor-ai nav[class*="_Nav_"] > ul > li:nth-child(-n + 2),
-.gfa-editor-entry:not(.gfa-editor-ai) nav[class*="_Nav_"] > ul > li:nth-child(n + 2):nth-child(-n + 3) {
+.gfa-editor-for-entry nav[class*="_Nav_"] > ul > li:nth-child(n + 2):nth-child(-n + 3) {
   display: none;
 }
 
@@ -1337,6 +1774,74 @@ body,
   overflow: hidden;
 }
 
+.gfa-theme-search {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+.gfa-theme-search > :first-child {
+  flex: 1;
+}
+
+.gfa-theme-installed {
+  flex-wrap: wrap;
+}
+
+.gfa-theme-details {
+  display: grid;
+  gap: 12px;
+  margin: 16px 0;
+  padding: 16px;
+  border: 1px solid var(--gfa-border);
+  border-radius: var(--gfa-radius);
+  background: var(--gfa-surface);
+}
+
+.gfa-theme-details .gfa-screen-header {
+  margin-bottom: 0;
+}
+
+.gfa-theme-image {
+  max-width: 100%;
+  border: 1px solid var(--gfa-border);
+  border-radius: var(--gfa-radius);
+}
+
+.gfa-theme-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.gfa-theme-swatch {
+  display: block;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--gfa-border);
+  border-radius: 50%;
+}
+
+.gfa-theme-preview {
+  position: relative;
+  height: 60vh;
+  border: 1px solid var(--gfa-border);
+  border-radius: var(--gfa-radius);
+  overflow: hidden;
+}
+
+.gfa-site-changes {
+  display: grid;
+  gap: 8px;
+}
+
+.gfa-site-changes .gfa-label {
+  margin: 0 0 4px;
+}
+
 @media (max-width: 900px) {
   .gfa-versions-layout {
     grid-template-columns: 1fr;
@@ -1484,3 +1989,137 @@ body,
   justify-content: space-between;
   gap: 8px;
 }
+
+/* How a link to a page looks when it's shared, at the end of the page's settings. */
+.gfa-share-preview {
+  padding: 16px;
+  border-top: 1px solid var(--gfa-border);
+}
+
+.gfa-share-card {
+  overflow: hidden;
+  margin: 8px 0;
+  border: 1px solid var(--gfa-border);
+  border-radius: var(--gfa-radius);
+  background: var(--gfa-surface);
+}
+
+.gfa-share-image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1.91 / 1;
+  object-fit: cover;
+  background: var(--gfa-checker);
+}
+
+.gfa-share-no-image {
+  display: grid;
+  place-items: center;
+  color: var(--gfa-muted);
+  font-size: 13px;
+}
+
+.gfa-share-text {
+  display: grid;
+  gap: 2px;
+  padding: 8px 12px;
+  font-size: 14px;
+}
+
+.gfa-share-host {
+  color: var(--gfa-muted);
+  font-size: 12px;
+}
+
+.gfa-share-description {
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--gfa-muted);
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
+/* Import from WordPress */
+.gfa-import-address {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.gfa-import-address .gfa-input {
+  flex: 1 1 288px;
+  width: auto;
+}
+
+.gfa-import-summary,
+.gfa-import-notes {
+  margin: 0;
+  padding-left: 20px;
+  line-height: 1.6;
+}
+
+.gfa-import-notes li + li {
+  margin-top: 6px;
+}
+
+.gfa-import-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+/* One of the site's other languages, on Site Settings' Languages tab. */
+.gfa-language-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid var(--gfa-border);
+  border-radius: var(--gfa-radius);
+  background: var(--gfa-surface);
+}
+
+.gfa-language-card > .gfa-section-title {
+  margin: 0;
+}
+
+.gfa-language-card > .gfa-button {
+  align-self: flex-start;
+}
+
+/* A page's or item's translations, in the Pages screen's and collections' lists. */
+.gfa-translations {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 12px;
+  margin-top: 4px;
+  font-size: 14px;
+}
+
+.gfa-translation {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.gfa-badge-warning {
+  background: var(--gfa-warning-bg);
+  color: var(--gfa-warning-text);
+}
+
+.gfa-ai-translate {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--gfa-border);
+}
+
+.gfa-editor-viewports {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}