Updated CSS cusomisation

src/main/resources/static/css/cookieconsentCustomisation.css

@@ -1,5 +1,5 @@
 .cc--darkmode{
-    --cc-bg: var(--md-sys-color-surface);
+    --cc-bg: var(--md-sys-color-inverse-on-surface);
     --cc-primary-color: var(--md-sys-color-on-surface);
     --cc-secondary-color: var(--md-sys-color-on-surface);
 
@@ -16,31 +16,32 @@
     --cc-btn-secondary-hover-bg:var(--md-sys-color-secondary);
     --cc-btn-secondary-hover-color: var(--cc-bg);
     --cc-btn-secondary-hover-border-color: var(--md-sys-color-secondary);
-/*
+
-    --cc-separator-border-color: #222a30;
+    --cc-separator-border-color: var(--md-sys-color-outline);
 
     --cc-toggle-on-bg: var(--cc-btn-primary-bg);
-    --cc-toggle-off-bg: #525f6b;
+    --cc-toggle-off-bg: var(--md-sys-color-outline);
     --cc-toggle-on-knob-bg: var(--cc-btn-primary-color);
     --cc-toggle-off-knob-bg: var(--cc-btn-primary-color);
 
     --cc-toggle-enabled-icon-color: var(--cc-btn-primary-color);   
     --cc-toggle-disabled-icon-color: var(--cc-btn-primary-color);  
 
-    --cc-toggle-readonly-bg: #343e45;
+    --cc-toggle-readonly-bg: var(--md-sys-color-surface);
-    --cc-toggle-readonly-knob-bg: #5f6b72;
+    --cc-toggle-readonly-knob-bg: var(--md-sys-color-outline);
     --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg);
 
-    --cc-section-category-border: #1e2428;
+    --cc-section-category-border: var(--md-sys-color-outline);
 
-    --cc-cookie-category-block-bg: #1e2428;
+    --cc-cookie-category-block-bg: var(--cc-btn-secondary-bg);
-    --cc-cookie-category-block-border: var(--cc-section-category-border);
+    --cc-cookie-category-block-border: var(--cc-btn-secondary-bg); 
-    --cc-cookie-category-block-hover-bg: #242c31;
+    --cc-cookie-category-block-hover-bg: var(--cc-btn-secondary-bg);
-    --cc-cookie-category-block-hover-border: #232a2f;
+    --cc-cookie-category-block-hover-border: var(--cc-btn-secondary-bg);
-    --cc-cookie-category-expanded-block-bg: transparent;
+    
+    --cc-cookie-category-expanded-block-bg: var(--cc-btn-secondary-bg);
     --cc-cookie-category-expanded-block-hover-bg: var(--cc-toggle-readonly-bg);
 
-    --cc-overlay-bg: rgba(0, 0, 0, 0.65);
+  /*  --cc-overlay-bg: rgba(0, 0, 0, 0.65);
     --cc-webkit-scrollbar-bg: var(--cc-section-category-border);
     --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg);
 */
@@ -48,3 +49,31 @@
     --cc-footer-color: var(--cc-primary-color);
     --cc-footer-border-color: var(--cc-bg); 
 }
+.cm__body{
+    max-width: 90% !important;
+    flex-direction: row !important;
+    align-items: center !important;
+
+}
+
+.cm__desc{
+    max-width: 70rem !important;
+}
+
+.cm__btns{
+    flex-direction: row-reverse !important;
+    gap:10px !important;
+    padding-top: 3.4rem !important;
+}
+
+@media only screen and (max-width: 1400px) {
+    .cm__body{
+        max-width: 90% !important;
+        flex-direction: column !important;
+        align-items: normal !important;
+    }
+
+    .cm__btns{
+        padding-top: 1rem !important;
+    }
+}

src/main/resources/static/js/thirdParty/cookieconsent-config.js

@@ -7,16 +7,16 @@ document.documentElement.classList.add('cc--darkmode');
 CookieConsent.run({
     guiOptions: {
         consentModal: {
-            layout: "box",
+            layout: "bar",
-            position: "bottom left",
+            position: "bottom",
             equalWeightButtons: true,
-            flipButtons: false
+            flipButtons: true
         },
         preferencesModal: {
             layout: "box",
             position: "right",
             equalWeightButtons: true,
-            flipButtons: false
+            flipButtons: true
         }
     },
     categories: {