Slice 3: the PR flow
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ben Stull
@@ -886,3 +886,138 @@
|
||||
.diff-tooltip-no-context {
|
||||
font-size: 11px; color: #aaa; font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Slice 3: the §10 PR flow surfaces ─────────────────────────────── */
|
||||
|
||||
.pr-modal { max-width: 640px; }
|
||||
.pr-modal-warning {
|
||||
background: #fef3c7; border: 1px solid #fbbf24;
|
||||
padding: 10px 12px; border-radius: 6px; margin-bottom: 14px;
|
||||
font-size: 12px; line-height: 1.5;
|
||||
}
|
||||
.pr-modal-warning p { margin: 0 0 6px 0; }
|
||||
.modal-label {
|
||||
display: block; font-size: 11px; font-weight: 600;
|
||||
color: #555; margin: 10px 0 4px; text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.modal-input, .modal-textarea {
|
||||
width: 100%; padding: 7px 10px; font-size: 13px;
|
||||
border: 1px solid #d1d5db; border-radius: 4px; box-sizing: border-box;
|
||||
font-family: inherit;
|
||||
}
|
||||
.modal-textarea { resize: vertical; min-height: 100px; }
|
||||
.btn-open-pr { background: #1a1a1a; color: #fff; border: none;
|
||||
padding: 4px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; }
|
||||
.btn-open-pr:hover { background: #333; }
|
||||
|
||||
/* PR view header strip + two-column body */
|
||||
.pr-view { display: flex; flex-direction: column; height: 100%; }
|
||||
.pr-header {
|
||||
display: grid; grid-template-columns: 1fr auto; gap: 16px;
|
||||
padding: 14px 18px; border-bottom: 1px solid #e5e7eb;
|
||||
background: #fafafa;
|
||||
}
|
||||
.pr-header-left { min-width: 0; }
|
||||
.pr-breadcrumb { font-size: 11px; color: #666; margin-bottom: 6px; }
|
||||
.pr-breadcrumb a { color: #5b5bd6; text-decoration: none; }
|
||||
.pr-breadcrumb a:hover { text-decoration: underline; }
|
||||
.pr-title { font-size: 18px; margin: 0 0 6px 0; }
|
||||
.pr-description { font-size: 13px; color: #444; margin: 0 0 6px 0; line-height: 1.55; }
|
||||
.pr-header-edit { display: flex; flex-direction: column; gap: 8px; }
|
||||
.pr-header-right {
|
||||
display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.pr-state-banner {
|
||||
padding: 3px 10px; border-radius: 12px;
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.pr-state-banner.open { background: #dcfce7; color: #14532d; }
|
||||
.pr-state-banner.merged { background: #ddd6fe; color: #4c1d95; }
|
||||
.pr-state-banner.withdrawn { background: #fef3c7; color: #78350f; }
|
||||
.pr-state-banner.closed { background: #e5e7eb; color: #374151; }
|
||||
.pr-counts { display: flex; gap: 12px; font-size: 11px; color: #555; }
|
||||
.pr-count-flags { color: #b45309; font-weight: 600; font-size: 13px; }
|
||||
.pr-supersedes { font-size: 11px; color: #6b7280; }
|
||||
.pr-supersedes a { color: #5b5bd6; text-decoration: none; }
|
||||
.pr-conflict-banner {
|
||||
background: #fee2e2; border: 1px solid #fca5a5;
|
||||
padding: 10px 12px; border-radius: 6px;
|
||||
font-size: 12px; line-height: 1.5; max-width: 320px;
|
||||
}
|
||||
.pr-conflict-banner p { margin: 0 0 8px 0; }
|
||||
.pr-actions { display: flex; gap: 8px; }
|
||||
|
||||
.pr-body { display: grid; grid-template-columns: 1fr 360px; flex: 1; overflow: hidden; }
|
||||
|
||||
.diff-mode-toolbar {
|
||||
display: flex; gap: 12px; align-items: center;
|
||||
padding: 6px 12px; border-bottom: 1px solid #f0f0ee;
|
||||
font-size: 12px;
|
||||
}
|
||||
.diff-mode-toolbar .btn-link.active {
|
||||
font-weight: 600; color: #1a1a1a;
|
||||
}
|
||||
.pr-diff-accent {
|
||||
margin-left: auto;
|
||||
font-size: 11px; color: #5b5bd6; font-weight: 600;
|
||||
}
|
||||
|
||||
.diff-pane { flex: 1; overflow: auto; font-family: 'SF Mono', Monaco, monospace; font-size: 12px; }
|
||||
.diff-pane.diff-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #e5e7eb; }
|
||||
.diff-col { background: #fff; overflow: auto; }
|
||||
.diff-col-header {
|
||||
padding: 4px 10px; background: #f3f4f6; font-weight: 600;
|
||||
font-size: 11px; color: #555; border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
.diff-row {
|
||||
display: flex; padding: 1px 8px;
|
||||
white-space: pre-wrap; word-break: break-word; line-height: 1.5;
|
||||
}
|
||||
.diff-row.diff-equal { color: #374151; }
|
||||
.diff-row.diff-del { background: #fee2e2; color: #7f1d1d; }
|
||||
.diff-row.diff-add { background: #dcfce7; color: #14532d; }
|
||||
.diff-row.diff-empty { background: #f9fafb; color: #d1d5db; }
|
||||
.diff-marker { width: 16px; opacity: 0.5; user-select: none; }
|
||||
.diff-text { flex: 1; }
|
||||
|
||||
/* PR conversation — chat + review interleaved */
|
||||
.pr-conversation { padding: 10px 12px; overflow-y: auto; }
|
||||
.pr-conv-disclosure {
|
||||
display: flex; gap: 12px; font-size: 11px; color: #6b7280;
|
||||
padding-bottom: 6px; border-bottom: 1px solid #f0f0ee; margin-bottom: 10px;
|
||||
}
|
||||
.thread-disclosure strong { color: #1a1a1a; }
|
||||
.chat-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
|
||||
.chat-msg {
|
||||
display: flex; flex-direction: column; gap: 4px;
|
||||
padding: 8px 10px; border-radius: 6px; background: #f9fafb;
|
||||
font-size: 12px; line-height: 1.55;
|
||||
}
|
||||
.chat-msg-review { background: #ede9fe; border-left: 3px solid #7c3aed; }
|
||||
.chat-msg-flag { background: #fef3c7; border-left: 3px solid #d97706; }
|
||||
.chat-msg-new { box-shadow: 0 0 0 2px #c7d2fe; }
|
||||
.chat-msg-header { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #6b7280; }
|
||||
.chat-msg-badge {
|
||||
font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
|
||||
text-transform: uppercase; letter-spacing: 0.04em;
|
||||
}
|
||||
.chat-msg-badge.review { background: #7c3aed; color: #fff; }
|
||||
.chat-msg-badge.flag { background: #d97706; color: #fff; }
|
||||
.chat-msg-author { font-weight: 600; color: #1a1a1a; }
|
||||
.chat-msg-new-pip { color: #5b5bd6; }
|
||||
.chat-msg-quote {
|
||||
background: #fff; border-left: 2px solid #d1d5db;
|
||||
padding: 4px 8px; font-size: 11px; color: #6b7280;
|
||||
margin: 0; white-space: pre-wrap;
|
||||
}
|
||||
.chat-msg-body { white-space: pre-wrap; }
|
||||
|
||||
.pr-review-composer {
|
||||
border-top: 1px solid #e5e7eb; padding: 10px 12px;
|
||||
background: #fafafa;
|
||||
}
|
||||
.pr-review-quote { font-size: 11px; color: #6b7280; margin-bottom: 6px; }
|
||||
.pr-review-quote pre { background: #fff; padding: 4px 8px; border-radius: 4px; margin: 4px 0 0 0; }
|
||||
|
||||
Reference in New Issue
Block a user