Zhengshou Lai
0c227cae19
- Electron + React + TypeScript 桌面宠物外壳 - xterm.js + node-pty 直接对接 Claude CLI 进程 - 宠物 orb（80x80）可拖拽，点击展开终端面板 - CRT 复古终端主题（扫描线、文字发光） - 全局快捷键 Cmd+Shift+C 显隐 - 窗口位置自动保存 - 中华田园犬吉祥物 icon（AI 生成） - Makefile 新增 `make app` 打包命令
128 lines
2.4 KiB
CSS
128 lines
2.4 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background: transparent;
|
|
overflow: hidden;
|
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
}
|
|
|
|
#root {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* CRT Terminal Effects */
|
|
.crt-container {
|
|
position: relative;
|
|
}
|
|
|
|
.crt-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
rgba(0, 0, 0, 0.08),
|
|
rgba(0, 0, 0, 0.08) 1px,
|
|
transparent 1px,
|
|
transparent 2px
|
|
);
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
.crt-container::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: radial-gradient(
|
|
ellipse at center,
|
|
transparent 50%,
|
|
rgba(0, 0, 0, 0.3) 100%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 11;
|
|
}
|
|
|
|
/* Terminal text glow */
|
|
.xterm-viewport {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.xterm-screen {
|
|
text-shadow: 0 0 2px rgba(74, 222, 128, 0.3), 0 0 4px rgba(74, 222, 128, 0.1) !important;
|
|
}
|
|
|
|
/* Flicker animation */
|
|
@keyframes flicker {
|
|
0% { opacity: 0.98; }
|
|
5% { opacity: 0.95; }
|
|
10% { opacity: 0.98; }
|
|
15% { opacity: 0.96; }
|
|
20% { opacity: 0.99; }
|
|
50% { opacity: 0.98; }
|
|
52% { opacity: 0.93; }
|
|
54% { opacity: 0.98; }
|
|
100% { opacity: 0.98; }
|
|
}
|
|
|
|
.crt-flicker {
|
|
animation: flicker 4s infinite;
|
|
}
|
|
|
|
/* Scanline sweep */
|
|
@keyframes scanline {
|
|
0% { transform: translateY(-100%); }
|
|
100% { transform: translateY(100vh); }
|
|
}
|
|
|
|
.crt-scanline {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
transparent,
|
|
rgba(74, 222, 128, 0.08),
|
|
transparent
|
|
);
|
|
animation: scanline 8s linear infinite;
|
|
pointer-events: none;
|
|
z-index: 12;
|
|
}
|
|
|
|
/* Pet Orb Animations */
|
|
@keyframes orbBreathe {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.06); }
|
|
}
|
|
|
|
@keyframes orbThink {
|
|
0%, 100% { transform: scale(1) rotate(0deg); }
|
|
25% { transform: scale(1.1) rotate(-5deg); }
|
|
75% { transform: scale(1.1) rotate(5deg); }
|
|
}
|
|
|
|
@keyframes orbType {
|
|
0%, 100% { transform: translateY(0); }
|
|
25% { transform: translateY(-2px); }
|
|
75% { transform: translateY(1px); }
|
|
}
|
|
|
|
@keyframes orbGlow {
|
|
0%, 100% { box-shadow: 0 4px 16px rgba(22, 163, 74, 0.4), inset 0 2px 4px rgba(255,255,255,0.2); }
|
|
50% { box-shadow: 0 4px 24px rgba(74, 222, 128, 0.6), inset 0 2px 4px rgba(255,255,255,0.3); }
|
|
}
|