DiffBlock.module.css 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. .block {
  2. --dsl-diff-radius: 12px;
  3. --dsl-diff-line-height: 22px;
  4. position: relative;
  5. margin: 16px 0;
  6. color: var(--dsw-alias-label-primary);
  7. background: var(--dsw-alias-markdown-code-block);
  8. border-radius: var(--dsl-diff-radius);
  9. }
  10. /* The copy control floats in the top-right corner over the body, so the card
  11. has no empty banner row above its first diff line (the TUI diff card has no
  12. banner either — only the footer). The block is position: relative, so this
  13. anchors to the card. */
  14. .copyButton {
  15. position: absolute;
  16. top: 8px;
  17. right: 12px;
  18. z-index: 1;
  19. background-color: transparent;
  20. border: none;
  21. padding: 0;
  22. margin: 0;
  23. color: var(--dsw-alias-label-secondary);
  24. cursor: pointer;
  25. font: var(--dsw-font-xs-13);
  26. }
  27. .body {
  28. padding: 12px 14px;
  29. font: var(--dsw-font-markdown-code-block);
  30. overflow-x: auto;
  31. overflow-y: hidden;
  32. }
  33. /* No wrapping, no word-break: a diff is read by its indentation. */
  34. .line {
  35. min-height: var(--dsl-diff-line-height);
  36. white-space: pre;
  37. }
  38. /* A file header: the path in the primary tone, set apart by weight. The copy
  39. button floats over this first row's top-right corner, so reserve space at the
  40. line's end for it — a long path scrolls under the button otherwise, and the
  41. button's hit area would eat clicks on the path's tail. */
  42. .path {
  43. color: var(--dsw-alias-label-primary);
  44. font-weight: 600;
  45. padding-right: 56px;
  46. }
  47. /* A same-file second hunk's separator (a scattered edit), in the dim tone. */
  48. .gap {
  49. color: var(--dsw-alias-label-tertiary);
  50. }
  51. /* The diff's own meaning-carrying colors: removed on the error token, added on
  52. the success token. A `- `/`+ ` prefix is drawn here so a copied line and the
  53. shown line agree, and so the sign reads without relying on color alone. */
  54. .del::before {
  55. content: '- ';
  56. color: var(--dsw-alias-state-error-primary);
  57. }
  58. .del {
  59. color: var(--dsw-alias-state-error-primary);
  60. }
  61. .add::before {
  62. content: '+ ';
  63. color: var(--dsw-alias-state-success-primary);
  64. }
  65. .add {
  66. color: var(--dsw-alias-state-success-primary);
  67. }
  68. .expand {
  69. display: block;
  70. width: 100%;
  71. padding: 0;
  72. border: none;
  73. background-color: transparent;
  74. color: var(--dsw-alias-label-tertiary);
  75. cursor: pointer;
  76. font: inherit;
  77. text-align: left;
  78. }
  79. .expand:hover {
  80. color: var(--dsw-alias-label-secondary);
  81. }
  82. /* The change summary, dim under the body: `└ +A -R · N file(s)`, the same
  83. footer the TUI transcript's diff card draws. */
  84. .footer {
  85. padding: 0 14px 12px;
  86. font: var(--dsw-font-markdown-code-block);
  87. color: var(--dsw-alias-label-tertiary);
  88. }