@goodfellow-cms/admin 0.6.0 → 0.8.0

package/plugin.css

@@ -1,8 +1,10 @@
 /*
  * The base look of a plugin's admin frame: the admin panel's colors, as
- * `--gfa-*` custom properties that follow its light or dark choice, its
- * font, and plain buttons, fields and headings. A plugin's screens can use
- * the properties in styles of their own.
+ * `--gfa-*` custom properties that follow its light or dark choice, and its
+ * font, and on screens, the screens' spacing and plain buttons, fields and
+ * headings. A plugin's screens can use the properties in styles of their own.
+ * An editor plugin's frame (`gfa-plugin-editor`) gets the colors and font
+ * only, since what it draws is its own, and the site's blocks among it.
  */
 :root {
   color-scheme: light dark;
@@ -66,65 +68,67 @@ body {
     sans-serif;
 }
 
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* The rest is for screens only. */
+
 /* Spaced as the admin panel's other screens, since a screen's frame fills the screen. */
-body {
+:where(html:not(.gfa-plugin-editor)) body {
   padding: 24px;
   max-width: 960px;
 }
 
 /* Nothing in a screen's frame scrolls on its own: the frame grows with it. */
-html {
+html:not(.gfa-plugin-editor) {
   overflow: hidden;
 }
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-h1,
-h2,
-h3 {
+:where(html:not(.gfa-plugin-editor)) h1,
+:where(html:not(.gfa-plugin-editor)) h2,
+:where(html:not(.gfa-plugin-editor)) h3 {
   line-height: 1.25;
   margin: 0 0 0.75rem;
 }
 
-h1 {
+:where(html:not(.gfa-plugin-editor)) h1 {
   font-size: 24px;
   margin-bottom: 16px;
 }
 
-h2 {
+:where(html:not(.gfa-plugin-editor)) h2 {
   font-size: 17px;
 }
 
-h3 {
+:where(html:not(.gfa-plugin-editor)) h3 {
   font-size: 15px;
   margin-top: 1.25rem;
 }
 
-section {
+:where(html:not(.gfa-plugin-editor)) section {
   margin-top: 2rem;
 }
 
-p {
+:where(html:not(.gfa-plugin-editor)) p {
   margin: 0 0 0.75rem;
 }
 
-a {
+:where(html:not(.gfa-plugin-editor)) a {
   color: var(--gfa-accent);
 }
 
-label {
+:where(html:not(.gfa-plugin-editor)) label {
   display: block;
   font-weight: 600;
   margin-bottom: 0.25rem;
 }
 
-input,
-select,
-textarea {
+:where(html:not(.gfa-plugin-editor)) input,
+:where(html:not(.gfa-plugin-editor)) select,
+:where(html:not(.gfa-plugin-editor)) textarea {
   font: inherit;
   color: inherit;
   background: var(--gfa-surface);
@@ -135,7 +139,7 @@ textarea {
   max-width: 32rem;
 }
 
-button {
+:where(html:not(.gfa-plugin-editor)) button {
   font: inherit;
   font-weight: 600;
   cursor: pointer;
@@ -146,24 +150,24 @@ button {
   padding: 0.4rem 0.9rem;
 }
 
-button:disabled {
+:where(html:not(.gfa-plugin-editor)) button:disabled {
   cursor: default;
   opacity: 0.6;
 }
 
-:focus-visible {
+:where(html:not(.gfa-plugin-editor)) :focus-visible {
   outline: 2px solid var(--gfa-accent);
   outline-offset: 2px;
 }
 
-input[type="checkbox"],
-input[type="radio"] {
+:where(html:not(.gfa-plugin-editor)) input[type="checkbox"],
+:where(html:not(.gfa-plugin-editor)) input[type="radio"] {
   width: auto;
   margin: 0 0.4rem 0 0;
 }
 
-small,
-.gfa-hint {
+:where(html:not(.gfa-plugin-editor)) small,
+:where(html:not(.gfa-plugin-editor)) .gfa-hint {
   display: block;
   color: var(--gfa-muted);
   font-size: 13px;
@@ -171,24 +175,24 @@ small,
   max-width: 40rem;
 }
 
-ol,
-ul {
+:where(html:not(.gfa-plugin-editor)) ol,
+:where(html:not(.gfa-plugin-editor)) ul {
   padding-left: 1.25rem;
   margin: 0 0 0.75rem;
   max-width: 44rem;
 }
 
-li {
+:where(html:not(.gfa-plugin-editor)) li {
   margin-bottom: 0.5rem;
 }
 
-code,
-pre {
+:where(html:not(.gfa-plugin-editor)) code,
+:where(html:not(.gfa-plugin-editor)) pre {
   font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
   font-size: 13px;
 }
 
-pre {
+:where(html:not(.gfa-plugin-editor)) pre {
   margin: 0.4rem 0 0;
   padding: 0.5rem 0.75rem;
   max-width: 40rem;
@@ -198,11 +202,11 @@ pre {
   border-radius: var(--gfa-radius);
 }
 
-details {
+:where(html:not(.gfa-plugin-editor)) details {
   margin: 0.75rem 0;
 }
 
-summary {
+:where(html:not(.gfa-plugin-editor)) summary {
   cursor: pointer;
   font-weight: 600;
 }

package/styles.css

@@ -177,6 +177,153 @@ body,
   white-space: nowrap;
 }
 
+/* The header's links, the site's address and the account: in the header itself, or under the menu button in narrow windows. */
+.gfa-topbar-menu {
+  display: contents;
+}
+
+.gfa-menu-button {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid var(--gfa-input-border);
+  border-radius: var(--gfa-radius);
+  background: var(--gfa-surface);
+  color: var(--gfa-text);
+  cursor: pointer;
+}
+
+@media (min-width: 721px) {
+  .gfa-topbar-menu > .gfa-account,
+  .gfa-topbar-menu > .gfa-language {
+    order: 1;
+  }
+}
+
+/* The admin panel's language, as small as the header's other controls. */
+.gfa-language select {
+  height: 28px;
+  padding: 0 6px;
+  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;
+}
+
+@media (max-width: 720px) {
+  .gfa-topbar {
+    position: relative;
+    gap: 12px;
+  }
+
+  .gfa-brand {
+    flex: 1;
+    min-width: 0;
+    max-width: none;
+  }
+
+  .gfa-menu-button {
+    display: inline-flex;
+  }
+
+  .gfa-topbar-menu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 50;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+    max-height: calc(100vh - var(--gfa-topbar-height));
+    overflow-y: auto;
+    padding: 8px 16px 16px;
+    background: var(--gfa-surface);
+    border-bottom: 1px solid var(--gfa-border);
+    box-shadow: 0 8px 16px rgb(0 0 0 / 0.12);
+  }
+
+  .gfa-topbar-menu[data-open] {
+    display: flex;
+  }
+
+  .gfa-topbar-menu .gfa-nav {
+    flex-direction: column;
+    flex: none;
+    overflow: visible;
+  }
+
+  .gfa-topbar-menu .gfa-nav a {
+    padding: 10px 12px;
+  }
+
+  .gfa-topbar-menu .gfa-topbar-link {
+    padding: 0 12px;
+  }
+
+  .gfa-topbar-menu .gfa-account {
+    flex-wrap: wrap;
+    padding: 12px 12px 0;
+    border-top: 1px solid var(--gfa-border);
+    white-space: normal;
+  }
+
+  .gfa-topbar-menu .gfa-language {
+    padding: 0 12px;
+  }
+}
+
+/* Dark mode on or off: a track with a sun or moon on its thumb. */
+.gfa-dark-switch {
+  position: relative;
+  flex-shrink: 0;
+  width: 44px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid var(--gfa-input-border);
+  border-radius: 999px;
+  background: var(--gfa-bg);
+  cursor: pointer;
+}
+
+.gfa-dark-switch-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--gfa-surface);
+  color: var(--gfa-muted);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
+  transition: transform 150ms ease;
+}
+
+.gfa-dark-switch[aria-checked="true"] {
+  background: var(--gfa-accent);
+  border-color: var(--gfa-accent);
+}
+
+.gfa-dark-switch[aria-checked="true"] .gfa-dark-switch-thumb {
+  transform: translateX(20px);
+  color: var(--gfa-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gfa-dark-switch-thumb {
+    transition: none;
+  }
+}
+
 .gfa-content {
   flex: 1;
   min-height: 0;
@@ -439,7 +586,9 @@ body,
 .gfa-button:focus-visible,
 .gfa-input:focus-visible,
 .gfa-nav a:focus-visible,
-.gfa-tab:focus-visible {
+.gfa-tab:focus-visible,
+.gfa-dark-switch:focus-visible,
+.gfa-menu-button:focus-visible {
   outline: 2px solid var(--gfa-accent);
   outline-offset: 2px;
 }
@@ -1013,6 +1162,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;
@@ -1097,6 +1279,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 {
@@ -1370,6 +1593,33 @@ body,
 }
 
 .gfa-media-actions .gfa-button,
+/* A setting only the site's owners may change, shown to editors as it is (frame/owners-only.tsx). */
+.gfa-locked-field {
+  padding: 0 16px 16px;
+  font:
+    14px / 1.5 ui-sans-serif,
+    system-ui,
+    sans-serif;
+}
+
+.gfa-locked-field-label {
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.gfa-locked-field-value {
+  padding: 10px 12px;
+  border: 1px solid var(--gfa-border);
+  border-radius: 4px;
+  background: var(--gfa-bg);
+}
+
+.gfa-locked-field-note {
+  margin: 6px 0 0;
+  color: var(--gfa-muted);
+  font-size: 13px;
+}
+
 /* A table's cells, in the editor's fields. */
 .gfa-table-field {
   padding: 0 16px 16px;
@@ -1418,6 +1668,138 @@ body,
   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;
@@ -1702,17 +2084,6 @@ body,
   --puck-color-white: light-dark(#ffffff, #111827);
 }
 
-.gfa-theme-menu {
-  min-height: 32px;
-  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: 14px;
-}
-
 /* The Domain screen's records: values such as verification codes are long and unbroken. */
 .gfa-records code {
   overflow-wrap: anywhere;
@@ -1865,6 +2236,69 @@ body,
   padding-left: 20px;
 }
 
+/* Comments */
+.gfa-comments-thread {
+  padding: 12px 16px;
+  border: 1px solid var(--gfa-border);
+  border-radius: var(--gfa-radius);
+}
+
+.gfa-comments-thread > summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.gfa-comments-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.gfa-comment-list {
+  display: grid;
+  gap: 12px;
+  margin: 12px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.gfa-comment-list .gfa-comment-list {
+  padding-left: 16px;
+  border-left: 2px solid var(--gfa-border);
+}
+
+.gfa-comment-byline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+}
+
+.gfa-comment-text {
+  margin: 4px 0 0;
+  white-space: pre-line;
+  overflow-wrap: anywhere;
+}
+
+.gfa-comment-hidden .gfa-comment-text {
+  color: var(--gfa-muted);
+}
+
+.gfa-comment-quote {
+  margin: 0;
+  padding: 8px 12px;
+  border-left: 3px solid var(--gfa-border);
+  color: var(--gfa-muted);
+  white-space: pre-line;
+  overflow-wrap: anywhere;
+}
+
 /* Failed rebuilds */
 .gfa-deploy .gfa-deploy-why {
   padding: 0 4px;
@@ -2123,3 +2557,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;
+}