@el7ven/cookie-kit 0.2.15

package/dist/styles/index.css

@@ -0,0 +1,744 @@
+/**
+ * Cookie Consent Drawer — Default Theme
+ * Uses CSS custom properties for easy customization
+ */
+
+:root {
+  /* Colors */
+  --cc-primary: #0026aa;
+  --cc-primary-hover: #002699;
+  --cc-secondary: #0097d4;
+  --cc-secondary-hover: #0088bf;
+  --cc-surface-dark: #0D0B3D;
+  --cc-surface-dark2: #080826;
+  --cc-surface-black-t10: rgba(8, 8, 38, 0.1);
+  --cc-surface-gray: #1E1C52;
+
+  --cc-bg: #ffffff;
+  --cc-bg-secondary: #f8f9fa;
+  --cc-text: rgba(13, 11, 61, 1);
+  --cc-text-secondary: #666666;
+  --cc-text-subtle: rgba(13, 11, 61, 0.7);
+  --cc-border: #e0e0e0;
+  --cc-backdrop: rgba(0, 0, 0, 0.4);
+  --cc-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  --cc-toggle-bg: rgba(8, 8, 38, 0.25);
+  --cc-toggle-active: var(--cc-primary);
+
+  /* Layout */
+  --cc-border-radius: 48px;
+  --cc-border-radius-btn: 64px;
+  --cc-border-radius-toggle: 24px;
+  --cc-border-radius-pill: 4px;
+  --cc-max-width: 900px;
+  --cc-z-index: 10000;
+  --cc-padding: 48px;
+  --cc-padding-lg: 24px;
+  --cc-padding-sm: 16px;
+  --cc-padding-xs: 12px;
+  --cc-padding-btn: 24px 39px;
+  --cc-padding-btn-mobile: 16px 24px;
+  --cc-padding-tab: 12px 24px;
+  --cc-padding-close: 11px;
+  --cc-padding-close-mobile: 7px;
+  --cc-width-toggle: 48px;
+  --cc-width-toggle-small: 36px;
+  --cc-height-toggle: 24px;
+
+  /* Typography */
+  /*--cc-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;*/
+  --cc-font-size-sm: 14px;
+  --cc-line-height-sm: 20px;
+  --cc-font-size-lg: 16px;
+  --cc-line-height-lg: 24px;
+  --cc-font-size-btn: 16px;
+  --cc-line-height-btn: 22px;
+  --cc-font-size-title: 32px;
+  --cc-line-height-title: 44px;
+
+  /* Animation */
+  --cc-transition: 0.3s ease;
+  --cc-transition-fast: 0.2s ease;
+
+  /* Focus */
+  --cc-focus-color: #007bff;
+  --cc-focus-width: 2px;
+  --cc-focus-offset: 2px;
+}
+
+/* ============================================
+   Responsive Breakpoints
+   ============================================ */
+
+/* Desktop Large */
+@media (max-width: 1199px) {
+  :root {
+    --cc-border-radius: 32px;
+    --cc-padding: 32px;
+  }
+}
+
+/* Desktop Small */
+@media (max-width: 991px) {
+  :root {
+    --cc-border-radius: 24px;
+    --cc-padding: 24px;
+  }
+}
+
+/* Tablet */
+@media (max-width: 767px) {
+  :root {
+    --cc-font-size-title: 24px;
+    --cc-line-height-title: 28px;
+  }
+}
+
+/* Mobile */
+@media (max-width: 640px) {
+  :root {
+    --cc-border-radius: 16px;
+    --cc-padding: 16px;
+  }
+}
+
+/* ============================================
+   Dark Theme
+   ============================================ */
+
+[data-cookie-kit-theme="dark"],
+[data-cc-theme="dark"] {
+  --cc-primary: #4da3ff;
+  --cc-primary-hover: #2b8aff;
+  --cc-secondary: #8a9199;
+  --cc-secondary-hover: #6e767e;
+  --cc-bg: #1e1e2e;
+  --cc-bg-secondary: #2a2a3e;
+  --cc-text: #e0e0e0;
+  --cc-text-secondary: #a0a0b0;
+  --cc-border: #3a3a4e;
+  --cc-backdrop: rgba(0, 0, 0, 0.6);
+  --cc-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+  --cc-toggle-bg: #4a4a5e;
+}
+
+
+/* ============================================
+   Base Components
+   ============================================ */
+
+.cookie-consent {
+  position: relative;
+}
+
+.cookie-consent--has-modal {
+  min-height: 100vh;
+}
+
+/* ============================================
+   Drawer Layout
+   ============================================ */
+
+/* Backdrop */
+.cookie-drawer__backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--cc-backdrop);
+  z-index: var(--cc-z-index);
+}
+
+/* Hide backdrop for essential mode */
+.cookie-drawer--essential-mode .cookie-drawer__backdrop {
+  display: none;
+}
+
+/* Content wrapper */
+.cookie-drawer__content-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: calc(var(--cc-z-index) + 1);
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  padding: 24px;
+  pointer-events: none;
+  font-size: var(--cc-font-size-sm);
+  line-height: var(--cc-line-height-sm);
+}
+
+.cookie-drawer__content-wrapper.cookie-drawer--mobile {
+  align-items: flex-end;
+  justify-content: center;
+  padding: 0;
+}
+
+/* Essential mode - compact banner at bottom center */
+.cookie-drawer--essential-mode .cookie-drawer__content-wrapper {
+  align-items: flex-end;
+  justify-content: center;
+  padding: 20px;
+}
+
+/* ============================================
+   Drawer Content
+   ============================================ */
+
+.cookie-drawer__content {
+  background: var(--cc-bg);
+  border-radius: var(--cc-border-radius);
+  max-width: var(--cc-max-width);
+  width: 100%;
+  height: fit-content;
+  max-height: 100%;
+  overflow: hidden;
+  box-shadow: var(--cc-shadow);
+  display: flex;
+  flex-direction: column;
+  pointer-events: auto;
+}
+
+.cookie-drawer--mobile .cookie-drawer__content {
+  max-width: 100%;
+  height: 100%;
+  max-height: 85vh;
+  border-radius: var(--cc-border-radius) var(--cc-border-radius) 0 0;
+}
+
+/* Essential mode - compact content */
+.cookie-drawer--essential-mode .cookie-drawer__content {
+  max-width: 640px;
+  height: auto;
+  max-height: none;
+  border-radius: var(--cc-border-radius);
+}
+
+@media (max-width: 767px) {
+  .cookie-drawer__content {
+    max-width: 100%;
+    height: 100%;
+    max-height: 85vh;
+    border-radius: var(--cc-border-radius) var(--cc-border-radius) 0 0;
+  }
+
+  /* Essential mode stays compact on mobile */
+  .cookie-drawer--essential-mode .cookie-drawer__content {
+    height: auto;
+    max-height: none;
+    border-radius: var(--cc-border-radius);
+  }
+}
+
+/* Header */
+.cookie-drawer__header {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--cc-padding) var(--cc-padding) var(--cc-padding-sm);
+  border-bottom: 1px solid var(--cc-border);
+  flex-shrink: 0;
+}
+
+/* Essential mode - hide header border and reduce padding */
+.cookie-drawer--essential-mode .cookie-drawer__header {
+  border-bottom: none;
+  padding: var(--cc-padding-sm) var(--cc-padding) 0;
+}
+
+.cookie-drawer__title {
+  font-size: var(--cc-font-size-title);
+  color: var(--cc-text);
+  margin: 0;
+}
+
+.cookie-drawer__close,
+.cookie-drawer__close-btn {
+  display: flex;
+  background: none;
+  border: 1px solid var(--cc-border);
+  color: var(--cc-text);
+  cursor: pointer;
+  padding: var(--cc-padding-close);
+  border-radius: 50%;
+  transition: all var(--cc-transition-fast);
+}
+
+.cookie-drawer__close:hover,
+.cookie-drawer__close-btn:hover {
+  background: var(--cc-bg-secondary);
+  color: var(--cc-text);
+}
+
+/* Banner */
+.cookie-drawer__banner {
+  padding: var(--cc-padding-sm) var(--cc-padding) 12px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* Essential banner - compact styling */
+.cookie-drawer--essential-mode .cookie-drawer__banner {
+  padding: var(--cc-padding-sm) var(--cc-padding);
+}
+
+.cookie-drawer__essential {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.cookie-drawer__message--essential {
+  font-size: var(--cc-font-size-sm);
+  line-height: var(--cc-line-height-sm);
+  color: var(--cc-text);
+}
+
+.cookie-drawer__body {
+  padding: var(--cc-padding);
+  flex: 1;
+  overflow-y: auto;
+}
+
+.cookie-drawer__message {
+  color: var(--cc-text);
+  width: 100%;
+}
+
+.cookie-drawer__intro,
+.cookie-drawer__intro-text {
+  color: var(--cc-text-secondary);
+  margin-bottom: 16px;
+}
+
+.cookie-drawer__intro-title {
+  font-size: var(--cc-font-size-lg);
+  line-height: var(--cc-line-height-lg);
+  color: var(--cc-text);
+  margin-bottom: 12px;
+}
+
+/* Categories */
+.cookie-drawer__categories {
+  margin-bottom: 24px;
+}
+
+.cookie-drawer__category {
+  display: flex;
+  flex-direction: column;
+}
+
+.cookie-drawer__category-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--cc-padding-sm ) 0;
+  border-bottom: 1px solid var(--cc-border);
+}
+
+.cookie-drawer__category-info {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1;
+}
+
+.cookie-drawer__category-icon {
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.cookie-drawer__category-details {
+  flex: 1;
+}
+
+.cookie-drawer__category-name,
+.cookie-drawer__category-title {
+  font-size: var(--cc-font-size-lg);
+  line-height: var(--cc-line-height-lg);
+  margin: 0!important;
+}
+
+.cookie-drawer__category-description {
+  color: var(--cc-text);
+  font-size: var(--cc-font-size-sm);
+  line-height: var(--cc-line-height-sm);
+  margin-top: 24px;
+}
+
+.cookie-drawer__category-toggle {
+  position: relative;
+  width: var(--cc-width-toggle);
+  height: var(--cc-height-toggle);
+  background: var(--cc-toggle-bg);
+  border: none;
+  border-radius: var(--cc-border-radius-toggle);
+  cursor: pointer;
+  transition: var(--cc-transition);
+  flex-shrink: 0;
+}
+
+.cookie-drawer__category-toggle--active {
+  background: var(--cc-toggle-active);
+}
+
+.cookie-drawer__category-toggle--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.cookie-drawer__toggle-slider {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  left: 3px;
+  top: 3px;
+  background: white;
+  border-radius: 50%;
+  transition: var(--cc-transition);
+}
+
+.cookie-drawer__category-toggle--active .cookie-drawer__toggle-slider {
+  transform: translateX(24px);
+}
+
+/* Settings link */
+.cookie-drawer__settings-link {
+
+}
+
+.cookie-drawer__settings-button {
+  background: none;
+  border: none;
+  color: var(--cc-primary);
+  text-decoration: underline;
+  font-size: var(--cc-font-size-sm);
+  line-height: var(--cc-line-height-sm);
+  cursor: pointer;
+  padding: 0;
+}
+
+.cookie-drawer__settings-button:hover {
+  color: var(--cc-primary-hover);
+}
+
+/* Actions */
+.cookie-drawer__actions_essential {
+  display: flex;
+  justify-content: end;
+}
+
+.cookie-drawer__actions,
+.cookie-drawer__footer {
+  display: flex;
+  gap: 24px;
+  flex-shrink: 0;
+  padding: 12px var(--cc-padding) var(--cc-padding);
+}
+
+@media (max-width: 767px) {
+  .cookie-drawer__actions,
+  .cookie-drawer__footer {
+    flex-direction: column;
+    margin-top: 16px;
+  }
+  .cookie-drawer__close,
+  .cookie-drawer__close-btn {
+    padding: var(--cc-padding-close-mobile);
+  }
+}
+
+/* Buttons */
+.cookie-drawer__button,
+.cookie-drawer__btn {
+  padding: var(--cc-padding-btn);
+  border-radius: var(--cc-border-radius-btn);
+  font-size: var(--cc-font-size-btn);
+  line-height: var(--cc-line-height-btn);
+  cursor: pointer;
+  transition: all var(--cc-transition-fast);
+  border: 1px solid transparent;
+  flex: 1;
+  max-width: fit-content;
+}
+
+@media (max-width: 767px) {
+  .cookie-drawer__actions{
+    margin: 0;
+  }
+  .cookie-drawer__button,
+  .cookie-drawer__btn {
+    width: 100%;
+    max-width: unset;
+    margin: 0;
+    padding: var(--cc-padding-btn-mobile);
+  }
+}
+
+.cookie-drawer__button--primary,
+.cookie-drawer__btn--primary {
+  background: var(--cc-primary);
+  color: white;
+  border-color: var(--cc-primary);
+}
+
+.cookie-drawer__button--primary:hover:not(:disabled),
+.cookie-drawer__btn--primary:hover:not(:disabled) {
+  background: var(--cc-primary-hover);
+  border-color: var(--cc-primary-hover);
+  transform: translateY(-1px);
+}
+
+.cookie-drawer__button--primary:disabled,
+.cookie-drawer__btn--primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.cookie-drawer__button--secondary,
+.cookie-drawer__btn--secondary {
+  background: var(--cc-surface-dark);
+  color: white;
+  border-color: var(--cc-surface-dark);
+}
+
+.cookie-drawer__button--secondary:hover,
+.cookie-drawer__btn--secondary:hover {
+  background: var(--cc-surface-dark2);
+  border-color: var(--cc-surface-dark2);
+  transform: translateY(-1px);
+}
+
+.cookie-drawer__button--outline,
+.cookie-drawer__btn--outline {
+  background: transparent;
+  color: var(--cc-text);
+  border-color: var(--cc-border);
+  margin-right: auto;
+}
+
+.cookie-drawer__button--outline:hover,
+.cookie-drawer__btn--outline:hover {
+  border-color: var(--cc-text-secondary);
+  color: var(--cc-primary);
+  transform: translateY(-1px);
+}
+
+.cookie-drawer__button:active,
+.cookie-drawer__btn:active {
+  transform: translateY(0);
+}
+
+/* Settings */
+.cookie-drawer__settings {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* Tabs */
+.cookie-drawer__tabs {
+  display: flex;
+  padding: 0 var(--cc-padding);
+  overflow-x: auto;
+  flex-shrink: 0;
+}
+
+@media (max-width: 767px) {
+  .cookie-drawer__tabs {
+    padding: 0 var(--cc-padding-sm);
+  }
+}
+
+.cookie-drawer__tab {
+  background: none;
+  border: none;
+  padding: var(--cc-padding-tab);
+  font-size: var(--cc-font-size-lg);
+  line-height: var(--cc-line-height-lg);
+  color: var(--cc-text-subtle);
+  cursor: pointer;
+  border-bottom: 1px solid transparent;
+  white-space: nowrap;
+  transition: all var(--cc-transition-fast);
+}
+
+.cookie-drawer__tab--active {
+  color: var(--cc-text);
+  border-bottom-color: var(--cc-text);
+}
+
+.cookie-drawer__tab:hover:not(.cookie-drawer__tab--active) {
+  color: var(--cc-primary);
+}
+
+.cookie-drawer__tab-content {
+  flex: 1;
+  padding: var(--cc-padding-lg) var(--cc-padding) 12px;
+  overflow-y: auto;
+}
+
+@media (max-width: 767px) {
+  .cookie-drawer__tab-content {
+    padding: var(--cc-padding-sm);
+  }
+}
+
+/* Privacy */
+.cookie-drawer__text{
+
+}
+
+.cookie-drawer__link {
+  color: var(--cc-primary);
+  text-decoration: underline;
+  font-size: var(--cc-font-size-sm);
+  line-height: var(--cc-line-height-sm);
+  margin-top: 8px;
+  width: fit-content;
+}
+.cookie-drawer__link:hover {
+  text-decoration: underline;
+}
+
+/* Toggle */
+.cookie-drawer__toggle {
+  position: relative;
+  width: var(--cc-width-toggle-small);
+  height: var(--cc-height-toggle);
+}
+
+.cookie-drawer__toggle-input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.cookie-drawer__toggle-input:checked + .cookie-drawer__toggle-label {
+  background: var(--cc-toggle-active);
+}
+
+.cookie-drawer__toggle-input:checked + .cookie-drawer__toggle-label::after {
+  transform: translateX(12px);
+}
+
+.cookie-drawer__toggle-input:disabled + .cookie-drawer__toggle-label {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.cookie-drawer__toggle-label {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--cc-toggle-bg);
+  transition: var(--cc-transition);
+  border-radius: var(--cc-border-radius-pill);
+}
+
+.cookie-drawer__toggle-label::after {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 4px;
+  bottom: 4px;
+  background: white;
+  transition: var(--cc-transition);
+  border-radius: var(--cc-border-radius-pill);
+}
+
+.cookie-drawer__toggle-label--disabled {
+  cursor: not-allowed;
+}
+
+/* Drawer animations */
+.drawer-slide-right-enter-active,
+.drawer-slide-right-leave-active {
+  transition: all var(--cc-transition);
+}
+
+.drawer-slide-right-enter-from {
+  transform: translateX(100%);
+}
+
+.drawer-slide-right-leave-to {
+  transform: translateX(100%);
+}
+
+.drawer-slide-left-enter-active,
+.drawer-slide-left-leave-active {
+  transition: all var(--cc-transition);
+}
+
+.drawer-slide-left-enter-from {
+  transform: translateX(-100%);
+}
+
+.drawer-slide-left-leave-to {
+  transform: translateX(-100%);
+}
+
+.drawer-slide-up-enter-active,
+.drawer-slide-up-leave-active {
+  transition: all var(--cc-transition);
+}
+
+.drawer-slide-up-enter-from {
+  transform: translateY(100%);
+}
+
+.drawer-slide-up-leave-to {
+  transform: translateY(100%);
+}
+
+.drawer-slide-down-enter-active,
+.drawer-slide-down-leave-active {
+  transition: all var(--cc-transition);
+}
+
+.drawer-slide-down-enter-from {
+  transform: translateY(-100%);
+}
+
+.drawer-slide-down-leave-to {
+  transform: translateY(-100%);
+}
+
+/* Backdrop animations */
+.backdrop-fade-enter-active,
+.backdrop-fade-leave-active {
+  transition: opacity var(--cc-transition);
+}
+
+.backdrop-fade-enter-from,
+.backdrop-fade-leave-to {
+  opacity: 0;
+}
+
+/* Focus styles */
+.cookie-drawer__close:focus-visible,
+.cookie-drawer__settings-button:focus-visible,
+.cookie-drawer__button:focus-visible,
+.cookie-drawer__tab:focus-visible,
+.cookie-drawer__toggle-input:focus-visible + .cookie-drawer__toggle-label,
+.cookie-drawer__link:focus-visible {
+  outline: var(--cc-focus-width) solid var(--cc-focus-color);
+  outline-offset: var(--cc-focus-offset);
+}
+
+.cookie-drawer__tab:focus-visible {
+  outline-offset: calc(var(--cc-focus-offset) * -1);
+}
+