@goodfellow-cms/admin 0.5.0 → 0.7.0

package/styles.css

@@ -196,11 +196,6 @@ body,
   overflow: auto;
 }
 
-.gfa-settings-content > .gfa-screen {
-  margin: 0;
-  padding: 24px;
-}
-
 .gfa-sidebar {
   display: flex;
   flex-direction: column;
@@ -236,6 +231,23 @@ body,
   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;
@@ -282,7 +294,7 @@ body,
   text-overflow: ellipsis;
 }
 
-.gfa-sidebar-toggle {
+.gfa-sidebar-footer {
   margin-top: auto;
 }
 
@@ -337,6 +349,12 @@ body,
   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;
@@ -995,6 +1013,39 @@ body,
   min-height: 0;
 }
 
+/* The search box at the top of Puck's block list, and what it finds. */
+.gfa-block-search-box {
+  padding: 12px 16px 4px;
+}
+
+.gfa-block-search-input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid var(--gfa-input-border);
+  border-radius: 6px;
+  background: var(--gfa-surface);
+  color: var(--gfa-text);
+  font: inherit;
+  font-size: 14px;
+}
+
+.gfa-block-search-input:focus-visible {
+  outline: 2px solid var(--gfa-accent);
+  outline-offset: 1px;
+}
+
+.gfa-block-search-results {
+  padding: 8px 16px 16px;
+}
+
+.gfa-block-search-none {
+  margin: 0;
+  padding: 12px 16px;
+  color: var(--gfa-muted);
+  font-size: 14px;
+}
+
 /* The editor's header, outside the frame that runs the site's code. */
 .gfa-editor-header {
   display: flex;
@@ -1028,6 +1079,17 @@ body,
   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);
@@ -1068,6 +1130,47 @@ body,
   background: var(--gfa-bg);
 }
 
+/* An editor plugin's frame, with what shows over it until the editor has opened. */
+.gfa-plugin-editor-wrap {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+}
+
+.gfa-editor-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  background: var(--gfa-bg);
+  color: var(--gfa-muted);
+}
+
+.gfa-spinner {
+  width: 28px;
+  height: 28px;
+  border: 3px solid var(--gfa-border);
+  border-top-color: var(--gfa-accent);
+  border-radius: 50%;
+  animation: gfa-spin 0.8s linear infinite;
+}
+
+@keyframes gfa-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gfa-spinner {
+    animation-duration: 2.4s;
+  }
+}
+
 /* 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 {
@@ -1341,6 +1444,186 @@ 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;
+}
+
+/* A block's Style field in the editor (frame/style-field.tsx). */
+.gfa-style-field {
+  display: grid;
+  gap: 14px;
+  padding: 0 16px 16px;
+  font:
+    14px / 1.5 ui-sans-serif,
+    system-ui,
+    sans-serif;
+}
+
+.gfa-style-title {
+  font-weight: 600;
+}
+
+.gfa-style-group {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.gfa-style-choice {
+  display: grid;
+  gap: 4px;
+}
+
+.gfa-style-label {
+  padding: 0;
+  color: var(--gfa-text);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.gfa-style-segments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.gfa-style-segment {
+  padding: 4px 8px;
+  border: 1px solid var(--gfa-input-border);
+  border-radius: var(--gfa-radius);
+  background: var(--gfa-surface);
+  color: var(--gfa-text);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.gfa-style-segment[aria-pressed="true"] {
+  border-color: var(--gfa-accent);
+  background: var(--gfa-accent);
+  color: var(--gfa-accent-text);
+}
+
+.gfa-style-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.gfa-style-swatch {
+  position: relative;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--gfa-input-border);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.gfa-style-swatch[aria-pressed="true"] {
+  outline: 2px solid var(--gfa-accent);
+  outline-offset: 2px;
+}
+
+/* "As the block has it": a struck-through swatch. */
+.gfa-style-swatch-none {
+  background: linear-gradient(
+    135deg,
+    var(--gfa-surface) 45%,
+    var(--gfa-muted) 45%,
+    var(--gfa-muted) 55%,
+    var(--gfa-surface) 55%
+  );
+}
+
+/* A color of the editor's own: the browser's color picker, filling the swatch. */
+.gfa-style-swatch-own {
+  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
+}
+
+.gfa-style-swatch-own input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.gfa-style-swatch:disabled,
+.gfa-style-segment:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.gfa-style-sides {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.gfa-style-check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+}
+
+.gfa-style-warning {
+  padding: 6px 8px;
+  border-radius: var(--gfa-radius);
+  background: var(--gfa-warning-bg);
+  color: var(--gfa-warning-text);
+}
+
 .gfa-media-chooser .gfa-button {
   min-height: 30px;
   padding: 0 10px;
@@ -1697,6 +1980,65 @@ 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;
@@ -1987,3 +2329,40 @@ body,
   padding: 0;
   border: 0;
 }
+
+/* Blocks' icons in the block list, in place of Puck's drag handle, which every block shares. */
+.gfa-drawer-item {
+  position: relative;
+}
+
+.gfa-drawer-item .gfa-block-icon {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
+  flex-shrink: 0;
+  color: var(--gfa-muted);
+  pointer-events: none;
+}
+
+.gfa-drawer-item [class*="_DrawerItem-draggable_"] {
+  justify-content: flex-start;
+  padding-left: 34px;
+}
+
+.gfa-drawer-item [class*="_DrawerItem-draggable_"] > :last-child:not([class*="_DrawerItem-name_"]) {
+  display: none;
+}
+
+.gfa-fieldset {
+  display: grid;
+  gap: 6px;
+  margin: 0 0 16px;
+  padding: 0;
+  border: 0;
+}
+
+.gfa-fieldset legend {
+  margin-bottom: 6px;
+  font-weight: 600;
+}