overleaf/services/web/frontend/stylesheets/app/editor/ide-react.less
ilkin-overleaf 5c7fbdceac Merge pull request #15347 from overleaf/ii-ide-page-prototype-chat-pane
Chat for React IDE page

GitOrigin-RevId: 2a34e754a810fd6ef07e4213ad1d31d5e8e54b4c
2023-10-30 09:04:24 +00:00

106 lines
2.4 KiB
Text

#ide-root {
height: 100vh;
.global-alerts {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.chat {
position: relative;
height: 100%;
}
}
.ide-react-main {
height: 100%;
display: flex;
flex-direction: column;
.toolbar.toolbar-header {
position: static;
flex-grow: 0;
color: var(--neutral-20);
}
}
.ide-react-body {
flex-grow: 1;
}
.horizontal-resize-handle {
width: @ui-resizer-size !important;
height: 100%;
// Enable ::before and ::after pseudo-elements to position themselves correctly
position: relative;
background-color: @editor-resizer-bg-color;
.custom-toggler {
padding: 0;
border-width: 0;
}
&::before,
&::after {
// This SVG has the colour hard-coded to the current value of @ol-blue-gray-2, so if we changed @ol-blue-gray-2,
// we'd have to change this SVG too
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='18' viewBox='0 0 7 18'%3E%3Cpath d='M2 0h3v3H2zM2 5h3v3H2zM2 10h3v3H2zM2 15h3v3H2z' style='fill:%239da7b7'/%3E%3C/svg%3E");
display: block;
position: absolute;
text-align: center;
left: 0;
width: 7px;
height: 18px;
}
&::before {
top: 25%;
}
&::after {
top: 75%;
}
}
.vertical-resize-handle {
height: 6px;
background-color: @vertical-resizable-resizer-bg;
&:hover {
background-color: @vertical-resizable-resizer-hover-bg;
}
&::after {
// This SVG has the colour hard-coded to the current value of @ol-blue-gray-2, so if we changed @ol-blue-gray-2,
// we'd have to change this SVG too
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='6' viewBox='0 0 18 6'%3E%3Cpath d='M0 1.5h3v3H0zM5 1.5h3v3H5zM10 1.5h3v3h-3zM15 1.5h3v3h-3z' style='fill:%239da7b7'/%3E%3C/svg%3E");
display: block;
text-align: center;
line-height: 0;
}
}
// Styles for placeholder elements that will eventually be replaced
.ide-react-placeholder-chat {
background-color: var(--editor-toolbar-bg);
color: var(--neutral-20);
height: 100%;
}
.ide-react-placeholder-editor-sidebar {
height: 100%;
background-color: @file-tree-bg;
color: var(--neutral-20);
}
.ide-react-placeholder-symbol-palette {
height: 100%;
background-color: @symbol-palette-bg;
color: var(--neutral-20);
}
.ide-react-file-tree-panel {
display: flex;
}