Mercurial

comparison hg-web/src/index.css @ 221:ce7f4400c2de hg-web

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[hg-web] Harden forge and add changeset UI
author MrJuneJune <me@mrjunejune.com>
date Sun, 02 Aug 2026 09:01:24 -0700
parents 9f4429c49733
children 0e7b9464248d
comparison
equal deleted inserted replaced
219:8c9bb0b0759e 221:ce7f4400c2de
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 background-image: url("/pencil_texture.png");
386 border: 1px solid var(--border);
387 border-radius: 6px;
388 padding: 24px;
389 }
390
391 .changeset-heading,
392 .changeset-meta,
393 .changeset-parents,
394 .changeset-files,
395 .changeset-labels {
396 display: flex;
397 align-items: center;
398 flex-wrap: wrap;
399 gap: 10px;
400 }
401
402 .changeset-heading {
403 justify-content: space-between;
404 margin-bottom: 12px;
405 }
406
407 .changeset-heading code {
408 overflow-wrap: anywhere;
409 }
410
411 .changeset-paper h2 {
412 margin-bottom: 8px;
413 }
414
415 .changeset-meta {
416 color: var(--text-secondary);
417 justify-content: space-between;
418 margin-bottom: 16px;
419 }
420
421 .changeset-branch,
422 .changeset-labels span {
423 background: var(--bg-subtle);
424 border: 1px solid var(--border);
425 border-radius: 999px;
426 padding: 2px 8px;
427 font-size: 12px;
428 }
429
430 .changeset-labels,
431 .changeset-parents,
432 .changeset-files {
433 margin: 12px 0;
434 }
435
436 .changeset-parents button {
437 border: 0;
438 background: transparent;
439 color: var(--accent);
440 cursor: pointer;
441 font-family: monospace;
442 }
443
444 .changeset-parents button:hover {
445 text-decoration: underline;
446 }
447
448 .changeset-parents button:focus-visible {
449 outline: 2px solid var(--accent);
450 outline-offset: 2px;
451 }
452
453 .changeset-files code {
454 overflow-wrap: anywhere;
455 }
456
457 .changeset-diff {
458 margin-top: 24px;
459 }
460
461 .changeset-diff h3 {
462 margin-bottom: 10px;
463 }
464
465 .changeset-diff pre {
466 margin: 0 0 16px;
467 padding: 0;
468 overflow-x: auto;
469 border: 1px solid var(--border);
470 }
471
472 .changeset-diff pre > span {
473 display: flex;
474 min-width: max-content;
475 padding-right: 12px;
476 }
477
478 .diff-line-number {
479 width: 54px;
480 flex-shrink: 0;
481 margin-right: 12px;
482 padding-right: 10px;
483 color: var(--text-secondary);
484 text-align: right;
485 user-select: none;
486 border-right: 1px solid var(--border);
487 }
488
489 .diff-add {
490 background: color-mix(in srgb, var(--success) 18%, transparent);
491 }
492
493 .diff-remove {
494 background: color-mix(in srgb, var(--danger) 18%, transparent);
495 }
496
497 .diff-range {
498 color: var(--accent);
499 background: var(--bg-subtle);
500 }
501
502 /* ===========================================
368 Common States 503 Common States
369 =========================================== */ 504 =========================================== */
370 .empty-state { 505 .empty-state {
371 padding: 40px; 506 padding: 40px;
372 text-align: center; 507 text-align: center;