feat: hide control ribbon when panel is expanded for cleaner UI
Enhanced the floating control panel behavior: - Ribbon smoothly fades out (opacity: 0) when panel expands - Ribbon becomes non-interactive (pointer-events: none) when hidden - Added smooth opacity transition (0.3s ease) for elegant fade effect - Maintains consistent transition timing with panel slide animation This eliminates the redundant ribbon icon when the full panel is visible, creating a cleaner and less cluttered interface while maintaining the intuitive expand/collapse interaction. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -416,6 +416,11 @@ class DocumentManager:
|
|||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.markitect-control-panel.expanded .markitect-control-ribbon {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* Control ribbon - always visible */
|
/* Control ribbon - always visible */
|
||||||
.markitect-control-ribbon {
|
.markitect-control-ribbon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -431,7 +436,9 @@ class DocumentManager:
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease, opacity 0.3s ease;
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markitect-control-ribbon:hover {
|
.markitect-control-ribbon:hover {
|
||||||
|
|||||||
Reference in New Issue
Block a user