diff --git a/blocks/cookie-consent/consent-banner.js b/blocks/cookie-consent/consent-banner.js
index 22265342..f51039f3 100644
--- a/blocks/cookie-consent/consent-banner.js
+++ b/blocks/cookie-consent/consent-banner.js
@@ -1,22 +1,11 @@
import {
fetchPlaceholders,
- decorateIcons,
} from '../../scripts/aem.js';
import { loadFragment } from '../fragment/fragment.js';
import { buildAndShowDialog } from './consent-dialog.js';
const BASE_CONSENT_PATH = '/block-collection/cookie-consent';
-function addCloseButton(banner) {
- const closeButton = document.createElement('button');
- closeButton.classList.add('close-button');
- closeButton.setAttribute('aria-label', 'Close');
- closeButton.type = 'button';
- closeButton.innerHTML = '';
- closeButton.addEventListener('click', () => (banner.close ? banner.close() : banner.remove()));
- banner.append(closeButton);
- decorateIcons(closeButton);
-}
function addListeners(bannerDiv, consentUpdateCallback, arrayCategories, categoriesSections) {
const acceptAll = bannerDiv.querySelector('.consent.banner .accept');
@@ -94,7 +83,7 @@ function createBanner(bannerSection) {
div.append(...content);
const acceptAllButton = ``;
const rejectAllButton = ``;
- const moreInfoLink = `${placeholders.moreInformation || 'More Information'}`;
+ const moreInfoLink = ` ${placeholders.moreInformation || 'More Information'}`;
if (buttonsArray.includes('more_info')) {
div.querySelector('p').append(document.createRange().createContextualFragment(moreInfoLink));
}
@@ -106,7 +95,6 @@ function createBanner(bannerSection) {
div.append(buttonsDiv);
}
- addCloseButton(div);
return div;
}
diff --git a/blocks/cookie-consent/cookie-consent.css b/blocks/cookie-consent/cookie-consent.css
index 66ad2dab..0b9d13d2 100644
--- a/blocks/cookie-consent/cookie-consent.css
+++ b/blocks/cookie-consent/cookie-consent.css
@@ -1,40 +1,36 @@
-.consent {
- font-size: var(--body-font-size-s);
-}
-
-.consent .consent-button {
- font-size: var(--body-font-size-s);
- margin: 0;
-}
-
-.consent .close-button {
- position: absolute;
- top: 0;
- right: 0;
- width: 20px;
- height: 100%;
- max-height: 54px;
- border-radius: 0 var(--dialog-border-radius) 0 0;
- background-color: unset;
- text-overflow: clip;
- margin: 0;
- border: none;
- padding-right: 30px;
- padding-left: 0;
+:root {
+ --consent-banner-background-color: #202124;
+ --consent-banner-font-size-s: 12px;
+ --consent-banner-font-size-l: 14px;
+ --consent-banner-text-color: #eee;
+ --consent-banner-link-color: var(--link-color);
}
.consent.banner {
+ font-size: var(--consent-banner-font-size-s);
+ color: var(--consent-banner-text-color);
+ background-color: var(--consent-banner-background-color);
position: fixed;
bottom: 0;
- width: 100%;
- text-align: center;
- background-color: rgb(180 176 176 / 95%);
- z-index: 10;
- padding: 10px 0;
+ left: 0;
+ padding: 8px 16px;
display: flex;
align-items: center;
- justify-content: center;
+ text-align: left;
+ justify-content: left;
flex-flow: row wrap;
+ margin: 16px;
+ border-radius: 4px;
+ box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
+ flex-wrap: wrap;
+}
+
+@media (width >= 600px) {
+ .consent.banner {
+ font-size: var(--consent-banner-font-size-l);
+ text-align: center;
+ justify-content: center;
+ }
}
.consent.banner .default-content-wrapper {
@@ -48,6 +44,7 @@
}
.consent.banner .consent-button {
+ font-size: var(--consent-banner-font-size);
padding: 5px;
margin: 5px;
border: none;
@@ -56,18 +53,19 @@
}
.consent.banner .consent-button.primary {
- color: var(--link-color);
+ color: var(--consent-banner-link-color);
}
.consent.banner .consent-button.secondary {
- color: var(--light-color);
+ color: var(--consent-banner-link-color);
}
.consent.banner .more-info {
- color: var(--link-color);
+ color: var(--consent-banner-link-color);
}
.consent dialog {
+ font-size: var(--body-font-size-s);
overscroll-behavior: none;
padding: 30px;
border: 1px solid #ccc;
@@ -77,6 +75,29 @@
width: clamp(300px, 80%, 700px);
}
+/* stylelint-disable-next-line no-descending-specificity */
+.consent dialog .consent-button {
+ font-size: var(--body-font-size-s);
+ margin: 0;
+}
+
+.consent dialog .close-button {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 20px;
+ height: 100%;
+ max-height: 54px;
+ border-radius: 0 var(--dialog-border-radius) 0 0;
+ background-color: unset;
+ text-overflow: clip;
+ margin: 0;
+ border: none;
+ padding-right: 30px;
+ padding-left: 0;
+}
+
+
.consent dialog::backdrop {
background-color: rgb(0 0 0 / 50%);
}