Styles

xcpq/buildtime/xcpq_editor/static/css/simplycpq.css

@@ -6,11 +6,12 @@
     --primary-color: #1976D2;
     --secondary-color: #d27519;
     --font-color: #333333;
+    --secondary-font-color: #f3f5f4;
     --background-color: #f3f5f4;
 
     /* Dimensions */
-    --header-height: 60px;
-    --footer-height: 40px;
+    --header-height: 32px;
+    --footer-height: 32px;
     --main-content-padding: 20px;
     --box-border-radius: 10px;
 }
@@ -24,11 +25,14 @@
     font-style: normal;
 }
 
+* {
+    margin: 0;
+    padding: 0;
+}
+
 /* 2. Schriftart anwenden und Ränder entfernen*/
 body {
     font-family: 'Inter', Arial, sans-serif;
-    margin: 0;
-    padding: 0;
     background-color: var(--background-color);
     color: var(--font-color);
 }
@@ -40,4 +44,55 @@ body {
 }
 
 /* Style für Header, Navigation, Main Content, Aside und Footer */
+header {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
 
+    height: var(--header-height);
+    background-color: var(--primary-color);
+    border: 1px solid var(--secondary-color);
+    border-radius: var(--box-border-radius);
+    color: var(--secondary-font-color);
+    margin: 16px;
+    padding: 10px;  
+}
+
+nav {
+    height: var(--header-height);
+    background-color: var(--primary-color);
+    color: var(--secondary-font-color);
+    margin: 16px;
+    padding: 10px;  
+}
+
+nav ul {
+    list-style-type: none; /* Entfernt die Standard-Aufzählungszeichen */
+    display: flex; /* Macht die Liste horizontal */
+    gap: 20px; /* Abstand zwischen den Listenelementen */
+}
+
+nav ul li a {
+    text-decoration: none; /* Entfernt die Unterstreichung */
+    color: var(--secondary-font-color); /* Setzt die Schriftfarbe */
+    font-weight: bold; /* Macht den Text fett */
+}
+
+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 */
+    border: 1px solid var(--secondary-color);
+    border-radius: var(--box-border-radius);
+}
+
+footer {
+    height: var(--footer-height);
+    background-color: var(--primary-color);
+    border: 1px solid var(--secondary-color);
+    border-radius: var(--box-border-radius);
+    color: var(--secondary-font-color);
+    margin: 16px;
+    padding: 10px;  
+}