Initial commit

srcs/RobotNet10/Components/RobotNet10.ScriptEditor/ScriptEditor.razor.css

@@ -0,0 +1,169 @@
+.script-editor-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+    background-color: #1e1e1e; /* Dark theme giống VSCode */
+}
+
+/* ============================================
+   Phần 1: Sidebar
+   ============================================ */
+.sidebar-container {
+    display: flex;
+    flex-direction: row;
+    background-color: #252526; /* Dark sidebar background */
+    position: relative;
+    min-width: 200px;
+    max-width: 600px;
+    border-right: 1px solid #3e3e42; /* Border giữa sidebar và editor+console */
+}
+
+.sidebar-content {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+    background-color: #252526;
+}
+
+/* Accordion Items styles đã được di chuyển vào SidebarAccordionItem.razor.css */
+
+/* Resizer cho sidebar (ngang) */
+.sidebar-resizer {
+    width: 4px;
+    background-color: transparent;
+    cursor: col-resize;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 10;
+    transition: background-color 0.15s ease;
+}
+
+.sidebar-resizer:hover {
+    background-color: #007acc;
+}
+
+.sidebar-resizer:active {
+    background-color: #007acc;
+}
+
+/* ============================================
+   Phần 2 và 3: Editor Area và Console Panel
+   ============================================ */
+.editor-console-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    background-color: #1e1e1e;
+}
+
+/* Phần 2: Editor Area */
+.editor-area {
+    display: flex;
+    flex-direction: column;
+    background-color: #1e1e1e;
+    position: relative;
+    min-height: 200px;
+    flex: 1 1 auto;
+}
+
+/* Disable transition khi đang resize */
+.editor-area.resizing {
+    transition: none !important;
+}
+
+.editor-area-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    color: #cccccc;
+    width: 100%;
+    height: 100%;
+}
+
+.editor-area-content h6 {
+    color: #ffffff;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    margin: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #3e3e42;
+}
+
+/* Resizer giữa Editor và Console (dọc) */
+.vertical-resizer {
+    height: 4px;
+    background-color: transparent;
+    cursor: row-resize;
+    z-index: 10;
+    transition: background-color 0.15s ease;
+    flex-shrink: 0;
+}
+
+.vertical-resizer:hover {
+    background-color: #007acc;
+}
+
+.vertical-resizer:active {
+    background-color: #007acc;
+}
+
+/* Phần 3: Console Panel */
+.console-panel {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background-color: #1e1e1e;
+    border-top: 1px solid #3e3e42;
+    min-height: 200px; /* Chiều cao khởi tạo ban đầu */
+    max-height: 80%;
+    flex: 0 1 auto;
+    height: 200px; /* Chiều cao mặc định */
+    transition: min-height 0.3s ease-in-out, flex-basis 0.3s ease-in-out;
+}
+
+/* Disable transition khi đang resize để tránh delay */
+.console-panel.resizing {
+    transition: none !important;
+}
+
+.console-panel.collapsed {
+    height: auto;
+    min-height: 0;
+    flex: 0 0 auto;
+    flex-basis: auto;
+    max-height: none;
+    transition: height 0.3s ease-in-out, min-height 0.3s ease-in-out, flex-basis 0.3s ease-in-out;
+}
+
+/* Scrollbar styling */
+.sidebar-content::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+.sidebar-content::-webkit-scrollbar-track {
+    background: #1e1e1e;
+}
+
+.sidebar-content::-webkit-scrollbar-thumb {
+    background: #424242;
+    border-radius: 5px;
+}
+
+.sidebar-content::-webkit-scrollbar-thumb:hover {
+    background: #4e4e4e;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .sidebar-container {
+        min-width: 150px;
+    }
+}
+