mirror of
https://github.com/samsonjs/vibetunnel.git
synced 2026-03-28 09:55:53 +00:00
920b040b61
- Add proper card layout with compact header and footer - Auto-load asciinema players for all sessions - Change aspect ratio to 640/480 for better terminal display - Fix z-index issues with file browser overlays - Center and fit players within card bounds - Change kill button from 'x' to 'kill' with loading state - Remove session list header and borders for more space 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
73 lines
No EOL
1.6 KiB
CSS
73 lines
No EOL
1.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Fix asciinema player dimensions */
|
|
.ap-player {
|
|
min-width: unset !important;
|
|
min-height: unset !important;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
.asciinema-player-theme-asciinema {
|
|
min-width: unset !important;
|
|
min-height: unset !important;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
/* Ensure terminal player container has proper size */
|
|
#terminal-player {
|
|
min-height: 480px;
|
|
min-width: 640px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Terminal focus indicator */
|
|
.terminal-focused {
|
|
box-shadow: 0 0 0 2px #00ff00;
|
|
border-color: #00ff00 !important;
|
|
}
|
|
|
|
/* Keyboard capture indicator */
|
|
.keyboard-capture-indicator {
|
|
position: fixed;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: rgba(0, 255, 0, 0.1);
|
|
border: 1px solid #00ff00;
|
|
color: #00ff00;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* Force asciinema player to fit within session card bounds */
|
|
.session-preview .asciinema-player,
|
|
.session-preview .ap-player {
|
|
min-width: unset !important;
|
|
min-height: unset !important;
|
|
max-width: 100% !important;
|
|
max-height: 100% !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
overflow: hidden !important;
|
|
z-index: 0 !important;
|
|
object-fit: contain !important;
|
|
}
|
|
|
|
.session-preview .asciinema-player .ap-screen,
|
|
.session-preview .ap-player .ap-screen {
|
|
transform-origin: center center !important;
|
|
max-width: 100% !important;
|
|
max-height: 100% !important;
|
|
z-index: 1 !important;
|
|
object-fit: contain !important;
|
|
}
|
|
|
|
.session-preview .asciinema-player *,
|
|
.session-preview .ap-player * {
|
|
z-index: 1 !important;
|
|
} |