Mercurial

comparison hg-web/src/index.css @ 226:3fa4bf481f42

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[merge] Merge hg-web into default
author MrJuneJune <me@mrjunejune.com>
date Sun, 02 Aug 2026 14:42:01 -0700
parents 70de0c80d093
children
comparison
equal deleted inserted replaced
220:eb8b4230fdb9 226:3fa4bf481f42
268 .graph-wrapper { 268 .graph-wrapper {
269 display: flex; 269 display: flex;
270 align-items: flex-start; 270 align-items: flex-start;
271 max-height: 600px; 271 max-height: 600px;
272 overflow-y: auto; 272 overflow-y: auto;
273 position: relative;
273 } 274 }
274 275
275 .graph-canvas-column { 276 .graph-canvas-column {
276 flex-shrink: 0; 277 flex-shrink: 0;
277 background: var(--bg);
278 position: sticky; 278 position: sticky;
279 left: 0; 279 left: 0;
280 z-index: 1;
281 border-right: 1px solid var(--border);
280 } 282 }
281 283
282 .graph-details-column { 284 .graph-details-column {
283 flex-grow: 1; 285 flex-grow: 1;
284 overflow-x: hidden; 286 overflow-x: hidden;
285 } 287 }
286 288
287 .graph-row { 289 .graph-row {
290 width: 100%;
288 height: 40px; 291 height: 40px;
289 display: flex; 292 display: flex;
290 flex-direction: column; 293 flex-direction: column;
291 justify-content: center; 294 justify-content: center;
292 padding: 0 12px; 295 padding: 0 12px;
296 background: transparent;
297 color: inherit;
298 text-align: left;
299 border: 0;
293 border-bottom: 1px solid var(--border); 300 border-bottom: 1px solid var(--border);
294 font-size: 12px; 301 font-size: 12px;
295 cursor: pointer; 302 cursor: pointer;
296 transition: background-color 0.1s; 303 transition: background-color 0.1s;
297 } 304 }
298 305
299 .graph-row:hover { 306 .graph-row:hover {
307 background: var(--hover);
308 }
309
310 .graph-row:focus-visible {
311 outline: 2px solid var(--accent);
312 outline-offset: -2px;
300 background: var(--hover); 313 background: var(--hover);
301 } 314 }
302 315
303 .graph-row-meta { 316 .graph-row-meta {
304 display: flex; 317 display: flex;
363 color: var(--text-secondary); 376 color: var(--text-secondary);
364 font-size: 12px; 377 font-size: 12px;
365 } 378 }
366 379
367 /* =========================================== 380 /* ===========================================
381 Changeset Detail
382 =========================================== */
383 .changeset-paper {
384 background: var(--bg);
385 border: 1px solid var(--border);
386 border-radius: 6px;
387 padding: 24px;
388 }
389
390 .changeset-heading,
391 .changeset-meta,
392 .changeset-parents,
393 .changeset-files,
394 .changeset-labels {
395 display: flex;
396 align-items: center;
397 flex-wrap: wrap;
398 gap: 10px;
399 }
400
401 .changeset-heading {
402 justify-content: space-between;
403 margin-bottom: 12px;
404 }
405
406 .changeset-heading code {
407 overflow-wrap: anywhere;
408 }
409
410 .changeset-paper h2 {
411 margin-bottom: 8px;
412 }
413
414 .changeset-meta {
415 color: var(--text-secondary);
416 justify-content: space-between;
417 margin-bottom: 16px;
418 }
419
420 .changeset-branch,
421 .changeset-labels span {
422 background: var(--bg-subtle);
423 border: 1px solid var(--border);
424 border-radius: 999px;
425 padding: 2px 8px;
426 font-size: 12px;
427 }
428
429 .changeset-labels,
430 .changeset-parents,
431 .changeset-files {
432 margin: 12px 0;
433 }
434
435 .changeset-parents button {
436 border: 0;
437 background: transparent;
438 color: var(--accent);
439 cursor: pointer;
440 font-family: monospace;
441 }
442
443 .changeset-parents button:hover {
444 text-decoration: underline;
445 }
446
447 .changeset-parents button:focus-visible {
448 outline: 2px solid var(--accent);
449 outline-offset: 2px;
450 }
451
452 .changeset-files code {
453 display: inline-flex;
454 align-items: center;
455 gap: 6px;
456 overflow-wrap: anywhere;
457 }
458
459 .changeset-file-status {
460 color: var(--text-secondary);
461 font-size: 10px;
462 text-transform: uppercase;
463 }
464
465 .changeset-file-status.status-added {
466 color: var(--success);
467 }
468
469 .changeset-file-status.status-removed {
470 color: var(--danger);
471 }
472
473 .changeset-diff {
474 margin-top: 24px;
475 }
476
477 .changeset-diff h3 {
478 margin-bottom: 10px;
479 }
480
481 .side-by-side-diff {
482 margin-bottom: 18px;
483 overflow-x: auto;
484 border: 1px solid var(--border);
485 border-radius: 6px;
486 background: var(--bg-code);
487 }
488
489 .diff-file-header {
490 padding: 9px 12px;
491 border-bottom: 1px solid var(--border);
492 background: var(--bg-subtle);
493 font-family: monospace;
494 font-weight: 600;
495 }
496
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;
533 color: var(--text-secondary);
534 text-align: right;
535 user-select: none;
536 border-right: 1px solid var(--border);
537 }
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
552 .diff-add {
553 background: color-mix(in srgb, var(--success) 18%, transparent);
554 }
555
556 .diff-remove {
557 background: color-mix(in srgb, var(--danger) 18%, transparent);
558 }
559
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;
572 color: var(--accent);
573 background: var(--bg-subtle);
574 border-bottom: 1px solid var(--border);
575 white-space: pre;
576 }
577
578 /* ===========================================
368 Common States 579 Common States
369 =========================================== */ 580 =========================================== */
370 .empty-state { 581 .empty-state {
371 padding: 40px; 582 padding: 40px;
372 text-align: center; 583 text-align: center;
601 width: 16px; 812 width: 16px;
602 height: 16px; 813 height: 16px;
603 opacity: 0.7; 814 opacity: 0.7;
604 } 815 }
605 816
817 .file-viewer-actions {
818 display: flex;
819 align-items: center;
820 gap: 12px;
821 }
822
823 .file-viewer-actions a {
824 font-size: 13px;
825 }
826
606 .file-viewer-content { 827 .file-viewer-content {
607 overflow: auto; 828 overflow: auto;
608 flex: 1; 829 flex: 1;
830 }
831
832 .static-file-viewer {
833 max-width: 1100px;
834 }
835
836 .static-file-preview {
837 min-height: 240px;
838 padding: 20px;
839 display: flex;
840 align-items: center;
841 justify-content: center;
842 background: var(--bg-subtle);
843 }
844
845 .static-file-image,
846 .static-file-video {
847 display: block;
848 max-width: 100%;
849 max-height: 75vh;
850 object-fit: contain;
851 }
852
853 .static-file-audio {
854 width: min(100%, 640px);
855 }
856
857 .static-file-pdf {
858 width: 100%;
859 height: 75vh;
860 border: 0;
861 background: #fff;
609 } 862 }
610 863
611 .file-viewer-content pre { 864 .file-viewer-content pre {
612 margin: 0; 865 margin: 0;
613 padding: 16px; 866 padding: 16px;