mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2026-01-09 14:59:27 +08:00
style: update various component styles for improved layout and readability
- Adjusted color for list items in color.scss for better contrast. - Modified line-height and margins in markdown.scss for improved text readability. - Changed height property in FloatingSidebar.tsx for consistent layout. - Increased padding in AgentsPage.tsx for better spacing. - Updated padding and border-radius in Inputbar.tsx for enhanced aesthetics. - Reduced margin in MessageHeader.tsx for tighter layout. - Refactored GroupTitle styles in AssistantsTab.tsx for better alignment and spacing.
This commit is contained in:
parent
7e672d86e7
commit
fca93b6c51
@ -44,7 +44,7 @@
|
|||||||
--color-reference-text: #ffffff;
|
--color-reference-text: #ffffff;
|
||||||
--color-reference-background: #0b0e12;
|
--color-reference-background: #0b0e12;
|
||||||
|
|
||||||
--color-list-item: #222;
|
--color-list-item: #252525;
|
||||||
--color-list-item-hover: #1e1e1e;
|
--color-list-item-hover: #1e1e1e;
|
||||||
|
|
||||||
--modal-background: #111111;
|
--modal-background: #111111;
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
.markdown {
|
.markdown {
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
line-height: 2;
|
line-height: 1.6;
|
||||||
user-select: text;
|
user-select: text;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
@ -21,7 +21,7 @@
|
|||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
margin: 2em 0 1em 0;
|
margin: 1.5em 0 1em 0;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-family: var(--font-family);
|
font-family: var(--font-family);
|
||||||
@ -60,6 +60,7 @@
|
|||||||
margin: 1.3em 0;
|
margin: 1.3em 0;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
|
line-height: 2;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|||||||
@ -54,7 +54,7 @@ const FloatingSidebar: FC<Props> = ({
|
|||||||
style={{
|
style={{
|
||||||
background: 'transparent',
|
background: 'transparent',
|
||||||
border: 'none',
|
border: 'none',
|
||||||
maxHeight: maxHeight
|
height: '100%'
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</PopoverContent>
|
</PopoverContent>
|
||||||
@ -82,6 +82,9 @@ const FloatingSidebar: FC<Props> = ({
|
|||||||
|
|
||||||
const PopoverContent = styled.div<{ maxHeight: number }>`
|
const PopoverContent = styled.div<{ maxHeight: number }>`
|
||||||
max-height: ${(props) => props.maxHeight}px;
|
max-height: ${(props) => props.maxHeight}px;
|
||||||
|
&.ant-popover-inner-content {
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
export default FloatingSidebar
|
export default FloatingSidebar
|
||||||
|
|||||||
@ -266,7 +266,7 @@ const AgentsGroupList = styled(Scrollbar)`
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 8px 0;
|
padding: 12px 0;
|
||||||
border-right: 0.5px solid var(--color-border);
|
border-right: 0.5px solid var(--color-border);
|
||||||
border-top-left-radius: inherit;
|
border-top-left-radius: inherit;
|
||||||
border-bottom-left-radius: inherit;
|
border-bottom-left-radius: inherit;
|
||||||
|
|||||||
@ -955,14 +955,14 @@ const Container = styled.div`
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
padding: 0 16px 16px 16px;
|
padding: 0 20px 18px 20px;
|
||||||
`
|
`
|
||||||
|
|
||||||
const InputBarContainer = styled.div`
|
const InputBarContainer = styled.div`
|
||||||
border: 0.5px solid var(--color-border);
|
border: 0.5px solid var(--color-border);
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 15px;
|
border-radius: 20px;
|
||||||
padding-top: 8px; // 为拖动手柄留出空间
|
padding-top: 8px; // 为拖动手柄留出空间
|
||||||
background-color: var(--color-background-opacity);
|
background-color: var(--color-background-opacity);
|
||||||
|
|
||||||
|
|||||||
@ -126,7 +126,7 @@ const Container = styled.div`
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 5px;
|
||||||
`
|
`
|
||||||
|
|
||||||
const UserWrap = styled.div`
|
const UserWrap = styled.div`
|
||||||
|
|||||||
@ -6,7 +6,7 @@ import { useAssistants } from '@renderer/hooks/useAssistant'
|
|||||||
import { useAssistantsTabSortType } from '@renderer/hooks/useStore'
|
import { useAssistantsTabSortType } from '@renderer/hooks/useStore'
|
||||||
import { useTags } from '@renderer/hooks/useTags'
|
import { useTags } from '@renderer/hooks/useTags'
|
||||||
import { Assistant, AssistantsSortType } from '@renderer/types'
|
import { Assistant, AssistantsSortType } from '@renderer/types'
|
||||||
import { Divider, Tooltip } from 'antd'
|
import { Tooltip } from 'antd'
|
||||||
import { FC, useCallback, useRef, useState } from 'react'
|
import { FC, useCallback, useRef, useState } from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
@ -87,7 +87,7 @@ const Assistants: FC<AssistantsTabProps> = ({
|
|||||||
{group.tag}
|
{group.tag}
|
||||||
</GroupTitleName>
|
</GroupTitleName>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Divider style={{ margin: '12px 0' }}></Divider>
|
<GroupTitleDivider />
|
||||||
</GroupTitle>
|
</GroupTitle>
|
||||||
)}
|
)}
|
||||||
{!collapsedTags[group.tag] && (
|
{!collapsedTags[group.tag] && (
|
||||||
@ -198,13 +198,16 @@ const AssistantAddItem = styled.div`
|
|||||||
`
|
`
|
||||||
|
|
||||||
const GroupTitle = styled.div`
|
const GroupTitle = styled.div`
|
||||||
padding: 8px 0;
|
|
||||||
position: relative;
|
|
||||||
color: var(--color-text-2);
|
color: var(--color-text-2);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-bottom: -8px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 24px;
|
||||||
|
margin: 5px 0;
|
||||||
`
|
`
|
||||||
|
|
||||||
const GroupTitleName = styled.div`
|
const GroupTitleName = styled.div`
|
||||||
@ -212,13 +215,18 @@ const GroupTitleName = styled.div`
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: var(--color-background);
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
position: absolute;
|
|
||||||
transform: translateY(2px);
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-right: 5px;
|
||||||
|
display: flex;
|
||||||
|
`
|
||||||
|
|
||||||
|
const GroupTitleDivider = styled.div`
|
||||||
|
flex: 1;
|
||||||
|
border-top: 1px solid var(--color-border);
|
||||||
`
|
`
|
||||||
|
|
||||||
const AssistantName = styled.div`
|
const AssistantName = styled.div`
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user