Design and layout updates for X-CPQ Material Editor interface

xcpq/buildtime/xcpq_editor/static/css/scpq_content.css

@@ -3,33 +3,60 @@
 main {
     padding: var(--main-content-padding);
     margin: 16px;
-    height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 64px); /* 32px für die Margen */
-    overflow-y: auto; /* Scrollbar, wenn der Inhalt zu groß ist */
+    height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 64px);
+    /* 32px für die Margen */
+    overflow-y: auto;
+    /* Scrollbar, wenn der Inhalt zu groß ist */
     border: 1px solid var(--secondary-color);
     border-radius: var(--box-border-radius);
 }
 
-.tree-view {
-    margin-top: 16px;
+.editor-container {
+    height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 132px);
+    display: flex;
+    flex-direction: row;
+    /* Elemente horizontal anordnen */
+    gap: 16px;
+    /* Abstand zwischen den Elementen */
+    padding: 16px;
+    /* Innenabstand */
+    border-radius: var(--box-border-radius);
+    background-color: var(--data-background-color);
 }
+
+.editor-view {
+    margin-top: 8px;
+    padding: 8px;
+    border: 1px solid var(--primary-color);
+    border-radius: var(--box-border-radius);
+}
+
+/** tree components */
 .node {
     justify-content: center;
-    list-style-type: none; /* Entfernt die Standard-Aufzählungszeichen */
-    padding-left: 20px; /* Einrückung für die Unterlisten */
+    list-style-type: none;
+    /* Entfernt die Standard-Aufzählungszeichen */
+    padding-left: 20px;
+    /* Einrückung für die Unterlisten */
 }
 
 .node img {
-    height: 16px; /* Höhe des Bildes */
-    margin-right: 2px; /* Abstand zwischen Bild und Text */
+    height: 12px;
+    /* Höhe des Bildes */
+    margin-right: 2px;
+    /* Abstand zwischen Bild und Text */
 }
 
 .leaf {
-    padding-left: 20px; /* Einrückung für Blätter */
+    padding-left: 20px;
+    /* Einrückung für Blätter */
     color: var(--primary-color);
     font-weight: lighter;
 }
 
 
+
+
 /* Style für allgemeine Elemente */
 .box {
     border: 1px solid var(--primary-color);

xcpq/buildtime/xcpq_editor/static/css/scpq_global.css

@@ -8,6 +8,10 @@
     --font-color: #333333;
     --secondary-font-color: #f3f5f4;
     --background-color: #f3f5f4;
+    --highlight-color: #f0f0f0;
+    --error-color: #ff4d4f;
+    --success-color: #52c41a;
+    --data-background-color: #ffffff;
 
     /* Dimensions */
     --header-height: 32px;