@geekity/cms 0.3.0

package/admin/static/admin.css

@@ -0,0 +1,726 @@
+/*
+ * The admin's stylesheet. Plain CSS, no build step, no CDN: the admin is
+ * server-rendered HTML and this is the only thing it loads.
+ *
+ * The shape is WordPress classic — a dark bar across the top, a dark column of
+ * navigation down the left, content on a grey field — because that is the
+ * layout the people this CMS is for already know how to read.
+ */
+
+:root {
+  --admin-bar: #1d2327;
+  --admin-nav: #2c3338;
+  --admin-nav-text: #f0f0f1;
+  --admin-nav-current: #2271b1;
+  --admin-field: #f0f0f1;
+  --admin-surface: #fff;
+  --admin-border: #c3c4c7;
+  --admin-text: #1d2327;
+  --admin-muted: #646970;
+  --admin-link: #2271b1;
+  --admin-notice: #00a32a;
+  --admin-error: #d63638;
+  --admin-nav-width: 11rem;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--admin-field);
+  color: var(--admin-text);
+  font:
+    14px/1.6 -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+}
+
+a {
+  color: var(--admin-link);
+}
+
+/* The top bar: site name on the left, who you are on the right. */
+
+.admin-bar {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0 1rem;
+  min-height: 2.5rem;
+  background: var(--admin-bar);
+  color: var(--admin-nav-text);
+}
+
+.admin-bar a {
+  color: var(--admin-nav-text);
+  text-decoration: none;
+}
+
+.admin-bar a:hover,
+.admin-bar a:focus {
+  color: #72aee6;
+}
+
+.admin-bar-site {
+  font-weight: 600;
+}
+
+.admin-bar-spacer {
+  flex: 1;
+}
+
+.admin-bar-user {
+  color: #c3c4c7;
+}
+
+.admin-bar form {
+  display: inline;
+}
+
+.admin-bar button {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--admin-nav-text);
+  font: inherit;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+/* The shell: navigation column beside the screen itself. */
+
+.admin-shell {
+  display: flex;
+  align-items: stretch;
+  min-height: calc(100vh - 2.5rem);
+}
+
+.admin-nav {
+  flex: 0 0 var(--admin-nav-width);
+  background: var(--admin-nav);
+}
+
+.admin-nav ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.admin-nav a {
+  display: block;
+  padding: 0.6rem 0.9rem;
+  color: var(--admin-nav-text);
+  text-decoration: none;
+}
+
+.admin-nav a:hover,
+.admin-nav a:focus {
+  background: var(--admin-bar);
+  color: #72aee6;
+}
+
+.admin-nav a[aria-current='page'] {
+  background: var(--admin-nav-current);
+  color: #fff;
+  font-weight: 600;
+}
+
+.admin-main {
+  flex: 1;
+  min-width: 0;
+  padding: 1.25rem 1.5rem 3rem;
+}
+
+/* Login and setup: no navigation, one card in the middle of the page. */
+
+.admin-plain {
+  max-width: 22rem;
+  margin: 3rem auto;
+  padding: 1.5rem;
+  background: var(--admin-surface);
+  border: 1px solid var(--admin-border);
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 1.5rem;
+  font-weight: 400;
+}
+
+h2 {
+  margin-top: 0;
+  font-size: 1.05rem;
+}
+
+/* Flash messages. One page each, then gone. */
+
+.admin-flash {
+  margin: 0 0 1rem;
+  padding: 0.6rem 0.9rem;
+  background: var(--admin-surface);
+  border: 1px solid var(--admin-border);
+  border-left: 4px solid var(--admin-notice);
+}
+
+.admin-flash-error {
+  border-left-color: var(--admin-error);
+}
+
+/* Panels, the box every group of things on the dashboard sits in. */
+
+.admin-panels {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+  align-items: start;
+}
+
+.admin-panel {
+  padding: 0.9rem 1.1rem 1.1rem;
+  background: var(--admin-surface);
+  border: 1px solid var(--admin-border);
+}
+
+.admin-counts {
+  display: flex;
+  margin: 0;
+  gap: 1.5rem;
+}
+
+.admin-counts div {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.admin-counts dt {
+  color: var(--admin-muted);
+}
+
+.admin-counts dd {
+  margin: 0;
+  font-size: 1.75rem;
+  line-height: 1.2;
+}
+
+/* Listings. */
+
+.admin-list {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.admin-list th {
+  text-align: left;
+  color: var(--admin-muted);
+  font-weight: 600;
+}
+
+.admin-list th,
+.admin-list td {
+  padding: 0.35rem 0.5rem 0.35rem 0;
+  border-bottom: 1px solid var(--admin-field);
+  vertical-align: top;
+}
+
+.admin-status {
+  color: var(--admin-muted);
+}
+
+.admin-status-draft {
+  color: var(--admin-error);
+}
+
+.admin-empty {
+  color: var(--admin-muted);
+}
+
+/* Forms. */
+
+label {
+  display: block;
+  margin: 0.75rem 0 0.25rem;
+  font-weight: 600;
+}
+
+input[type='text'],
+input[type='password'],
+textarea {
+  width: 100%;
+  padding: 0.4rem 0.5rem;
+  border: 1px solid #8c8f94;
+  background: var(--admin-surface);
+  color: inherit;
+  font: inherit;
+}
+
+textarea {
+  min-height: 8rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  resize: vertical;
+}
+
+button[type='submit'],
+.admin-button {
+  margin-top: 1rem;
+  padding: 0.4rem 0.9rem;
+  border: 1px solid var(--admin-link);
+  border-radius: 3px;
+  background: var(--admin-link);
+  color: #fff;
+  font: inherit;
+  cursor: pointer;
+}
+
+button[type='submit']:hover,
+.admin-button:hover {
+  background: #135e96;
+}
+
+.admin-error {
+  margin: 1rem 0 0;
+  padding: 0.6rem 0.9rem;
+  background: var(--admin-surface);
+  border-left: 4px solid var(--admin-error);
+}
+
+.admin-note {
+  color: var(--admin-muted);
+}
+
+/* The listing's filter links: all / published / drafts / trash. */
+
+.admin-filters {
+  display: flex;
+  gap: 0.75rem;
+  margin: 0 0 0.75rem;
+  padding: 0;
+  list-style: none;
+}
+
+.admin-filters a[aria-current] {
+  color: var(--admin-text);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+/* The row actions. They are links and one small form, and read as one line. */
+
+.admin-actions {
+  display: flex;
+  align-items: baseline;
+  gap: 0.6rem;
+  white-space: nowrap;
+}
+
+.admin-actions form {
+  display: inline;
+}
+
+.admin-actions button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--admin-link);
+  font: inherit;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.admin-status-trashed {
+  color: var(--admin-muted);
+  font-style: italic;
+}
+
+.admin-pagination {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 1rem;
+  color: var(--admin-muted);
+}
+
+/* The editor: the writing on the left, everything about it on the right. */
+
+.admin-editor {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(0, 3fr) minmax(15rem, 1fr);
+  align-items: start;
+}
+
+@media (max-width: 60rem) {
+  .admin-editor {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.admin-editor-main,
+.admin-editor-side {
+  padding: 0.9rem 1.1rem 1.1rem;
+  background: var(--admin-surface);
+  border: 1px solid var(--admin-border);
+}
+
+.admin-editor-main label:first-child,
+.admin-editor-side label:first-child {
+  margin-top: 0;
+}
+
+.admin-editor-main textarea {
+  min-height: 28rem;
+}
+
+.admin-hint {
+  margin: 0.25rem 0 0;
+  color: var(--admin-muted);
+  font-size: 0.9em;
+}
+
+.admin-check {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 1rem 0 0;
+}
+
+.admin-check label {
+  margin: 0;
+  font-weight: 400;
+}
+
+.admin-check input {
+  width: auto;
+}
+
+.admin-editor-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+}
+
+/* A link that has to look like a button: Add new, View. */
+
+.admin-button {
+  display: inline-block;
+  text-decoration: none;
+}
+
+.admin-button-small {
+  margin: 0 0 0 0.5rem;
+  padding: 0.15rem 0.5rem;
+  font-size: 0.8rem;
+  vertical-align: middle;
+}
+
+.admin-button-quiet {
+  background: var(--admin-surface);
+  color: var(--admin-link);
+}
+
+.admin-button-quiet:hover {
+  background: var(--admin-field);
+}
+
+/* The conflict screen: the two versions, side by side, both readable. */
+
+.admin-conflict {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+}
+
+.admin-conflict section {
+  padding: 0.9rem 1.1rem 1.1rem;
+  background: var(--admin-surface);
+  border: 1px solid var(--admin-border);
+}
+
+.admin-conflict textarea {
+  min-height: 20rem;
+}
+
+.admin-conflict-actions {
+  margin: 1rem 0 0;
+}
+
+/* A field the page carries but nobody should have to look at. */
+
+.admin-hidden-field {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+
+/* The editor's enhancement: the Write/Preview tabs, the CodeMirror surface,
+   the preview frame and the upload control. Every rule here is inert until
+   editor.js has run — with JavaScript off, `.admin-editor-tools` holds one
+   Preview button and nothing else. */
+
+.admin-editor-tools {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+.admin-editor-tabs {
+  display: flex;
+  gap: 0.25rem;
+  margin-right: auto;
+}
+
+.admin-editor-tab {
+  margin: 0;
+  padding: 0.3rem 0.8rem;
+  border: 1px solid var(--admin-border);
+  border-radius: 3px;
+  background: var(--admin-field);
+  color: var(--admin-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.admin-editor-tab[aria-selected='true'] {
+  background: var(--admin-surface);
+  border-color: var(--admin-link);
+  color: var(--admin-link);
+  font-weight: 600;
+}
+
+/* The stylesheet gives `button[type='submit']` its shape, and this one is a
+   `type="button"`, so it has to be given the same shape by hand. */
+
+.admin-editor-upload button {
+  margin: 0;
+  padding: 0.3rem 0.8rem;
+  border: 1px solid var(--admin-border);
+  border-radius: 3px;
+  background: var(--admin-surface);
+  color: var(--admin-link);
+  font: inherit;
+  cursor: pointer;
+}
+
+.admin-editor-upload button:hover {
+  background: var(--admin-field);
+}
+
+.admin-editor-status {
+  flex: 1 0 100%;
+  margin: 0;
+  min-height: 1.2em;
+  color: var(--admin-muted);
+  font-size: 0.9em;
+}
+
+/* CodeMirror sits where the textarea was, and is the same height it was. */
+
+.admin-editor-surface .cm-editor {
+  height: 28rem;
+  border: 1px solid var(--admin-border);
+  border-radius: 3px;
+  font-size: 0.95rem;
+}
+
+.admin-editor-surface .cm-editor.cm-focused {
+  outline: 2px solid var(--admin-link);
+  outline-offset: -1px;
+}
+
+.admin-editor-surface .cm-scroller {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  line-height: 1.5;
+}
+
+/* The preview is the site's own page, so it is framed rather than inlined:
+   the theme's stylesheet has no business in the admin's. */
+
+.admin-editor-preview {
+  width: 100%;
+  height: 28rem;
+  border: 1px solid var(--admin-border);
+  border-radius: 3px;
+  background: #fff;
+}
+
+/* The settings screen: one column of fields, narrow enough to read across. */
+
+.admin-settings {
+  max-width: 42rem;
+  padding: 0.9rem 1.1rem 1.1rem;
+  background: var(--admin-surface);
+  border: 1px solid var(--admin-border);
+}
+
+.admin-settings h2 {
+  margin: 1.75rem 0 0;
+  padding-top: 1rem;
+  border-top: 1px solid var(--admin-border);
+  font-size: 1.05rem;
+}
+
+.admin-settings h2:first-child {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: 0;
+}
+
+.admin-settings select {
+  padding: 0.4rem 0.5rem;
+  border: 1px solid #8c8f94;
+  background: var(--admin-surface);
+  color: inherit;
+  font: inherit;
+}
+
+.admin-settings input:disabled {
+  background: var(--admin-field);
+  color: var(--admin-muted);
+}
+
+/* One message under the field it is about, so it reads with the field
+   rather than as a list of complaints at the top of the form. */
+
+.admin-field-error {
+  margin: 0.25rem 0 0;
+  color: var(--admin-error);
+  font-size: 0.9em;
+}
+
+.admin-settings-buttons {
+  margin: 0;
+}
+
+/* The users screen stacks the table and two panels of the same shape, so they
+   need the gap the settings screen's single panel never did. */
+
+.admin-list + .admin-settings,
+.admin-settings + .admin-settings {
+  margin-top: 1.5rem;
+}
+
+/* The federation screen: the site's own actor, its followers, what arrived,
+   and how what went out landed. Four panels down the page rather than the
+   dashboard's grid, because three of them hold tables. */
+
+.admin-panel + .admin-panel {
+  margin-top: 1.5rem;
+}
+
+.admin-actor-handle {
+  margin: 0 0 0.75rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.admin-actor-fields {
+  display: grid;
+  margin: 0;
+  gap: 0.4rem 1.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+}
+
+.admin-actor-fields div {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.admin-actor-fields dt {
+  min-width: 5.5rem;
+  color: var(--admin-muted);
+}
+
+.admin-actor-fields dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+/* An avatar and a name on one line, with a placeholder square holding the
+   space when the actor published no icon: a list of rows that jump between
+   two heights is harder to read down than one that does not. */
+
+.admin-follower {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.admin-avatar {
+  flex: none;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.admin-avatar-blank {
+  display: inline-block;
+  background: var(--admin-field);
+}
+
+/* The site's own avatar, which is shown big enough to judge on the settings
+   screen and beside the actor it belongs to on the federation screen. */
+
+.admin-avatar-large {
+  width: 6rem;
+  height: 6rem;
+  border: 1px solid var(--admin-border);
+}
+
+.admin-avatar-current {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+  margin-top: 0.75rem;
+}
+
+.admin-avatar-forms {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: flex-end;
+}
+
+.admin-avatar-forms label {
+  display: block;
+}
+
+.admin-actor-identity {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.admin-inbox {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.admin-inbox li {
+  padding: 0.35rem 0;
+  border-bottom: 1px solid var(--admin-field);
+}
+
+.admin-inbox-actor {
+  font-weight: 600;
+}
+
+.admin-inbox-when {
+  color: var(--admin-muted);
+}
+
+.admin-status-failed {
+  color: var(--admin-error);
+}