SearchBlock.module.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. /* Geometry mirrors CodeBlock and TerminalBlock (12px radius, code-block
  2. surface + banner row, markdown code-block font) so a search card reads as one
  3. family with them. The deliberate divergence they share: the result rows keep
  4. `white-space: pre` and scroll horizontally, because folding a long match line
  5. or path destroys the alignment a reader scans by. */
  6. .block {
  7. --dsl-search-radius: 12px;
  8. --dsl-search-line-height: 22px;
  9. position: relative;
  10. margin: 16px 0;
  11. color: var(--dsw-alias-label-primary);
  12. background: var(--dsw-alias-markdown-code-block);
  13. border-radius: var(--dsl-search-radius);
  14. }
  15. /* The banner: result summary on the left, the copy control holding its
  16. intrinsic width on the right. */
  17. .header {
  18. display: flex;
  19. align-items: center;
  20. gap: 12px;
  21. padding: 9px 14px;
  22. background: var(--dsw-alias-markdown-code-block-banner);
  23. border-top-left-radius: var(--dsl-search-radius);
  24. border-top-right-radius: var(--dsl-search-radius);
  25. }
  26. .summary {
  27. flex: 1;
  28. min-width: 0;
  29. overflow: hidden;
  30. text-overflow: ellipsis;
  31. white-space: nowrap;
  32. font: var(--dsw-font-xs-13);
  33. color: var(--dsw-alias-label-secondary);
  34. }
  35. .copyButton {
  36. flex: none;
  37. background-color: transparent;
  38. border: none;
  39. padding: 0;
  40. margin: 0;
  41. color: var(--dsw-alias-label-secondary);
  42. cursor: pointer;
  43. font: var(--dsw-font-xs-13);
  44. }
  45. .body {
  46. padding: 8px 14px 12px 0;
  47. font: var(--dsw-font-markdown-code-block);
  48. overflow-x: auto;
  49. overflow-y: hidden;
  50. }
  51. /* No wrapping: a match line or a path keeps its content on one row and scrolls
  52. sideways instead of folding. */
  53. .line {
  54. min-height: var(--dsl-search-line-height);
  55. padding-left: 14px;
  56. white-space: pre;
  57. }
  58. /* The 1-based line number ahead of a grep match line, dimmed so the match text
  59. stays the salient content. */
  60. .lineNumber {
  61. color: var(--dsw-alias-label-tertiary);
  62. }
  63. /* A file group's header: a bold path label plus its match count, the whole row
  64. the collapse control. */
  65. .fileHeader {
  66. display: flex;
  67. align-items: baseline;
  68. gap: 8px;
  69. width: 100%;
  70. min-height: var(--dsl-search-line-height);
  71. padding: 0 14px;
  72. border: none;
  73. background-color: transparent;
  74. cursor: pointer;
  75. font: inherit;
  76. text-align: left;
  77. }
  78. .filePath {
  79. min-width: 0;
  80. font-weight: 600;
  81. color: var(--dsw-alias-label-primary);
  82. white-space: pre;
  83. }
  84. .fileCount {
  85. flex: none;
  86. color: var(--dsw-alias-label-tertiary);
  87. }
  88. .expand {
  89. display: block;
  90. width: 100%;
  91. padding: 0 14px;
  92. border: none;
  93. background-color: transparent;
  94. color: var(--dsw-alias-label-tertiary);
  95. cursor: pointer;
  96. font: inherit;
  97. text-align: left;
  98. }
  99. .expand:hover {
  100. color: var(--dsw-alias-label-secondary);
  101. }
  102. .empty {
  103. padding: 12px 14px;
  104. font: var(--dsw-font-markdown-code-block);
  105. color: var(--dsw-alias-label-tertiary);
  106. }