Ein heitliche Styles eingefügt

frontend_angular/wbs-rechner-angular/src/app/headerbox/headerbox.component.css

@@ -2,7 +2,7 @@
   border: 1px solid var(--highlight-color);
   padding: 0px;
   margin: 0px;
-  margin-top: 10px;
+  margin-top: 30px;
   position: relative;
 }
 
@@ -10,6 +10,7 @@
   display: flex;
   background-color: var(--highlight-color);
   padding: 2px;
+  color: var(--background-color);
 }
 
 .toolbar {

frontend_angular/wbs-rechner-angular/src/styles.css

@@ -1,11 +1,12 @@
+
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 
 /** Main Colors **/
 :root {
   --background-color: white;
   --main-color: black;
-  --highlight-color: #006dfc;
-  --light-highlight-color: #cfcfcf;
+  --highlight-color: #576fcb;
+  --error-color: #d73741;
 }
 
 input, select {
@@ -21,6 +22,7 @@ body {
   font-family: "Roboto", sans-serif;
   font-weight: 400;
   font-style: normal;
+  font-size: 18px;
   max-width:710px;
   margin: auto;
 }
@@ -29,7 +31,6 @@ h2 {
   margin: 0px;
 }
 
-
 .label-container {
   display: flex;
   align-items: center;
@@ -44,19 +45,19 @@ h2 {
 .label-container label {
   width: 400px;
   text-align: left;
-  background-color: var(--light-highlight-color);
-
-  border-bottom: 1px solid var(--light-highlight-color);
   padding: 3px;
   font-weight: bold;
 }
 
 .label-container span, input, select, a {
+  font-size: 18px;
   text-align: right;
   width: 300px;
   padding: 3px;
   border: none;
-  border-bottom: 1px solid var(--light-highlight-color);
+  border: 1px solid var(--main-color);
+  height: 100%;
+  padding: 1px;
 }
 
 
@@ -81,24 +82,28 @@ input[type="checkbox"]:checked {
 }
 
 .calculateButton {
-  min-width: 400px;
+  min-width: 98%;
   font-weight: bolder;
   border: 2px solid black;
   cursor: pointer;
-  font-size: 15px;
+  font-size: 20px;
   margin: 3px;
   background-color: var(--highlight-color);
+  color: var(--background-color);
+  text-align: left;
 }
 
-.plus-button:hover {
-  color: var(--light-highlight-color);
-}
 
 .delete-button {
-  color: red;
+  color: var(--error-color);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  font-weight: bolder;
+  font-size: 18px;
 }
 
-.plus-button:hover {
+.delete-button:hover {
   color: darkred;
 }
 
@@ -107,14 +112,17 @@ input[type="checkbox"]:checked {
 
   .label-container label {
     width: 49%;
+    word-wrap: break-word;
   }
 
-  .calculateButton {
+  .label-container span, input, select, a {
     width: 49%;
   }
 
-  .label-container span, input, select, a {
-    width: 49%;
+  .calculateButton {
+    min-width: 98%;
   }
+
+
 }
 

frontend_react/wbs-rechner-react/src/App.css

@@ -1,12 +1,12 @@
+
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 
 /** Main Colors **/
 :root {
   --background-color: white;
   --main-color: black;
-  --highlight-color: hsl(214, 56%, 61%);
-  --light-highlight-color: #d6d6d6;
-
+  --highlight-color: #576fcb;
+  --error-color: #d73741;
 }
 
 input, select {
@@ -22,6 +22,7 @@ body {
   font-family: "Roboto", sans-serif;
   font-weight: 400;
   font-style: normal;
+  font-size: 18px;
   max-width:710px;
   margin: auto;
 }
@@ -44,20 +45,19 @@ h2 {
 .label-container label {
   width: 400px;
   text-align: left;
-  background-color: var(--light-highlight-color);
-
-  border-bottom: 1px solid var(--light-highlight-color);
   padding: 3px;
   font-weight: bold;
 }
 
 .label-container span, input, select, a {
+  font-size: 18px;
   text-align: right;
   width: 300px;
   padding: 3px;
   border: none;
-  border-bottom: 1px solid var(--light-highlight-color);
-  align-self: flex-end;
+  border: 1px solid var(--main-color);
+  height: 100%;
+  padding: 1px;
 }
 
 
@@ -82,21 +82,25 @@ input[type="checkbox"]:checked {
 }
 
 .calculateButton {
-  min-width: 400px;
+  min-width: 98%;
   font-weight: bolder;
   border: 2px solid black;
   cursor: pointer;
-  font-size: 15px;
+  font-size: 20px;
   margin: 3px;
   background-color: var(--highlight-color);
+  color: var(--background-color);
+  text-align: left;
 }
 
 
 .delete-button {
-  color: red;
+  color: var(--error-color);
   background-color: transparent;
   border: none;
   cursor: pointer;
+  font-weight: bolder;
+  font-size: 18px;
 }
 
 .delete-button:hover {
@@ -116,7 +120,7 @@ input[type="checkbox"]:checked {
   }
 
   .calculateButton {
-    min-width: 49%;
+    min-width: 98%;
   }
 
 

frontend_react/wbs-rechner-react/src/components/Headerbox.css

@@ -1,21 +1,21 @@
 .box {
-    border: 1px solid var(--highlight-color);
-    padding: 0px;
-    margin: 0px;
-    margin-top: 10px;
-    position: relative;
-  }
-  
-  .header {
-    display: flex;
-    background-color: var(--highlight-color);
-    padding: 2px;
-  }
-  
-  .toolbar {
-    display: flex;
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-  
+  border: 1px solid var(--highlight-color);
+  padding: 0px;
+  margin: 0px;
+  margin-top: 30px;
+  position: relative;
+}
+
+.header {
+  display: flex;
+  background-color: var(--highlight-color);
+  padding: 2px;
+  color: var(--background-color);
+}
+
+.toolbar {
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+}