dearwolf/aider
1
0
Fork 0
mirror of https://github.com/Aider-AI/aider.git synced 2025-05-31 01:35:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

feat: Add macOS-like colorful backdrop to terminal display

Browse source
This commit is contained in:
Paul Gauthier (aider) 2025-03-18 18:53:11 -07:00
parent 65ec254c1b
commit f0e66d2bfb
2 changed files with 38 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

33
aider/website/_includes/recording.css
View file

@ -79,12 +79,35 @@
position: relative;
}
.terminal-container {
border-radius: 6px;
/* macOS backdrop styling */
.macos-backdrop {
background: linear-gradient(135deg, #ff9966, #ff5e62, #6666ff, #0066ff);
border-radius: 12px;
padding: 30px;
margin: 20px 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
margin-top: 20px;
margin-bottom: 20px;
}
/* Add subtle wave animation to backdrop */
.macos-backdrop::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
opacity: 0.7;
}
.terminal-container {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
margin-top: 0;
margin-bottom: 0;
position: relative;
}

18
aider/website/_includes/recording.md
View file

@ -12,16 +12,18 @@
<div class="page-container">
<div class="toast-container" id="toast-container"></div>
<div class="terminal-container">
<div class="terminal-header">
<div class="terminal-buttons">
<div class="terminal-button terminal-close"></div>
<div class="terminal-button terminal-minimize"></div>
<div class="terminal-button terminal-expand"></div>
<div class="macos-backdrop">
<div class="terminal-container">
<div class="terminal-header">
<div class="terminal-buttons">
<div class="terminal-button terminal-close"></div>
<div class="terminal-button terminal-minimize"></div>
<div class="terminal-button terminal-expand"></div>
</div>
<div class="terminal-title">aider</div>
</div>
<div class="terminal-title">aider</div>
<div id="demo"></div>
</div>
<div id="demo"></div>
</div>
</div>