forked from React-Group/interstellar_ai
39 lines
1.1 KiB
CSS
39 lines
1.1 KiB
CSS
/* container.css */
|
|
.container,
|
|
.content {
|
|
padding-top: 10vh;
|
|
display: flex;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
position: relative; /* Ensure relative positioning for proper transitions */
|
|
}
|
|
|
|
.left-panel {
|
|
width: 25vw; /* Adjust as needed */
|
|
transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
|
|
background-color: var(--left-panel-background-color); /* Use variable for background color */
|
|
border-radius: 0 1em 0 0;
|
|
}
|
|
|
|
.left-panel.hidden {
|
|
opacity: 0; /* Fade out when hidden */
|
|
width: 0; /* Collapse width to 0 */
|
|
visibility: hidden; /* Hide visibility while collapsing */
|
|
}
|
|
|
|
.conversation-container {
|
|
flex: 1;
|
|
transition: margin-left 0.3s ease; /* Smooth margin adjustment */
|
|
background-color: var(--conversation-background-color); /* Use variable for background color */
|
|
border-radius: 1em 0 0 0;
|
|
}
|
|
|
|
/* Adjust margin-left when panel is shown or hidden */
|
|
.conversation-container.expanded {
|
|
margin-left: 1vw;
|
|
}
|
|
|
|
.conversation-container.collapsed {
|
|
margin-left: 1vw; /* Space for the left panel */
|
|
}
|