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="Expires" content="0">
<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">
</head>
<body>
<div id="app"></div>
<script src="marked.min.js?v=2.0.3"></script>
<script src="app.js?v=2.0.3"></script>
<script src="marked.min.js?v=2.0.4"></script>
<script src="app.js?v=2.0.4"></script>
</body>
</html>

39
www/style.css
View File

@@ -72,27 +72,50 @@ body {
overflow-y: auto;
}
/* Header 中的新建对话按钮 */
/* Header 中的新建对话按钮 - 美化版 */
.new-chat-btn-header {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255,255,255,0.2);
width: 44px;
height: 44px;
background: rgba(255,255,255,0.95);
border: none;
border-radius: 10px;
color: white;
border-radius: 50%;
color: var(--primary);
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 {
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 {
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));
}
/* 原样式保留（备用） */