Streamline form field colors

web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_forms.scss

@@ -30,7 +30,8 @@
         flex-wrap: wrap;
         align-items: center;
         justify-content: space-between;
-        background-color: $color-divider;
+        background-color: $color-brand-light;
+        color: white;
         border-radius: 8px;
     }
 
@@ -65,12 +66,13 @@
 }
 
 .form__field {
+    @include nooutline;
     border: none;
     border-radius: 8px;
     width: 100%;
     padding: 8px 16px;
-    color: $color-font-main;
-    background-color: $color-divider;
+    color: white;
+    background-color: $color-brand-light;
 
     .form--box & {
         background-color: $color-brand-light;
@@ -172,33 +174,33 @@
 }
 
 ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
-    color: $color-font-main;
+    color: white;
     text-transform: uppercase;
     font-size: 90%;
 }
 
 :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-    color: $color-font-main;
+    color: white;
     opacity: 1;
     text-transform: uppercase;
     font-size: 90%;
 }
 
 ::-moz-placeholder { /* Mozilla Firefox 19+ */
-    color: $color-font-main;
+    color: white;
     opacity: 1;
     text-transform: uppercase;
     font-size: 90%;
 }
 
 :-ms-input-placeholder { /* Internet Explorer 10-11 */
-    color: $color-font-main;
+    color: white;
     text-transform: uppercase;
     font-size: 90%;
 }
 
 ::-ms-input-placeholder { /* Microsoft Edge */
-    color: $color-font-main;
+    color: white;
     text-transform: uppercase;
     font-size: 90%;
 }

web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_mixins.scss

@@ -6,6 +6,16 @@
   padding: 0 $padding;
 }
 
+@mixin nooutline() {
+  outline: none;
+
+  &:focus,
+  &:active,
+  &:visited {
+    outline: none;
+  }
+}
+
 @mixin sectionColours() {
   &.section-incentives {
     color: $color-incentives;