More things

frontend/app/assets/css/_proposals.scss

@@ -0,0 +1,214 @@
+// ---------- Admin dashboard: the edit requests members have sent in ----------
+// One entry per request: who wants what, which parts of the page it touches,
+// the reviewers' buttons while it waits — and, opened up, the change itself
+// laid out as two pages side by side.
+
+.proposal-list {
+  display: grid;
+  gap: 10px;
+  margin: 0 0 4px;
+  padding: 0;
+  list-style: none;
+}
+
+.proposal-entry {
+  padding: 12px 16px;
+  border-radius: 14px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  box-shadow: var(--shadow-sm);
+
+  // a waiting request is the accent one, so the pile reads at a glance
+  &.is-pending { border-color: color-mix(in srgb, var(--accent) 34%, var(--border)); }
+
+  // decided entries recede: the record stays, the call is already made
+  &.is-approved,
+  &.is-rejected { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
+}
+
+.proposal-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.proposal-summary {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.9rem;
+  color: var(--muted);
+
+  .proposal-proposer { color: var(--text); font-weight: 650; }
+
+  .proposal-article-link {
+    color: var(--accent);
+    font-weight: 650;
+    text-decoration: none;
+
+    &:hover { text-decoration: underline; text-underline-offset: 2px; }
+  }
+
+  // a requested page has no address to follow yet: its title is written as
+  // plain text, not as a link to something that is not there
+  .proposal-new { color: var(--text); font-weight: 650; }
+}
+
+// the mark on a request for a page the wiki does not have: dashed rather than
+// filled, because the page is only a promise until somebody approves it
+.proposal-kind {
+  flex: none;
+  padding: 2px 9px;
+  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
+  border-radius: 999px;
+  color: var(--accent);
+  font-size: 0.66rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+}
+
+.proposal-status {
+  flex-shrink: 0;
+  padding: 3px 11px;
+  border-radius: 999px;
+  background: var(--surface-2);
+  color: var(--muted);
+  font-size: 0.75rem;
+  font-weight: 700;
+
+  &.status-pending {
+    background: color-mix(in srgb, var(--accent) 14%, transparent);
+    color: var(--accent);
+  }
+
+  &.status-approved {
+    background: color-mix(in srgb, var(--success) 14%, transparent);
+    color: var(--success);
+  }
+
+  &.status-rejected {
+    background: color-mix(in srgb, var(--danger) 12%, transparent);
+    color: var(--danger);
+  }
+}
+
+.proposal-date { flex-shrink: 0; font-size: 0.78rem; color: var(--faint); }
+
+.proposal-decided { flex-shrink: 0; font-size: 0.76rem; font-style: italic; color: var(--faint); }
+
+.proposal-actions {
+  margin-left: auto;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+// applying a proposal is the yes of the pair — solid, the way the wiki's
+// other primary asks are; refusing stays the quiet ghost beside it
+.btn-approve {
+  background: var(--success);
+  color: #fff;
+  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--success) 65%, transparent);
+
+  &:hover { filter: brightness(1.08); }
+}
+
+// the page moved after the request was sent — approving overwrites that
+.proposal-stale { font-size: 0.78rem; font-style: italic; color: var(--danger); }
+
+.proposal-diff {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 18px;
+  margin-top: 14px;
+  padding-top: 14px;
+  border-top: 1px dashed var(--border);
+}
+
+.proposal-diff-col { min-width: 0; }
+
+.diff-heading {
+  margin: 0 0 10px;
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+
+  &.is-before { color: var(--faint); }
+  &.is-after { color: var(--success); }
+}
+
+.diff-title {
+  margin: 0 0 8px;
+  font-size: 1rem;
+  color: var(--text);
+
+  del { color: var(--faint); text-decoration-color: color-mix(in srgb, var(--danger) 60%, transparent); }
+}
+
+.diff-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 0 0 12px;
+}
+
+.diff-tag {
+  padding: 2px 9px;
+  border-radius: 7px;
+  background: var(--surface-2);
+  color: var(--muted);
+  font-size: 0.72rem;
+  font-weight: 600;
+}
+
+// the two pages: tall articles scroll inside their frame rather than
+// stretching the dashboard out without end
+.diff-body {
+  max-height: 420px;
+  overflow-y: auto;
+  padding: 2px 16px 14px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--bg-elev);
+}
+
+// the half of a creation's diff where a page would go: the frame the other
+// side fills with text, holding only the words that say it is not written yet
+.diff-absent {
+  margin: 16px 0;
+  font-size: 0.85rem;
+  font-style: italic;
+  color: var(--faint);
+}
+
+// the fold over the decided requests: a heading you open, nothing louder
+.proposal-history-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: 20px 0 12px;
+  padding: 4px 2px;
+  border: none;
+  background: none;
+  color: var(--muted);
+  font-size: 0.85rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  cursor: pointer;
+
+  &:hover { color: var(--text); }
+
+  svg { transition: transform 0.18s ease; }
+  svg.turned { transform: rotate(90deg); }
+}
+
+// the request row's skeleton, in the shape of one entry
+.proposal-skeleton { height: 74px; }
+
+@media (max-width: 720px) {
+  .proposal-diff { grid-template-columns: 1fr; }
+  .proposal-actions { margin-left: 0; }
+}