fix: unify composer tool button styles
Use matching button and icon sizes, spacing, and hover feedback for attachment, voice input, and composer options while preserving recording and expanded states. Release note: 修复输入框附件、语音和设置按钮的样式不一致问题,统一尺寸、间距和悬停效果。
This commit is contained in:
@@ -10007,7 +10007,7 @@ function App(): React.JSX.Element {
|
|||||||
title={t("composer.settings")}
|
title={t("composer.settings")}
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<SlidersHorizontal aria-hidden="true" size={17} />
|
<SlidersHorizontal aria-hidden="true" size={18} />
|
||||||
</button>
|
</button>
|
||||||
<div
|
<div
|
||||||
aria-label={t("composer.settings")}
|
aria-label={t("composer.settings")}
|
||||||
|
|||||||
+10
-25
@@ -7485,27 +7485,6 @@ button > svg {
|
|||||||
overflow-wrap: anywhere;
|
overflow-wrap: anywhere;
|
||||||
}
|
}
|
||||||
|
|
||||||
.composer__options-trigger {
|
|
||||||
display: inline-flex;
|
|
||||||
width: 34px;
|
|
||||||
height: 34px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: var(--radius-control);
|
|
||||||
background: transparent;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
cursor: pointer;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.composer__options-trigger:hover,
|
|
||||||
.composer__options-trigger[aria-expanded="true"] {
|
|
||||||
background: var(--accent-subtle);
|
|
||||||
color: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.composer__options {
|
.composer__options {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 25;
|
z-index: 25;
|
||||||
@@ -7619,11 +7598,8 @@ button > svg {
|
|||||||
gap: var(--space-2);
|
gap: var(--space-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.composer__tool-group {
|
|
||||||
gap: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.composer__tool-group button,
|
.composer__tool-group button,
|
||||||
|
.composer__options-trigger,
|
||||||
.knowledge-scope > button {
|
.knowledge-scope > button {
|
||||||
display: grid;
|
display: grid;
|
||||||
min-width: 32px;
|
min-width: 32px;
|
||||||
@@ -7642,7 +7618,16 @@ button > svg {
|
|||||||
color var(--motion-fast, 120ms) ease-out;
|
color var(--motion-fast, 120ms) ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.composer__tool-group button,
|
||||||
|
.composer__options-trigger {
|
||||||
|
width: 32px;
|
||||||
|
padding: 0;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
.composer__tool-group button:hover,
|
.composer__tool-group button:hover,
|
||||||
|
.composer__options-trigger:hover,
|
||||||
|
.composer__options-trigger[aria-expanded="true"],
|
||||||
.knowledge-scope > button:hover {
|
.knowledge-scope > button:hover {
|
||||||
border-color: var(--accent-selected);
|
border-color: var(--accent-selected);
|
||||||
background: var(--accent-subtle);
|
background: var(--accent-subtle);
|
||||||
|
|||||||
Reference in New Issue
Block a user