forked from React-Group/interstellar_ai
34 lines
922 B
CSS
34 lines
922 B
CSS
/* container.css */
|
|
.container {
|
|
display: flex;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
position: relative; /* Ensure relative positioning for proper transitions */
|
|
}
|
|
|
|
.left-panel {
|
|
width: 30vw; /* Adjust as needed */
|
|
transition: width 0.3s ease, visibility 0.3s ease; /* Transition for width, opacity, and visibility */
|
|
}
|
|
|
|
.left-panel.hidden {
|
|
opacity: 0; /* Fade out when hidden */
|
|
width: 0; /* Set width to 0 when hidden */
|
|
visibility: hidden; /* Hide the panel while keeping the space occupied */
|
|
margin-right: -30vw;
|
|
}
|
|
|
|
.conversation-container {
|
|
flex: 1;
|
|
transition: width 0.3s ease, visibility 0.3s ease; /* Transition for margin-left */
|
|
}
|
|
|
|
/* Adjust margin-left when panel is shown or hidden */
|
|
.conversation-container.expanded {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.conversation-container.collapsed {
|
|
margin-left: 30vw; /* Same as the width of the left-panel */
|
|
}
|