69 lines
1.8 KiB
CSS
69 lines
1.8 KiB
CSS
/* container.css */
|
|
.container {
|
|
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, 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 */
|
|
}
|
|
|
|
/* container.css */
|
|
|
|
/* Overlay styles for Documentation and FAQ */
|
|
.overlay {
|
|
position: fixed; /* Fixed positioning for overlay */
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
|
|
z-index: 1000; /* Ensure it is above other content */
|
|
display: none; /* Hidden by default */
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white; /* Text color for better readability */
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Show overlay when active */
|
|
.overlay.active {
|
|
display: flex;
|
|
}
|
|
|
|
/* Specific styling for Documentation overlay */
|
|
.overlay.documentation {
|
|
/* Add specific styles for Documentation overlay if needed */
|
|
}
|
|
|
|
/* Specific styling for FAQ overlay */
|
|
.overlay.faq {
|
|
/* Add specific styles for FAQ overlay if needed */
|
|
}
|