whai/cherry-studio
1
1
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

style: improved chat window styling and accessibility

Browse Source
This commit is contained in:
kangfenmao 2024-11-11 23:26:37 +08:00
parent 23ef4ab952
commit 739aa21475
3 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/renderer/src/assets/styles/index.scss
View File

@ -211,6 +211,9 @@ body[os='windows'] {
.bubble { .bubble {
background-color: var(--chat-background); background-color: var(--chat-background);
#chat-main {
background-color: var(--chat-background);
}
#messages { #messages {
background-color: var(--chat-background); background-color: var(--chat-background);
} }
@ -235,7 +238,7 @@ body[os='windows'] {
.anticon, .anticon,
.iconfont, .iconfont,
.message-tokens { .message-tokens {
color: var(--chat-text-user); color: var(--chat-text-user) !important;
} }
.message-action-button:hover { .message-action-button:hover {
background-color: var(--color-white-soft); background-color: var(--color-white-soft);

3
src/renderer/src/pages/home/Chat.tsx
View File

@ -24,7 +24,7 @@ const Chat: FC<Props> = (props) => {
return ( return (
<Container id="chat" className={messageStyle}> <Container id="chat" className={messageStyle}>
<Main vertical flex={1} justify="space-between"> <Main id="chat-main" vertical flex={1} justify="space-between">
<Messages <Messages
key={props.activeTopic.id} key={props.activeTopic.id}
assistant={assistant} assistant={assistant}
@ -52,7 +52,6 @@ const Container = styled.div`
height: 100%; height: 100%;
flex: 1; flex: 1;
justify-content: space-between; justify-content: space-between;
background-color: var(--color-background);
` `
const Main = styled(Flex)` const Main = styled(Flex)`

4
src/renderer/src/pages/home/Inputbar/Inputbar.tsx
View File

@ -399,9 +399,13 @@ const Textarea = styled(TextArea)`
overflow: auto; overflow: auto;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
color: var(--color-text);
&.ant-input { &.ant-input {
line-height: 1.4; line-height: 1.4;
} }
&::placeholder {
color: var(--color-text-3);
}
` `
const Toolbar = styled.div` const Toolbar = styled.div`