coder/ai-chat-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新建对话按钮样式美化

Browse Source
This commit is contained in:
hubian
2026-04-26 10:49:50 +08:00
parent cafe530a72
commit 41f06148b4
2 changed files with 34 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
www/index.html
View File

@@ -8,12 +8,12 @@
<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0"> <meta http-equiv="Expires" content="0">
<title>AI助手</title> <title>AI助手</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css?v=2.0.4">
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="marked.min.js?v=2.0.3"></script> <script src="marked.min.js?v=2.0.4"></script>
<script src="app.js?v=2.0.3"></script> <script src="app.js?v=2.0.4"></script>
</body> </body>
</html> </html>

39
www/style.css
View File

@@ -72,27 +72,50 @@ body {
overflow-y: auto; overflow-y: auto;
} }
/* Header 中的新建对话按钮 */ /* Header 中的新建对话按钮 - 美化版 */
.new-chat-btn-header { .new-chat-btn-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 40px; width: 44px;
height: 40px; height: 44px;
background: rgba(255,255,255,0.2); background: rgba(255,255,255,0.95);
border: none; border: none;
border-radius: 10px; border-radius: 50%;
color: white; color: var(--primary);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.25s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.5);
position: relative;
overflow: hidden;
}
.new-chat-btn-header::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 100%);
opacity: 0;
transition: opacity 0.25s;
} }
.new-chat-btn-header:hover { .new-chat-btn-header:hover {
background: rgba(255,255,255,0.3); transform: scale(1.08);
box-shadow: 0 4px 16px rgba(102,126,234,0.4), 0 2px 8px rgba(0,0,0,0.2);
color: #5a67d8;
}
.new-chat-btn-header:hover::before {
opacity: 1;
} }
.new-chat-btn-header:active { .new-chat-btn-header:active {
transform: scale(0.95); transform: scale(0.95);
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.new-chat-btn-header svg {
filter: drop-shadow(0 1px 2px rgba(102,126,234,0.3));
} }
/* 原样式保留（备用） */ /* 原样式保留（备用） */