From 0bac867681811a9cc949e56fbf9ca27c68bad1b7 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 16 Jul 2026 13:29:28 +0000 Subject: [PATCH] =?UTF-8?q?AI=20Overview=E3=83=96=E3=83=AD=E3=83=83?= =?UTF-8?q?=E3=82=AF=E3=81=AE=E9=80=81=E4=BF=A1=E3=83=9C=E3=82=BF=E3=83=B3?= =?UTF-8?q?=E3=82=92=E3=83=86=E3=83=BC=E3=83=9ECSS=E3=81=AE=E4=B8=8A?= =?UTF-8?q?=E6=9B=B8=E3=81=8D=E3=81=AB=E5=BC=B7=E3=81=8F=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 一部テーマで送信ボタンが四角く巨大化し矢印が消える問題を修正。 ボタン等のスタイルは全て詳細度0の :where() で書かれていたため、 テーマのボタン向けルール(.wp-block-button__link や button 要素、 form button[type=submit] など)が width/height/min-height/padding/ border-radius を上書きし、円形40pxのボタンが巨大な四角形になっていた。 ボックス系・レイアウト系プロパティのみ .hamelp-ai-overview を前置きして 詳細度 0,2,0 にスコープ化し、テーマの典型的なボタンセレクタに勝つように した。min-height:0 と padding:0 でテーマ注入値を打ち消し、max-height:none でテーマの高さ上限も無効化。色・背景・transition・hover・focusの色などの 装飾系プロパティは従来どおり :where() のまま残し、テーマからのカスタマイズ 性を維持する。 対象: src/blocks/ai-overview/style.scss - .hamelp-ai-overview__button の position/box/flex/border-radius 等をスコープ化 - .hamelp-ai-overview__button-icon の幅高さ(20px)をスコープ化 - .hamelp-ai-overview__input-row の position/display をスコープ化 - .hamelp-ai-overview__input の padding/min-height/box-sizing/field-sizing/ resize/align-content をスコープ化 --- src/blocks/ai-overview/style.scss | 58 ++++++++++++++++++++++--------- 1 file changed, 42 insertions(+), 16 deletions(-) diff --git a/src/blocks/ai-overview/style.scss b/src/blocks/ai-overview/style.scss index b33e18e..34747ff 100644 --- a/src/blocks/ai-overview/style.scss +++ b/src/blocks/ai-overview/style.scss @@ -55,7 +55,10 @@ gap: 0.5rem; } -:where(.hamelp-ai-overview__input-row) { +// Layout-critical, so scoped (0,2,0) for theme-override resistance: the absolute +// send button depends on this positioning context, and a theme `.wp-block-*`/ +// element rule at 0,0,0 could otherwise drop it, un-inset the button. +.hamelp-ai-overview .hamelp-ai-overview__input-row { // Positioning context for the send button, which is taken out of flow and // floated inside the field's bottom-right corner (ChatGPT-style inset). The // field's own border/background/radius stay driven by the textarea's theme @@ -77,13 +80,6 @@ :where(.hamelp-ai-overview__input) { flex: 1; - box-sizing: border-box; - // Reserve room on the right so typed text never runs under the inset send - // button (right = btn size + 1rem to clear the button plus a small gap). The - // vertical padding is SYMMETRIC (top/bottom both 0.75rem) so that, combined - // with align-content: center below, the single line centers cleanly in the - // content box regardless of the button size or the theme's line-height. - padding: 0.75rem calc(var(--hamelp-btn-size) + 1rem) 0.75rem 0.75rem; border: 1px solid var(--hamelp-border); border-radius: var(--hamelp-radius, 3px); background: var(--hamelp-surface); @@ -93,13 +89,26 @@ // content (field-sizing) up to a cap so long input stays fully visible. font-family: inherit; line-height: 1.5; + max-height: 8lh; +} + +// Box/layout props the inset depends on, scoped (0,2,0) for theme-override +// resistance: a theme's `textarea`/`.wp-block-*` rule at 0,0,0 must not collapse +// the reserved button space, the inflated min-height, or the centered line. +.hamelp-ai-overview .hamelp-ai-overview__input { + box-sizing: border-box; + // Reserve room on the right so typed text never runs under the inset send + // button (right = btn size + 1rem to clear the button plus a small gap). The + // vertical padding is SYMMETRIC (top/bottom both 0.75rem) so that, combined + // with align-content: center below, the single line centers cleanly in the + // content box regardless of the button size or the theme's line-height. + padding: 0.75rem calc(var(--hamelp-btn-size) + 1rem) 0.75rem 0.75rem; field-sizing: content; // Minimum height sized so the inset send button clears equal ~8px gaps on // every side in the single-line state: button height + 2 × the button's // corner inset (0.5rem each). field-sizing still grows the field past this // as text wraps, at which point the top gap widens. min-height: calc(var(--hamelp-btn-size) + 1rem); - max-height: 8lh; resize: none; // Vertically CENTER the single line of text within the inflated min-height. // With symmetric vertical padding above, centering is metric-robust: the line @@ -135,7 +144,14 @@ } } -:where(.hamelp-ai-overview__button) { +// Structural/box/layout props scoped (0,2,0) for theme-override resistance. +// Theme button rules (`.wp-block-button__link`, `form button[type=submit]`, bare +// `button`) at 0,0,0–0,1,1 otherwise win and inflate the button into a big +// rectangle (and can push the arrow out). min-height:0 + padding:0 NEUTRALIZE +// theme-injected values; max-height:none guards against theme height caps. +// Cosmetics (background/gradient, color, transition, :hover, focus color) stay +// low-specificity in :where() below so themes can still re-skin them. +.hamelp-ai-overview .hamelp-ai-overview__button { // Fixed-size circular icon button (ChatGPT-style), floated inside the field's // bottom-right corner. The constant bottom offset keeps it pinned to the // bottom as the textarea grows, instead of riding up with the content. @@ -143,13 +159,28 @@ right: 0.5rem; bottom: 0.5rem; display: flex; + flex: none; align-items: center; justify-content: center; + box-sizing: border-box; width: var(--hamelp-btn-size); height: var(--hamelp-btn-size); + min-height: 0; + max-height: none; padding: 0; - border: 1px solid transparent; border-radius: 50%; + line-height: 1; +} + +// Keep the icon size enforced at the same specificity so a theme `button svg` +// rule can't resize the arrow or push it out of the circle. +.hamelp-ai-overview .hamelp-ai-overview__button-icon { + width: 20px; + height: 20px; +} + +:where(.hamelp-ai-overview__button) { + border: 1px solid transparent; background: var(--hamelp-button-bg, #1571da); background: linear-gradient(135deg, var(--hamelp-button-bg, #1571da), var(--hamelp-accent-hover)); color: var(--hamelp-on-accent); @@ -157,11 +188,6 @@ transition: opacity 0.2s ease; } -:where(.hamelp-ai-overview__button-icon) { - width: 20px; - height: 20px; -} - :where(.hamelp-ai-overview__button:hover) { opacity: 0.9; }