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

fix(ui): Add inner glow opacity variable for dropdown menu styling for better darkmode support and improve code quality by using global variables in scss rather than hardcoded variables

Browse Source
This commit is contained in:
Carter Cheng 2025-03-07 12:28:49 +08:00 committed by 亢奋猫
parent 2d8d478e2c
commit ebef970078
2 changed files with 7 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,6 +26,7 @@
--color-background-soft: var(--color-black-soft);
--color-background-mute: var(--color-black-mute);
--color-background-opacity: rgba(34, 34, 34, 0.7);
--inner-glow-opacity: 0.3; // For the glassmorphism effect in the dropdown menu
--color-primary: #00b96b;
--color-primary-soft: #00b96b99;
@ -90,6 +91,7 @@ body[theme-mode='light'] {
--color-background-soft: var(--color-white-soft);
--color-background-mute: var(--color-white-mute);
--color-background-opacity: rgba(235, 235, 235, 0.7);
--inner-glow-opacity: 0.1;
--color-primary: #00b96b;
--color-primary-soft: #00b96b99;

17
src/renderer/src/pages/home/Inputbar/MentionModelsButton.tsx
View File

@ -397,7 +397,7 @@ const DropdownMenuStyle = createGlobalStyle`
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15),
0 4px 16px rgba(0, 0, 0, 0.15),
0 2px 8px rgba(0, 0, 0, 0.12),
inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
inset 0 0 0 0.5px rgba(255, 255, 255, var(--inner-glow-opacity, 0.1));
transform-origin: top;
will-change: transform, opacity;
transition: all 0.15s cubic-bezier(0.4, 0.0, 0.2, 1);
@ -420,23 +420,21 @@ const DropdownMenuStyle = createGlobalStyle`
border: 4px solid transparent;
background-clip: padding-box;
border-radius: 7px;
background-color: transparent;
background-color: var(--color-scrollbar-thumb);
min-height: 50px;
transition: all 0.2s;
}
&:hover::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
background-color: var(--color-scrollbar-thumb);
}
&::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.3);
border: 4px solid transparent;
background-color: var(--color-scrollbar-thumb-hover);
}
&::-webkit-scrollbar-thumb:active {
background-color: rgba(0, 0, 0, 0.4);
border: 3px solid transparent;
background-color: var(--color-scrollbar-thumb-hover);
}
&::-webkit-scrollbar-track {
@ -445,11 +443,6 @@ const DropdownMenuStyle = createGlobalStyle`
}
}
// // Apply margin to the last group
// .ant-dropdown-menu-item-group:last-child {
// margin-bottom: 40px;
// }
.ant-dropdown-menu-item-group {
margin-bottom: 4px;