From 6d020a7f7bfdbe62b1cdf68537fbc176bfb7377e Mon Sep 17 00:00:00 2001
From: Jonas Thelemann <e-mail@jonas-thelemann.de>
Date: Sun, 29 Jan 2023 23:40:29 +0100
Subject: [PATCH 1/2] chore: format files

---
 playground/nuxt.config.ts |   2 +-
 src/runtime/styles.css    | 123 +++++++++++++++++++++++++++-----------
 2 files changed, 88 insertions(+), 37 deletions(-)

diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index c8a017bd..3948990b 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -3,7 +3,6 @@ export default defineNuxtConfig({
     [
       '@dargmuesli/nuxt-cookie-control',
       {
-        locales: ['en', 'de'],
         cookies: {
           necessary: [
             {
@@ -26,6 +25,7 @@ export default defineNuxtConfig({
             },
           ],
         },
+        locales: ['en', 'de'],
       },
     ],
   ],
diff --git a/src/runtime/styles.css b/src/runtime/styles.css
index 587857cd..0904cdf6 100644
--- a/src/runtime/styles.css
+++ b/src/runtime/styles.css
@@ -1,7 +1,9 @@
-.cookieControl__Modal-enter-active, .cookieControl__Modal-leave-active {
+.cookieControl__Modal-enter-active,
+.cookieControl__Modal-leave-active {
   transition: opacity 0.25s;
 }
-.cookieControl__Modal-enter, .cookieControl__Modal-leave-to {
+.cookieControl__Modal-enter,
+.cookieControl__Modal-leave-to {
   opacity: 0;
 }
 .cookieControl__Bar--center {
@@ -9,16 +11,40 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.cookieControl__Bar--center-enter-active, .cookieControl__Bar--top-left-enter-active, .cookieControl__Bar--top-full-enter-active, .cookieControl__Bar--top-right-enter-active, .cookieControl__Bar--bottom-left-enter-active, .cookieControl__Bar--bottom-full-enter-active, .cookieControl__Bar--bottom-right-enter-active, .cookieControl__Bar--center-leave-active, .cookieControl__Bar--top-left-leave-active, .cookieControl__Bar--top-full-leave-active, .cookieControl__Bar--top-right-leave-active, .cookieControl__Bar--bottom-left-leave-active, .cookieControl__Bar--bottom-full-leave-active, .cookieControl__Bar--bottom-right-leave-active {
+.cookieControl__Bar--center-enter-active,
+.cookieControl__Bar--top-left-enter-active,
+.cookieControl__Bar--top-full-enter-active,
+.cookieControl__Bar--top-right-enter-active,
+.cookieControl__Bar--bottom-left-enter-active,
+.cookieControl__Bar--bottom-full-enter-active,
+.cookieControl__Bar--bottom-right-enter-active,
+.cookieControl__Bar--center-leave-active,
+.cookieControl__Bar--top-left-leave-active,
+.cookieControl__Bar--top-full-leave-active,
+.cookieControl__Bar--top-right-leave-active,
+.cookieControl__Bar--bottom-left-leave-active,
+.cookieControl__Bar--bottom-full-leave-active,
+.cookieControl__Bar--bottom-right-leave-active {
   transition: transform 0.25s;
 }
-.cookieControl__Bar--top-left-enter, .cookieControl__Bar--top-full-enter, .cookieControl__Bar--top-right-enter, .cookieControl__Bar--top-left-leave-to, .cookieControl__Bar--top-full-leave-to, .cookieControl__Bar--top-right-leave-to {
+.cookieControl__Bar--top-left-enter,
+.cookieControl__Bar--top-full-enter,
+.cookieControl__Bar--top-right-enter,
+.cookieControl__Bar--top-left-leave-to,
+.cookieControl__Bar--top-full-leave-to,
+.cookieControl__Bar--top-right-leave-to {
   transform: translateY(-100%);
 }
-.cookieControl__Bar--bottom-left-enter, .cookieControl__Bar--bottom-full-enter, .cookieControl__Bar--bottom-right-enter, .cookieControl__Bar--bottom-left-leave-to, .cookieControl__Bar--bottom-right-leave-to, .cookieControl__Bar--bottom-full-leave-to {
+.cookieControl__Bar--bottom-left-enter,
+.cookieControl__Bar--bottom-full-enter,
+.cookieControl__Bar--bottom-right-enter,
+.cookieControl__Bar--bottom-left-leave-to,
+.cookieControl__Bar--bottom-right-leave-to,
+.cookieControl__Bar--bottom-full-leave-to {
   transform: translateY(100%);
 }
-.cookieControl__Bar--center-enter, .cookieControl__Bar--center-leave-to {
+.cookieControl__Bar--center-enter,
+.cookieControl__Bar--center-leave-to {
   transform: translate(-50%, -50%) scale(0.95);
 }
 .cookieControl {
@@ -37,9 +63,10 @@
 .cookieControl__Bar {
   position: fixed;
   background-color: var(--cookie-control-barBackground);
-  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 }
-.cookieControl__Bar h3, .cookieControl__Bar p {
+.cookieControl__Bar h3,
+.cookieControl__Bar p {
   color: var(--cookie-control-barTextColor);
   max-width: 900px;
 }
@@ -68,7 +95,8 @@
   align-items: flex-end;
   justify-content: space-between;
 }
-.cookieControl__Bar--top-full, .cookieControl__Bar--bottom-full {
+.cookieControl__Bar--top-full,
+.cookieControl__Bar--bottom-full {
   left: 0;
   right: 0;
 }
@@ -78,25 +106,41 @@
 .cookieControl__Bar--bottom-full {
   bottom: 0;
 }
-.cookieControl__Bar--center p, .cookieControl__Bar--top-left p, .cookieControl__Bar--top-right p, .cookieControl__Bar--bottom-left p, .cookieControl__Bar--bottom-right p {
+.cookieControl__Bar--center p,
+.cookieControl__Bar--top-left p,
+.cookieControl__Bar--top-right p,
+.cookieControl__Bar--bottom-left p,
+.cookieControl__Bar--bottom-right p {
   max-width: 400px;
 }
-.cookieControl__Bar--center .cookieControl__BarContainer, .cookieControl__Bar--top-left .cookieControl__BarContainer, .cookieControl__Bar--top-right .cookieControl__BarContainer, .cookieControl__Bar--bottom-left .cookieControl__BarContainer, .cookieControl__Bar--bottom-right .cookieControl__BarContainer {
+.cookieControl__Bar--center .cookieControl__BarContainer,
+.cookieControl__Bar--top-left .cookieControl__BarContainer,
+.cookieControl__Bar--top-right .cookieControl__BarContainer,
+.cookieControl__Bar--bottom-left .cookieControl__BarContainer,
+.cookieControl__Bar--bottom-right .cookieControl__BarContainer {
   flex-direction: column;
 }
-.cookieControl__Bar--center .cookieControl__BarButtons, .cookieControl__Bar--top-left .cookieControl__BarButtons, .cookieControl__Bar--top-right .cookieControl__BarButtons, .cookieControl__Bar--bottom-left .cookieControl__BarButtons, .cookieControl__Bar--bottom-right .cookieControl__BarButtons {
+.cookieControl__Bar--center .cookieControl__BarButtons,
+.cookieControl__Bar--top-left .cookieControl__BarButtons,
+.cookieControl__Bar--top-right .cookieControl__BarButtons,
+.cookieControl__Bar--bottom-left .cookieControl__BarButtons,
+.cookieControl__Bar--bottom-right .cookieControl__BarButtons {
   margin-top: 20px;
 }
-.cookieControl__Bar--top-left, .cookieControl__Bar--top-right {
+.cookieControl__Bar--top-left,
+.cookieControl__Bar--top-right {
   top: 20px;
 }
-.cookieControl__Bar--bottom-left, .cookieControl__Bar--bottom-right {
+.cookieControl__Bar--bottom-left,
+.cookieControl__Bar--bottom-right {
   bottom: 20px;
 }
-.cookieControl__Bar--top-left, .cookieControl__Bar--bottom-left {
+.cookieControl__Bar--top-left,
+.cookieControl__Bar--bottom-left {
   left: 20px;
 }
-.cookieControl__Bar--top-right, .cookieControl__Bar--bottom-right {
+.cookieControl__Bar--top-right,
+.cookieControl__Bar--bottom-right {
   right: 20px;
 }
 .cookieControl__BarButtons {
@@ -113,14 +157,14 @@
   text-align: center;
 }
 .cookieControl__Modal:before {
-  content: "";
+  content: '';
   min-height: 100vh;
   display: inline-block;
   vertical-align: middle;
 }
 .cookieControl__Modal:after {
   position: absolute;
-  content: "";
+  content: '';
   top: 0;
   left: 0;
   right: 0;
@@ -211,7 +255,7 @@
 }
 .cookieControl__ModalContent label:before {
   position: absolute;
-  content: "";
+  content: '';
   top: 50%;
   left: 3px;
   width: 15px;
@@ -259,24 +303,30 @@
   padding: 20px;
   border: 2px solid #ddd;
 }
-.cookieControl__BlockedIframe p, .cookieControl__BlockedIframe a {
-  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+.cookieControl__BlockedIframe p,
+.cookieControl__BlockedIframe a {
+  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 }
 @media screen and (max-width: 768px) {
   .cookieControl__Bar {
     flex-direction: column;
     left: 0;
     right: 0;
- }
-  .cookieControl__Bar p, .cookieControl__Bar h3 {
+  }
+  .cookieControl__Bar p,
+  .cookieControl__Bar h3 {
     max-width: 100%;
- }
-  .cookieControl__Bar--top-full, .cookieControl__Bar--top-left, .cookieControl__Bar--top-right {
+  }
+  .cookieControl__Bar--top-full,
+  .cookieControl__Bar--top-left,
+  .cookieControl__Bar--top-right {
     top: 0;
- }
-  .cookieControl__Bar--bottom-full, .cookieControl__Bar--bottom-left, .cookieControl__Bar--bottom-right {
+  }
+  .cookieControl__Bar--bottom-full,
+  .cookieControl__Bar--bottom-left,
+  .cookieControl__Bar--bottom-right {
     bottom: 0;
- }
+  }
   .cookieControl__ModalContent {
     position: absolute;
     top: 0;
@@ -286,28 +336,29 @@
     max-width: none;
     max-height: 100%;
     padding: 80px 20px 20px;
- }
+  }
   .cookieControl__BarButtons {
     width: 100%;
     margin-top: 20px;
     flex-direction: column;
     justify-content: center;
- }
+  }
   .cookieControl__BarButtons button {
     width: 100%;
- }
+  }
   .cookieControl__BarButtons button + button {
     margin: 10px 0 0;
- }
-  .cookieControl__BarContainer, .cookieControl__ModalButtons {
+  }
+  .cookieControl__BarContainer,
+  .cookieControl__ModalButtons {
     flex-direction: column;
- }
+  }
   .cookieControl__ModalButtons button {
     width: 100%;
- }
+  }
   .cookieControl__ModalButtons button + button {
     margin: 10px 0 0;
- }
+  }
 }
 .cookieControl__ControlButton {
   position: fixed;

From 1f6138328811c8c3e28dcf45734b8c6839b1e408 Mon Sep 17 00:00:00 2001
From: Jonas Thelemann <e-mail@jonas-thelemann.de>
Date: Sun, 29 Jan 2023 23:41:27 +0100
Subject: [PATCH 2/2] docs(playground): add color override

---
 playground/nuxt.config.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 3948990b..aaf3be1a 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -3,6 +3,9 @@ export default defineNuxtConfig({
     [
       '@dargmuesli/nuxt-cookie-control',
       {
+        colors: {
+          checkboxActiveBackground: '#00A34A', // text-green-600
+        },
         cookies: {
           necessary: [
             {