src/app/converter-selector/converter-selector.component.html

@@ -1,9 +1,9 @@
-<div [ngClass]="{select_wrapper: true, error: step.error}">
+<div [ngClass]="{selectwrapper: true, error: step.error}">
   <div class="arrow_box">
-    <select (change)="convert($event)">
+    <select class="select" (change)="convert($event)">
       <option id="undefined">Select conversion ...</option>
       @for (c of converters; track c.getId()) {
-        <option id="{{c.getId()}}">{{ c.getDisplayname() }}</option>
+        <option class="option" id="{{c.getId()}}">{{ c.getDisplayname() }}</option>
       }
     </select>
   </div>

src/app/converter-selector/converter-selector.component.scss

@@ -1,84 +1,74 @@
-.select_wrapper {
+.selectwrapper {
   margin: 0 0 1em 0;
   padding: 0;
   text-align: center;
-
   &.error {
     > .arrow_box {
       border-color: red;
-
       &:before {
         border-top-color: red;
       }
     }
-
     select {
       color: red;
-      transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
     }
   }
 }
 
-select {
+.select {
-  background-color: #222;
+  background-color: #fff;
   border: none;
-  color: #eee;
+  color: #000;
   font-family: "ABeeZee", sans-serif;
   margin: 0;
   padding: 0.5em;
-  transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
-
-  &:focus, &:hover {
-    background-color: #333;
-    color: #fff;
-  }
 }
 
 .arrow_box {
-  border: 1px solid #888;
   position: relative;
-  transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
+  background: #fff;
-
+  border: 1px solid #aaa;
+  &:focus {
+    border-color: #888;
+  }
+  &:hover {
+    border-color: #333;
+  }
   &:after, &:before {
+    top: 100%;
+    left: 50%;
     border: solid transparent;
     content: " ";
     height: 0;
-    left: 50%;
-    pointer-events: none;
-    position: absolute;
-    top: 100%;
-    transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
     width: 0;
+    position: absolute;
+    pointer-events: none;
   }
-
   &:after {
     border-color: rgba(255, 255, 255, 0);
-    border-top-color: #222;
+    border-top-color: #fff;
     border-width: 1em;
     margin-left: -1em;
   }
-
   &:before {
-    border-top-color: #888;
+    border-color: rgba(170, 170, 170, 0);
+    border-top-color: #aaa;
     border-width: calc(1em + 1px);
     margin-left: calc(-1em - 1px);
   }
-
+  &:focus:before {
-  &:has(>select:focus, >select:hover) {
+    border-color: rgba(136, 136, 136, 0);
-    &:after {
+    border-top-color: #888;
+  }
+  &:hover:before {
+    border-color: rgba(51, 51, 51, 0);
     border-top-color: #333;
   }
-
+  .selectwrapper > & {
-    &:before {
-      border-top-color: #bbb;
-    }
-  }
-
-  &:hover {
-    border-color: #bbb;
-  }
-
-  .select_wrapper > & {
     display: inline-block;
   }
 }
+
+.option {
+  /*    font-family: "ABeeZee", sans-serif;*/
+}

src/app/text-input-field/text-input-field.component.html

@@ -1,2 +1,4 @@
-<textarea (keyup)="update(step)" placeholder="Please enter your input ..."
+<div class="textwrapper arrow_box">
-          [(ngModel)]="step.content">{{ step.content }}</textarea>
+    <textarea class="textinput" (keyup)="update(step)" placeholder="Please enter your input ..."
+              [(ngModel)]="step.content">{{step.content}}</textarea>
+</div>

src/app/text-input-field/text-input-field.component.scss

@@ -1,65 +1,69 @@
-:host {
+.textwrapper {
-  border: 1px solid #888;
-  display: block;
   margin: 0 0 1em 0;
   padding: 0 1em 0 0;
-  position: relative;
+}
-  transition: border ease-in-out 200ms;
 
+.arrow_box {
+  position: relative;
+  background: #fff;
+  border: 1px solid #aaa;
+  &:focus {
+    border-color: #888;
+  }
+  &:hover {
+    border-color: #333;
+  }
   &:after, &:before {
+    top: 100%;
+    left: 50%;
     border: solid transparent;
     content: " ";
     height: 0;
-    left: 50%;
-    pointer-events: none;
-    position: absolute;
-    top: 100%;
-    transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
     width: 0;
+    position: absolute;
+    pointer-events: none;
   }
-
   &:after {
-    border-top-color: #222;
+    border-color: rgba(255, 255, 255, 0);
+    border-top-color: #fff;
     border-width: 1em;
     margin-left: -1em;
   }
-
   &:before {
-    border-top-color: #888;
+    border-color: rgba(170, 170, 170, 0);
+    border-top-color: #aaa;
     border-width: calc(1em + 1px);
     margin-left: calc(-1em - 1px);
   }
-
+  &:focus:before {
-  &:has(>textarea:focus, >textarea:hover) {
+    border-color: rgba(136, 136, 136, 0);
-    &:after {
+    border-top-color: #888;
+  }
+  &:hover:before {
+    border-color: rgba(51, 51, 51, 0);
     border-top-color: #333;
   }
-
-    &:before {
-      border-top-color: #bbb;
-    }
-  }
-
-  &:hover {
-    border-color: #bbb;
-  }
 }
 
-textarea {
+.textinput {
-  background-color: #222;
+  background-color: #fff;
   border: none;
-  color: #ddd;
+  color: #000;
-  font-family: "Liberation Mono", monospace;
+  font-family: "Free Monospaced", monospace;
   height: 10em;
   margin: 0;
   padding: 0.5em;
   resize: vertical;
-  transition: background-color ease-in-out 200ms, border-color ease-in-out 200ms, color ease-in-out 200ms;
   width: 100%;
-
+  &:focus {
-  &:focus, &:hover {
+    border-color: #888;
-    background-color: #333;
+  }
-    border-color: #bbb;
+  &:hover {
-    color: #fff;
+    border-color: #333;
   }
 }
+
+.errormessage {
+  color: red;
+  text-align: center;
+}

src/styles.scss

@@ -21,16 +21,9 @@
   font-style: normal;
 }
 
-@font-face {
-  font-family: "Liberation Mono";
-  src: url("assets/fonts/liberationmono-regular.ttf") format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-
 body {
-  background-color: #222;
+  background-color: white;
-  color: #eee;
+  color: black;
   font-family: "ABeeZee", sans-serif;
   margin: 0;
   padding: 1em 0 0 0;