char-slop/berry

git clone https://git.t4t.associates/char-slop/berry

Charlotte Somperf(diff): virtualize rich rows with searchable text fallbacksece94e92026-10-19

/* the history down the side, and the shown revision's changes beside it, each scrolling on its own */
.diff-view {
  display: grid;
  grid-template-columns: minmax(224px, 304px) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}
.diff-view .spacer {
  flex: 1;
}

/* history, as jj log draws it */
.diff-log {
  overflow-y: auto;
  background: var(--panel);
  border-right: 1px solid var(--line);
  font-size: var(--text-small);
}
.diff-log .revision {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  /* a long history lays out only the entries in sight */
  content-visibility: auto;
  contain-intrinsic-size: auto 64px;
}
.diff-log .revision:hover {
  background: var(--raised);
}
.diff-log .revision[aria-current="page"] {
  background: var(--raised);
  box-shadow: inset 2px 0 var(--accent);
}
.diff-log .revision[aria-current="page"]:hover {
  box-shadow: inset 2px 0 var(--accent-fade);
}
.diff-log .revision.immutable .revision-summary {
  color: var(--muted);
}
.revision-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1ch;
  font-family: var(--mono);
}
.diff-view .glyph {
  color: var(--muted);
}
.diff-view [aria-current="page"] .glyph {
  color: var(--accent);
}
.diff-view [aria-current="page"]:hover .glyph {
  color: var(--accent-fade);
}
.diff-view .change,
.diff-view .commit {
  color: var(--muted);
}
.diff-view .change b {
  font-weight: 600;
  color: var(--hl-builtin);
}
.diff-view .commit b {
  font-weight: 600;
  color: var(--hl-keyword);
}
.diff-view .ref {
  color: var(--hl-ident);
}
.diff-view .tag {
  margin-right: 0.5ch;
  color: var(--hl-string);
}
.diff-view .tag.conflict {
  color: var(--error);
}
.revision-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.revision-summary.none,
.commit-subject.none {
  color: var(--muted);
}
.revision-meta {
  color: var(--muted);
  font-size: var(--text-small);
}
.diff-log .more {
  width: 100%;
  padding: 8px;
}

.diff-main {
  overflow-y: auto;
  min-width: 0;
  padding: 0 24px 32px;
}
/* An inherited cursor on the pane restyles every diff row on each refresh in Firefox. */
.diff-head.loading {
  cursor: progress;
}
.diff-view .meta {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--text-ui);
}
.diff-error {
  margin: 8px 0 0;
  color: var(--error);
  font-family: var(--mono);
  font-size: var(--text-small);
  white-space: pre-wrap;
}

/* the commit as sorcery's commit view: subject and body as one block, then its metadata */
.diff-head {
  padding: 16px 0 8px;
}
.commit-subject {
  margin: 0;
  font-size: var(--text-title);
  font-weight: 600;
}
.commit-body {
  margin: 8px 0 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--muted);
  white-space: pre-wrap;
}
.commit-reword textarea {
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  font-family: var(--mono);
}
.commit-reword .diff-error:empty {
  display: none;
}
.commit-reword-actions {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}
.commit-reword-actions .meta {
  margin: 0;
}
table.commit-meta {
  margin-top: 16px;
  border-collapse: collapse;
  font-size: var(--text-ui);
}
table.commit-meta th {
  padding: 0 24px 0 0;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
  color: var(--muted);
}
table.commit-meta td {
  font-family: var(--mono);
  word-break: break-all;
}
.diff-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 16px;
  font-size: var(--text-ui);
}
.diffstat {
  display: flex;
  gap: 12px;
  white-space: nowrap;
}
.diff-view .add-count {
  color: var(--added);
}
.diff-view .del-count {
  color: var(--removed);
}
.diff-view .generated-count {
  color: var(--muted);
}
.diff-layout {
  display: inline-flex;
}
/* a choice of two, which a box keeps together */
.diff-layout button {
  padding: 2px 8px;
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--muted);
}
.diff-layout button + button {
  border-left: 0;
}
.diff-layout button[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--line-strong);
}
.diff-layout button[aria-pressed="true"]:hover {
  color: var(--accent-fade);
}
.diff-index {
  display: grid;
  grid-template-columns: max-content max-content max-content minmax(0, 1fr);
  column-gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: var(--text-small);
}
.diff-index li {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: baseline;
}
.diff-index button {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  align-items: baseline;
  min-width: 0;
  color: var(--text);
  text-align: left;
  overflow-wrap: anywhere;
}
.diff-index .status {
  font-weight: 600;
}
.diff-index :is(.add-count, .del-count) {
  text-align: right;
  white-space: nowrap;
}
.diff-view .status {
  color: var(--muted);
}
.diff-view .status.added {
  color: var(--added);
}
.diff-view .status.deleted {
  color: var(--removed);
}
.diff-view .status:is(.renamed, .copied) {
  color: var(--hl-keyword);
}

