Folgend finden Sie einige Hinweise zur Anpassung des Payment-Widget von Adyen per CSS über die Widgetkonfigurationen in go~mus.

Ein Blick in den Quellcode des Payment-Widget gibt Rückschlüsse, welche Elemente es gibt und wie diese angesprochen werden können.

Container

.container {
  background-image: url("https://tickets.olympiastadion.berlin/assets/images/logo.png");
  background-repeat: no-repeat;
  background-position: 15px 50px;
  background-size: 100px 100px;
  padding-top: 150px;
}

Body

Hintergrundfarbe

body {
  background-color: #FFFFFF !important;
}

Textfarbe

* {
  color: #000000 !important;
}

Buttonfarbe

a, .btn {
  background: #0000d5 !important;
  color: #FFFFFF !important;
}

tr.active, tr.active td {
  background: #666 !important;
}

.tab-content {
  background: #666 !important;
  border-color: #666 !important;
}

.tab-content form input,
.adyen-checkout__input-wrapper *,{
  color: #000 !important;
}

Checkout Button

.adyen-checkout__button.adyen-checkout__button--pay{
  background: #FFFFFF !important;
}

Aktives Navigationselement

.nav-item.active .nav-link {
  background: #666 !important;
  color: #fff !important;
  border-color: #666 !important;
}

.nav > li.active {
  background: #666 !important;
}

Button für “Kostenpflichtig bestellen” bzw. Fortsetzen zu externer Bezahlmethode

.adyen-checkout__button.adyen-checkout__button--pay {
    background-color: #FFFFFF;
    font-weight: bold
}

.nav-tabs {
  border-color: #666 !important; 
}