diff --git a/app/static/css/application.css b/app/static/css/application.css index 1a71c15..17df88a 100644 --- a/app/static/css/application.css +++ b/app/static/css/application.css @@ -735,6 +735,7 @@ a:hover { --active-background: #f7f8f9; --bg-color: white; --dropin-color: #f7f8f9; + --dropin-tab-color: white; } .card-visited .card__back { @@ -775,6 +776,10 @@ a:hover { font-family: var(--font-options) !important; border-radius: var(--body-edges) !important; border: var(--border-off) !important; + background: var(--dropin-tab-color) !important; +} + +.adyen-checkout__payment-method--selected { background: var(--dropin-color) !important; } diff --git a/app/static/js/adyen-implementation.js b/app/static/js/adyen-implementation.js index 518ba3e..25d66d9 100644 --- a/app/static/js/adyen-implementation.js +++ b/app/static/js/adyen-implementation.js @@ -540,6 +540,11 @@ function dropinColor() { r.style.setProperty('--dropin-color', dropinColor); } +function dropinTabColor() { + let dropinTabColor = document.getElementById("dropinTabColorPick").value; + r.style.setProperty('--dropin-tab-color', dropinTabColor); +} + function buttonEdges () { let edgeValue = document.getElementById('buttonEdges').value let pixelVal = edgeValue + 'px' @@ -569,6 +574,10 @@ function resetDynamicCSS () { r.style.setProperty('--dropin-width', null); r.style.setProperty('--body-edges', null); r.style.setProperty('--button-edges', null); + r.style.setProperty('--bg-color', null); + r.style.setProperty('--dropin-color', null); + r.style.setProperty('--dropin-tab-color', null); + r.style.setProperty('--dropin-font', null) } function dropinWidth () { diff --git a/app/templates/component.html b/app/templates/component.html index 4367c4e..739eaf1 100644 --- a/app/templates/component.html +++ b/app/templates/component.html @@ -143,10 +143,18 @@ Dropin background colour: +