/* each file in its own box, as sorcery's, its header staying while the file scrolls past; files out of sight are not
   laid out, and until one has been it takes about the height of its rows */
.file-diff {
  margin-top: 16px;
  border: 1px solid var(--line);
  content-visibility: auto;
  contain-intrinsic-size: auto calc(var(--rows) * 16px + 36px);
}
.file-summary {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 12px 4px 4px;
  background: var(--panel);
  color: var(--muted);
  font-size: var(--text-ui);
}
.file-summary .chevron {
  align-self: stretch;
}
.file-summary-content {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  flex: 1;
  min-width: 0;
}
.file-summary-content .path {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.file-actions {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-left: auto;
}
.file-actions .mode {
  font-family: var(--mono);
  color: var(--hl-keyword);
}
.file-actions .generated-note {
  font-style: italic;
}
.file-actions .viewed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.file-diff .file-note {
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
}

.diff-content {
  border-top: 1px solid var(--line);
}
.diff-chunk {
  content-visibility: auto;
  contain-intrinsic-size: auto calc(var(--rows) * 16px);
  overflow: clip;
}
.diff-plain {
  margin: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--text-small);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 4;
  padding: 0 8px 0 120px;
}
.diff-plain-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.diff-plain-split .diff-plain {
  padding-left: 64px;
}

/* lines as sorcery's: rows tinted by what happened to them, marks drawn beside the text */
table.diff {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--mono);
  font-size: var(--text-small);
}
table.diff col.gutter {
  width: 56px;
}
table.diff td {
  padding: 0 8px;
  vertical-align: top;
}
table.diff td.text {
  white-space: pre-wrap;
  word-break: break-word;
  tab-size: 4;
}
table.diff.split td.text + td.ln {
  border-left: 1px solid var(--line);
}
table.diff td.text::before {
  content: " ";
  display: inline-block;
  width: 1ch;
  margin-right: 0.5ch;
}
table.diff td.text.add::before {
  content: "+";
  color: var(--added);
}
table.diff td.text.del::before {
  content: "-";
  color: var(--removed);
}
table.diff td.ln {
  min-width: 40px;
  text-align: right;
  white-space: nowrap;
  color: var(--muted);
  user-select: none;
}
.diff-fold {
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: var(--text-small);
  color: var(--muted);
  background: var(--panel);
}
.diff-fold .fold {
  font: inherit;
}
table.diff tr.add,
table.diff.split td.add {
  background: color-mix(in srgb, var(--added) 9%, transparent);
}
table.diff tr.del,
table.diff.split td.del {
  background: color-mix(in srgb, var(--removed) 9%, transparent);
}
table.diff td.none {
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 4px,
    color-mix(in srgb, var(--line) 35%, transparent) 4px 5px
  );
}
table.diff mark {
  color: inherit;
  border-radius: 2px;
}
table.diff .add mark.word {
  background: color-mix(in srgb, var(--added) 25%, transparent);
}
table.diff .del mark.word {
  background: color-mix(in srgb, var(--removed) 25%, transparent);
}
table.diff mark.space {
  background: color-mix(in srgb, var(--error) 55%, transparent);
}
table.diff .badge {
  margin-left: 0.5ch;
  color: var(--muted);
  user-select: none;
}

