Mercurial

comparison hg-web/src/index.css @ 225:70de0c80d093 hg-web

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[hg-web] Add side-by-side changeset diffs
author MrJuneJune <me@mrjunejune.com>
date Sun, 02 Aug 2026 14:41:09 -0700
parents 3007ef5fc0ed
children
comparison
equal deleted inserted replaced
224:3007ef5fc0ed 225:70de0c80d093
476 476
477 .changeset-diff h3 { 477 .changeset-diff h3 {
478 margin-bottom: 10px; 478 margin-bottom: 10px;
479 } 479 }
480 480
481 .changeset-diff pre { 481 .side-by-side-diff {
482 margin: 0 0 16px; 482 margin-bottom: 18px;
483 padding: 0;
484 overflow-x: auto; 483 overflow-x: auto;
485 border: 1px solid var(--border); 484 border: 1px solid var(--border);
486 } 485 border-radius: 6px;
487 486 background: var(--bg-code);
488 .changeset-diff pre > span { 487 }
489 display: flex; 488
490 min-width: max-content; 489 .diff-file-header {
491 padding-right: 12px; 490 padding: 9px 12px;
492 } 491 border-bottom: 1px solid var(--border);
493 492 background: var(--bg-subtle);
494 .diff-line-number { 493 font-family: monospace;
495 width: 54px; 494 font-weight: 600;
496 flex-shrink: 0; 495 }
497 margin-right: 12px; 496
498 padding-right: 10px; 497 .diff-column-headings {
498 display: grid;
499 grid-template-columns: minmax(380px, 1fr) minmax(380px, 1fr);
500 min-width: 760px;
501 border-bottom: 1px solid var(--border);
502 color: var(--text-secondary);
503 font-size: 12px;
504 font-weight: 600;
505 text-transform: uppercase;
506 }
507
508 .diff-column-headings span {
509 padding: 6px 12px;
510 }
511
512 .diff-column-headings span + span {
513 border-left: 1px solid var(--border);
514 }
515
516 .diff-grid {
517 display: grid;
518 grid-template-columns: 52px minmax(328px, 1fr) 52px minmax(328px, 1fr);
519 min-width: 760px;
520 font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
521 font-size: 12px;
522 line-height: 1.5;
523 }
524
525 .diff-side-number,
526 .diff-side-code {
527 min-height: 22px;
528 border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
529 }
530
531 .diff-side-number {
532 padding: 2px 8px;
499 color: var(--text-secondary); 533 color: var(--text-secondary);
500 text-align: right; 534 text-align: right;
501 user-select: none; 535 user-select: none;
502 border-right: 1px solid var(--border); 536 border-right: 1px solid var(--border);
503 } 537 }
504 538
539 .diff-side-code {
540 display: block;
541 margin: 0;
542 padding: 2px 10px;
543 border-radius: 0;
544 background: transparent;
545 white-space: pre;
546 }
547
548 .diff-column-divider {
549 border-left: 1px solid var(--border);
550 }
551
505 .diff-add { 552 .diff-add {
506 background: color-mix(in srgb, var(--success) 18%, transparent); 553 background: color-mix(in srgb, var(--success) 18%, transparent);
507 } 554 }
508 555
509 .diff-remove { 556 .diff-remove {
510 background: color-mix(in srgb, var(--danger) 18%, transparent); 557 background: color-mix(in srgb, var(--danger) 18%, transparent);
511 } 558 }
512 559
513 .diff-range { 560 .diff-empty {
561 background: color-mix(in srgb, var(--bg-subtle) 70%, transparent);
562 }
563
564 .diff-meta {
565 color: var(--text-secondary);
566 background: var(--bg-subtle);
567 }
568
569 .diff-range-row {
570 grid-column: 1 / -1;
571 padding: 4px 10px;
514 color: var(--accent); 572 color: var(--accent);
515 background: var(--bg-subtle); 573 background: var(--bg-subtle);
574 border-bottom: 1px solid var(--border);
575 white-space: pre;
516 } 576 }
517 577
518 /* =========================================== 578 /* ===========================================
519 Common States 579 Common States
520 =========================================== */ 580 =========================================== */