7x31
/
ChatGPT-Next-Web
mirror of https://github.com/Yidadaa/ChatGPT-Next-Web.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: chat panel header background blur&transparent

This commit is contained in:
butterfly 2024-04-22 11:29:20 +08:00
parent 4a5465f884
commit 4400392c0c
2 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/containers/Chat/ChatHeader.tsx
View File

@ -44,9 +44,15 @@ export default function ChatHeader(props: ChatHeaderProps) {
return ( return (
<div <div
className={`absolute w-[100%] bg-gray-50 z-10 flex flex-0 justify-between items-center px-6 py-4 gap-chat-header-gap border-b-[1px] border-gray-200 ${containerClassName}`} className={`absolute w-[100%] backdrop-blur-[30px] z-10 flex flex-0 justify-between items-center px-6 py-4 gap-chat-header-gap border-b-[1px] border-gray-200 ${containerClassName}`}
data-tauri-drag-region data-tauri-drag-region
> >
<div
className={`absolute z-[-1] top-0 left-0 w-[100%] h-[100%] opacity-85 backdrop-blur-[20px] bg-gray-50 flex flex-0 justify-between items-center gap-chat-header-gap`}
>
{" "}
</div>
{isMobileScreen ? ( {isMobileScreen ? (
<div onClick={() => navigate(Path.Home)}> <div onClick={() => navigate(Path.Home)}>
<GobackIcon /> <GobackIcon />

3
tailwind.config.js
View File

@ -29,6 +29,9 @@ module.exports = {
'2xl': '1980px' '2xl': '1980px'
}, },
extend: { extend: {
backdropBlur: {
'chat-header': '20px',
},
minHeight: { minHeight: {
'chat-input-mobile': '19px', 'chat-input-mobile': '19px',
'chat-input': '60px', 'chat-input': '60px',