@media (max-width: 700px) {
  .diff-view {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .diff-log {
    max-height: 30vh;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

.file-diff:has(.diff-edit) {
  content-visibility: visible;
}
/* the bar under an edited file's header; save is its one button, the rest read as links */
.diff-edit-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding: 4px 12px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  font-size: var(--text-small);
}
.diff-edit-tools [role="status"] {
  flex: 1;
  min-width: 192px;
  color: var(--muted);
  white-space: pre-wrap;
}
.diff-edit-tools .diff-save {
  padding: 0;
}
.diff-conflict:not([hidden]) {
  display: inline-flex;
  gap: 16px;
}
.diff-edit-tools .diff-force,
.diff-conflict button.link {
  color: var(--accent);
}
.diff-edit-tools button.link:disabled {
  color: var(--muted);
}

/* the editor drawn as the read-only table: the same type, gutter, marks and tints. codemirror's own theme is scoped
   by generated classes, so these need the extra specificity of .cm-editor */
.diff-edit-surface {
  border-top: 1px solid var(--line);
}
.diff-edit-surface .cm-editor {
  font-size: var(--text-small);
  color: var(--text);
  background: none;
}
.diff-edit-surface .cm-editor.cm-focused {
  outline: none;
}
.diff-edit-surface .cm-editor .cm-scroller {
  font-family: var(--mono);
}
.diff-edit-surface .cm-editor .cm-content {
  padding: 0;
  tab-size: 4;
  caret-color: var(--accent);
}
.diff-edit-surface .cm-editor :is(.cm-line, .cm-deletedLine) {
  padding: 0 8px 0 0;
}
.diff-edit-surface .cm-editor .cm-deletedChunk {
  padding: 0;
}
.diff-edit-surface .cm-editor .cm-gutters {
  background: none;
  border: 0;
  color: var(--muted);
}
.diff-edit-surface .cm-editor .cm-lineNumbers .cm-gutterElement {
  min-width: 40px;
  padding: 0 8px;
  box-sizing: content-box;
}
.diff-edit-surface .cm-editor .cm-changeGutter {
  width: 1.5ch;
  padding: 0;
}
.diff-edit-surface .cm-editor .cm-changeGutter .cm-gutterElement {
  background: none;
}
.diff-edit-surface .cm-editor .cm-changeGutter .cm-addedRow::before {
  content: "+";
  color: var(--added);
}
.diff-edit-surface .cm-editor .cm-changeGutter :is(.cm-removedRow, .cm-deletedLineGutter)::before {
  content: "-";
  color: var(--removed);
}
.diff-edit-surface .cm-editor :is(.cm-changedLine, .cm-gutterElement.cm-addedRow) {
  background: color-mix(in srgb, var(--added) 9%, transparent);
}
.diff-edit-surface .cm-editor :is(.cm-deletedChunk, .cm-gutterElement:is(.cm-removedRow, .cm-deletedLineGutter)),
.diff-edit-surface .cm-editor.cm-merge-a .cm-changedLine {
  background: color-mix(in srgb, var(--removed) 9%, transparent);
}
.diff-edit-surface .cm-editor :is(.cm-changedText, .cm-deletedText) {
  border-radius: 2px;
  background: color-mix(in srgb, var(--added) 25%, transparent);
}
.diff-edit-surface .cm-editor :is(.cm-deletedText, .cm-deletedChunk .cm-deletedText),
.diff-edit-surface .cm-editor.cm-merge-a .cm-changedText {
  background: color-mix(in srgb, var(--removed) 25%, transparent);
}
/* the read-only diff marks words only where a line was changed, not where one was added or removed outright */
.diff-edit-surface .cm-editor .cm-wholeChange .cm-changedText,
.diff-edit-surface .cm-editor .cm-deletedChunk:not(:has(+ .cm-changedLine)) .cm-deletedText {
  background: none;
}
.diff-edit-surface .cm-editor .cm-collapsedLines {
  padding: 2px 0;
  color: var(--muted);
  background: none;
}
.diff-edit-surface .cm-editor .cm-collapsedLines::before {
  content: "⋯";
  margin-inline-end: 1ch;
}
.diff-edit-surface .cm-editor .cm-collapsedLines::after {
  content: none;
}
.diff-edit-surface .cm-editor .cm-collapsedLines:hover {
  color: var(--accent);
}
.diff-edit-surface .cm-editor .cm-mergeSpacer {
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 4px,
    color-mix(in srgb, var(--line) 35%, transparent) 4px 5px
  );
}
.diff-edit-surface .cm-mergeView {
  overflow: visible;
}
.diff-edit-surface .cm-mergeViewEditor + .cm-mergeViewEditor {
  border-left: 1px solid var(--line);
}

.diff-leave {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  max-width: min(480px, 90vw);
}
.diff-leave button + button {
  margin-left: 8px;
}
.diff-leave::backdrop {
  background: var(--scrim);
}
.diff-edit-report {
  color: var(--muted);
  font-size: var(--text-ui);
}