|
73 | 73 | box-sizing: border-box; |
74 | 74 | // Reserve room on the right so typed text never runs under the inset send |
75 | 75 | // button (right = btn size + 1rem to clear the button plus a small gap). The |
76 | | - // bottom padding grows with the button ((btn − 40px) + 0.75rem) so the |
77 | | - // bottom-aligned single line keeps a consistent vertical position as the |
78 | | - // button size changes fluidly; top/left stay 0.75rem. |
79 | | - padding: 0.75rem calc(var(--hamelp-btn-size) + 1rem) calc(var(--hamelp-btn-size) - 40px + 0.75rem) 0.75rem; |
| 76 | + // vertical padding is SYMMETRIC (top/bottom both 0.75rem) so that, combined |
| 77 | + // with align-content: center below, the single line centers cleanly in the |
| 78 | + // content box regardless of the button size or the theme's line-height. |
| 79 | + padding: 0.75rem calc(var(--hamelp-btn-size) + 1rem) 0.75rem 0.75rem; |
80 | 80 | border: 1px solid var(--hamelp-border); |
81 | 81 | border-radius: var(--hamelp-radius, 3px); |
82 | 82 | background: var(--hamelp-surface); |
|
94 | 94 | min-height: calc(var(--hamelp-btn-size) + 1rem); |
95 | 95 | max-height: 8lh; |
96 | 96 | resize: none; |
97 | | - // Bottom-align the single line of text within the inflated min-height so it |
98 | | - // sits slightly lower than centre ("下寄せ"): the line's bottom gap equals |
99 | | - // padding-bottom (0.75rem ≈ 12px), matching the left text inset for a |
100 | | - // balanced feel, while the top gap stays larger. Once the content exceeds |
101 | | - // min-height (multi-line), align-content has no effect, so wrapped text still |
102 | | - // grows top-anchored as expected (no text under the inset button). |
103 | | - align-content: end; |
| 97 | + // Vertically CENTER the single line of text within the inflated min-height. |
| 98 | + // With symmetric vertical padding above, centering is metric-robust: the line |
| 99 | + // stays visually centered independent of the theme's font/line-height (a |
| 100 | + // bottom-aligned approach drifts too low under some themes). Once the content |
| 101 | + // exceeds min-height (multi-line), align-content has no effect, so wrapped |
| 102 | + // text still grows top-anchored as expected (no text under the inset button). |
| 103 | + align-content: center; |
104 | 104 | } |
105 | 105 |
|
106 | 106 | // Focus ring matches the button and the search box input (outline, 2px offset). |
|
281 | 281 | :where(.hamelp-ai-overview__preview textarea) { |
282 | 282 | flex: 1; |
283 | 283 | box-sizing: border-box; |
284 | | - // Mirror the front-end textarea padding so the inset button and the |
285 | | - // bottom-aligned single line stay in the same place (see that rule). |
286 | | - padding: 0.75rem calc(var(--hamelp-btn-size) + 1rem) calc(var(--hamelp-btn-size) - 40px + 0.75rem) 0.75rem; |
| 284 | + // Mirror the front-end textarea padding (symmetric vertical padding) so the |
| 285 | + // inset button and the centered single line stay in the same place (see that |
| 286 | + // rule). |
| 287 | + padding: 0.75rem calc(var(--hamelp-btn-size) + 1rem) 0.75rem 0.75rem; |
287 | 288 | resize: none; |
288 | 289 | field-sizing: content; |
289 | 290 | // Match the front-end min-height so the inset send button clears equal gaps |
290 | 291 | // on every side in the single-line state (see the front-end textarea rule). |
291 | 292 | min-height: calc(var(--hamelp-btn-size) + 1rem); |
292 | | - // Match the front-end bottom-aligned ("下寄せ") single line of text. |
293 | | - align-content: end; |
| 293 | + // Match the front-end vertically-centered single line of text. |
| 294 | + align-content: center; |
294 | 295 | } |
295 | 296 |
|
296 | 297 | :where(.hamelp-ai-overview__note) { |
|
0 commit comments