mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-25 00:23:53 +08:00
update:测试页面切换模型和切换背景的按钮样式调整
This commit is contained in:
@@ -108,26 +108,68 @@ body {
|
||||
animation: shadow-float 1.26s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.loading-char-float .main-char span:nth-child(1) { animation-delay: 0s; }
|
||||
.loading-char-float .main-char span:nth-child(2) { animation-delay: 0.11s; }
|
||||
.loading-char-float .main-char span:nth-child(3) { animation-delay: 0.22s; }
|
||||
.loading-char-float .main-char span:nth-child(4) { animation-delay: 0.33s; }
|
||||
.loading-char-float .main-char span:nth-child(5) { animation-delay: 0.44s; }
|
||||
.loading-char-float .main-char span:nth-child(6) { animation-delay: 0.55s; }
|
||||
.loading-char-float .main-char span:nth-child(1) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.loading-char-float .main-char span:nth-child(2) {
|
||||
animation-delay: 0.11s;
|
||||
}
|
||||
|
||||
.loading-char-float .main-char span:nth-child(3) {
|
||||
animation-delay: 0.22s;
|
||||
}
|
||||
|
||||
.loading-char-float .main-char span:nth-child(4) {
|
||||
animation-delay: 0.33s;
|
||||
}
|
||||
|
||||
.loading-char-float .main-char span:nth-child(5) {
|
||||
animation-delay: 0.44s;
|
||||
}
|
||||
|
||||
.loading-char-float .main-char span:nth-child(6) {
|
||||
animation-delay: 0.55s;
|
||||
}
|
||||
|
||||
@keyframes scan {
|
||||
0% { background-position: 0 0; }
|
||||
100% { background-position: 0 100px; }
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes char-float {
|
||||
0%, 100% { transform: translateY(0); opacity: 1; text-shadow: 0 0 5px #5865f2, 0 0 10px rgba(88, 101, 242, 0.8); }
|
||||
50% { transform: translateY(-5px); opacity: 0.9; text-shadow: 0 0 10px #5865f2, 0 0 20px rgba(88, 101, 242, 0.8); }
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 5px #5865f2, 0 0 10px rgba(88, 101, 242, 0.8);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
opacity: 0.9;
|
||||
text-shadow: 0 0 10px #5865f2, 0 0 20px rgba(88, 101, 242, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shadow-float {
|
||||
0%, 100% { transform: translateY(3px); opacity: 0.3; }
|
||||
50% { transform: translateY(8px); opacity: 0.15; }
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(3px);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(8px);
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== Live2D显示区域 ==================== */
|
||||
@@ -761,6 +803,72 @@ body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.model-select {
|
||||
width: 100%;
|
||||
padding: 10px 40px 10px 14px;
|
||||
border: 1px solid #40444b;
|
||||
border-radius: 8px;
|
||||
background: #40444b;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
||||
.model-select:hover {
|
||||
background: #4f545c;
|
||||
}
|
||||
|
||||
.model-select:focus {
|
||||
outline: none;
|
||||
border-color: #40444b;
|
||||
}
|
||||
|
||||
.model-select option {
|
||||
background: #2f3136;
|
||||
color: #ffffff;
|
||||
padding: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.background-btn {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #40444b;
|
||||
border-radius: 8px;
|
||||
background: #40444b;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.background-btn:hover {
|
||||
background: #4f545c;
|
||||
}
|
||||
|
||||
.background-btn:active {
|
||||
background: #40444b;
|
||||
}
|
||||
|
||||
.background-btn .btn-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
/* ==================== MCP工具样式 ==================== */
|
||||
.mcp-tools-container {
|
||||
background: #2f3136;
|
||||
|
||||
Reference in New Issue
Block a user