kanshan/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-02-19 00:54:46 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

fix: ui

Browse Source
This commit is contained in:
suyao 2026-01-27 19:49:46 +08:00
parent e6645ada61
commit bea707c1d1
No known key found for this signature in database
4 changed files with 70 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/renderer/src/components/Onboarding/styles/driver-theme.css
View File

@ -132,9 +132,10 @@
/* User Guide specific styles matching Figma design */
/* Supports both light and dark modes */
/* Default uses light mode colors, dark mode overrides below */
.driver-popover.user-guide-popover {
background: var(--color-background-soft) !important;
background-color: var(--color-background-soft) !important;
background: #f7f8f7 !important;
background-color: #f7f8f7 !important;
background-image: none !important;
color: var(--color-text) !important;
border: 1px solid var(--color-border) !important;
@ -146,8 +147,10 @@
opacity: 1 !important;
}
/* Dark mode shadow adjustment */
/* Dark mode: solid dark background */
.driver-popover.user-guide-popover.dark {
background: #222222 !important;
background-color: #222222 !important;
box-shadow: 0px 4px 13.8px 0px rgba(0, 0, 0, 0.4) !important;
}
@ -322,27 +325,45 @@
height: 24px !important;
}
/* Arrow styles for user guide popover */
/* Arrow styles for user guide popover - default (light mode) */
.driver-popover.user-guide-popover .driver-popover-arrow-side-left {
border-right-color: var(--color-background-soft) !important;
border-right-color: #f7f8f7 !important;
}
.driver-popover.user-guide-popover .driver-popover-arrow-side-right {
border-left-color: var(--color-background-soft) !important;
border-left-color: #f7f8f7 !important;
}
.driver-popover.user-guide-popover .driver-popover-arrow-side-top {
border-bottom-color: var(--color-background-soft) !important;
border-bottom-color: #f7f8f7 !important;
}
.driver-popover.user-guide-popover .driver-popover-arrow-side-bottom {
border-top-color: var(--color-background-soft) !important;
border-top-color: #f7f8f7 !important;
}
/* Arrow styles for user guide popover - dark mode */
.driver-popover.user-guide-popover.dark .driver-popover-arrow-side-left {
border-right-color: #222222 !important;
}
.driver-popover.user-guide-popover.dark .driver-popover-arrow-side-right {
border-left-color: #222222 !important;
}
.driver-popover.user-guide-popover.dark .driver-popover-arrow-side-top {
border-bottom-color: #222222 !important;
}
.driver-popover.user-guide-popover.dark .driver-popover-arrow-side-bottom {
border-top-color: #222222 !important;
}
/* Step 2: Minimal popover for pointing to target elements */
/* Default uses light mode colors, dark mode overrides below */
.driver-popover.user-guide-popover-minimal {
background: var(--color-background-soft) !important;
background-color: var(--color-background-soft) !important;
background: #f7f8f7 !important;
background-color: #f7f8f7 !important;
background-image: none !important;
color: var(--color-text) !important;
border: 1px solid var(--color-border) !important;
@ -356,7 +377,10 @@
opacity: 1 !important;
}
/* Dark mode: solid dark background */
.driver-popover.user-guide-popover-minimal.dark {
background: #222222 !important;
background-color: #222222 !important;
box-shadow: 0px 4px 13.8px 0px rgba(0, 0, 0, 0.4) !important;
}
@ -511,19 +535,36 @@
background-color: #35c052 !important;
}
/* Arrow styles for minimal popover */
/* Arrow styles for minimal popover - default (light mode) */
.driver-popover.user-guide-popover-minimal .driver-popover-arrow-side-left {
border-right-color: var(--color-background-soft) !important;
border-right-color: #f7f8f7 !important;
}
.driver-popover.user-guide-popover-minimal .driver-popover-arrow-side-right {
border-left-color: var(--color-background-soft) !important;
border-left-color: #f7f8f7 !important;
}
.driver-popover.user-guide-popover-minimal .driver-popover-arrow-side-top {
border-bottom-color: var(--color-background-soft) !important;
border-bottom-color: #f7f8f7 !important;
}
.driver-popover.user-guide-popover-minimal .driver-popover-arrow-side-bottom {
border-top-color: var(--color-background-soft) !important;
border-top-color: #f7f8f7 !important;
}
/* Arrow styles for minimal popover - dark mode */
.driver-popover.user-guide-popover-minimal.dark .driver-popover-arrow-side-left {
border-right-color: #222222 !important;
}
.driver-popover.user-guide-popover-minimal.dark .driver-popover-arrow-side-right {
border-left-color: #222222 !important;
}
.driver-popover.user-guide-popover-minimal.dark .driver-popover-arrow-side-top {
border-bottom-color: #222222 !important;
}
.driver-popover.user-guide-popover-minimal.dark .driver-popover-arrow-side-bottom {
border-top-color: #222222 !important;
}

7
src/renderer/src/components/UserGuide/CompletionModal/styles.ts
View File

@ -86,8 +86,12 @@ export const AssistantsSection = styled.div`
export const AssistantsGrid = styled.div`
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
@media (max-width: 560px) {
grid-template-columns: 1fr;
}
`
export const AssistantCardContainer = styled.div`
@ -100,6 +104,7 @@ export const AssistantCardContainer = styled.div`
border: 1px solid var(--color-border);
background: var(--color-background);
cursor: pointer;
min-width: 0;
transition: all 0.2s ease;
&:hover {

3
src/renderer/src/components/UserGuide/GuidePage/styles.ts
View File

@ -240,7 +240,8 @@ export const RightPanel = styled.div<{ $gradient?: string }>`
justify-content: center;
padding: 40px;
background: ${(props) => props.$gradient || gradients.assistants};
border-radius: 24px;
border-top-left-radius: 24px;
border-bottom-left-radius: 24px;
position: relative;
overflow: hidden;
margin: 0;

7
src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelList.tsx
View File

@ -179,7 +179,12 @@ const ModelList: React.FC<ModelListProps> = ({ providerId }) => {
)}
</Flex>
<Flex gap={10} style={{ marginTop: 12 }}>
<Button type="primary" onClick={onManageModel} icon={<ListCheck size={16} />} disabled={isHealthChecking}>
<Button
type="primary"
onClick={onManageModel}
icon={<ListCheck size={16} />}
disabled={isHealthChecking}
data-guide-target="provider-manage-models">
{t('button.manage')}
</Button>
{provider.id !== 'ovms' ? (