@truconsent/consent-notice 0.0.9 → 0.0.11

package/dist/banner-styles.css

@@ -473,4 +473,21 @@
   width: auto !important;
   border-radius: 6px !important;
   line-height: 1.2 !important;
+}
+
+/* Group Headings */
+.tru-group-heading {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--banner-text-muted);
+  letter-spacing: 0.05em;
+  padding: 0.25rem 0.25rem;
+  margin-top: 0.75rem;
+  margin-bottom: 0.25rem;
+  opacity: 0.8;
+}
+
+.tru-group-heading:first-child {
+  margin-top: 0.25rem;
 }

package/dist/consent-modal.css

@@ -131,7 +131,8 @@
 
 .mcm-error-icon {
   font-size: 48px;
-  color: #ef4444; /* Standard danger red */
+  color: #ef4444;
+  /* Standard danger red */
   line-height: 1;
   margin-bottom: 8px;
 }
@@ -1292,4 +1293,551 @@ input:checked+.track+.thumb {
   position: relative;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   border: 1px solid var(--banner-border);
+}
+
+/* ===================================================================
+   TabbedBannerUI — Tab-based consent banner styles
+   =================================================================== */
+
+.tru-banner-root {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  text-align: left;
+  border-radius: 12px;
+  border: 1px solid var(--banner-border);
+  background-color: var(--banner-bg);
+  color: var(--banner-text);
+  height: 600px;
+  max-height: 90vh;
+  width: 100%;
+}
+
+@media (max-width: 640px) {
+  .tru-banner-root {
+    height: auto;
+    max-height: 85vh;
+  }
+}
+
+/* Header area */
+.tru-banner-header-area {
+  flex-shrink: 0;
+  padding: 14px 16px 10px;
+  border-bottom: 1px solid var(--banner-border);
+  background-color: var(--banner-hover-bg);
+}
+
+@media (max-width: 480px) {
+  .tru-banner-header-area {
+    padding: 10px 12px 8px;
+  }
+}
+
+.tru-disclaimer-box {
+  margin-top: 8px;
+  line-height: 1.4;
+  font-size: 0.8125em !important;
+}
+
+@media (min-width: 641px) {
+  .tru-disclaimer-box {
+    font-size: 0.875em !important;
+  }
+}
+
+/* Tab bar */
+.tru-tabs-bar {
+  display: flex;
+  gap: 24px;
+  padding: 0 20px;
+  background-color: var(--banner-bg);
+  border-bottom: 1px solid var(--banner-border);
+  flex-shrink: 0;
+}
+
+.tru-tab-button {
+  position: relative;
+  padding: 14px 4px;
+  font-size: 0.875em;
+  font-weight: 700;
+  color: var(--banner-text-muted);
+  background: none;
+  border: none;
+  border-bottom: 3px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  margin-bottom: -1px;
+}
+
+.tru-tab-button:hover {
+  color: var(--banner-text);
+}
+
+.tru-tab-button[data-active] {
+  color: var(--banner-primary-color);
+  border-bottom-color: var(--banner-primary-color);
+}
+
+/* Tab panel */
+.tru-tab-panel {
+  animation: truTabFadeIn 0.25s ease;
+}
+
+@keyframes truTabFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Scrollable content area */
+.tru-banner-scroll-area {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 16px;
+  background-color: var(--banner-bg);
+  min-height: 200px;
+  /* Prevent jumping when switching tabs */
+}
+
+/* Footer area */
+.tru-banner-footer-area {
+  flex-shrink: 0;
+  border-top: 1px solid var(--banner-border);
+  padding: 14px 16px;
+  background-color: var(--banner-hover-bg);
+  display: flex;
+  flex-direction: column;
+}
+
+/* Legitimate Use content */
+.tru-legitimate-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.tru-notice-info-card {
+  border: 1px solid var(--banner-info-border);
+  background-color: var(--banner-info-bg);
+  border-radius: 10px;
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tru-notice-icon-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--banner-info-text);
+}
+
+.tru-notice-info-title {
+  font-weight: 700;
+  font-size: 0.9375em;
+}
+
+.tru-notice-info-desc {
+  font-size: 0.8125em;
+  line-height: 1.5;
+  color: var(--banner-text-muted);
+}
+
+.tru-legitimate-disclaimer {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background-color: var(--banner-info-bg);
+  border: 1px solid var(--banner-info-border);
+  margin-top: 16px;
+  animation: truTabFadeIn 0.3s ease;
+}
+
+.tru-legitimate-disclaimer svg {
+  flex-shrink: 0;
+  margin-top: 2px;
+  color: var(--banner-info-text);
+  opacity: 0.8;
+}
+
+.tru-legitimate-disclaimer p {
+  font-size: 0.8125em;
+  line-height: 1.5;
+  font-weight: 500;
+  color: var(--banner-info-text);
+  margin: 0;
+}
+
+.tru-notice-log-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 0.75em;
+  font-weight: 600;
+  color: var(--banner-info-text);
+  background-color: var(--banner-bg);
+  border: 1px solid var(--banner-info-border);
+  width: fit-content;
+}
+
+/* Consent purposes content */
+.tru-consent-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.tru-purpose-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tru-purpose-group-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.8125em;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--banner-text-muted);
+  padding-bottom: 4px;
+  border-bottom: 1px solid var(--banner-border);
+}
+
+.tru-purposes-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Warning bar */
+.tru-warning-bar {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background-color: var(--banner-warning-bg);
+  border: 1px solid var(--banner-warning-border);
+}
+
+.tru-warning-bar svg {
+  flex-shrink: 0;
+  margin-top: 2px;
+  color: var(--banner-warning-text);
+  opacity: 0.7;
+}
+
+.tru-warning-bar p {
+  font-size: 0.75em;
+  line-height: 1.4;
+  font-weight: 500;
+  color: var(--banner-warning-text);
+  margin: 0;
+}
+
+/* Action buttons */
+.tru-actions-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.tru-actions-row.tru-actions-center {
+  justify-content: center;
+}
+
+.tru-btn {
+  padding: 8px 18px;
+  font-size: 0.8125em;
+  font-weight: 700;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+.tru-btn:hover:not(:disabled) {
+  opacity: 0.9;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+}
+
+.tru-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.tru-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  background-color: var(--banner-border) !important;
+  color: var(--banner-text-muted);
+}
+
+.tru-btn-primary {
+  color: #fff;
+  min-width: 120px;
+}
+
+.tru-btn-accept {
+  color: #fff;
+}
+
+.tru-btn-reject {
+  color: #fff;
+}
+
+.tru-btn-save {
+  color: #fff;
+}
+
+/* Scroll hint */
+.tru-scroll-hint {
+  text-align: center;
+  font-size: 10px;
+  color: var(--banner-text-muted);
+  margin-bottom: 4px;
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* ===================================================================
+   Responsive: Mobile
+   =================================================================== */
+@media (max-width: 480px) {
+  /* Modal wrapper: use more screen width on mobile */
+  .mcm-wrapper {
+    width: 95% !important;
+  }
+
+  /* Close button: move inside the modal at a sensible position */
+  .mcm-close-btn {
+    top: -10px !important;
+    right: -5px !important;
+    width: 26px !important;
+    height: 26px !important;
+    z-index: 100 !important;
+    display: flex !important;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
+    background: var(--banner-bg) !important;
+    font-size: 16px !important;
+    align-items: center !important;
+    justify-content: center !important;
+  }
+
+  /* Banner root: flexible height, not fixed */
+  .tru-banner-root {
+    width: 100% !important;
+    margin: 0 !important;
+    height: auto !important;
+    min-height: 0 !important;
+    max-height: 88vh !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    background-color: var(--banner-bg) !important;
+  }
+
+  /* Header: right padding reserves space for the close button */
+  .tru-banner-header-area {
+    padding: 10px 40px 8px 12px !important;
+    position: relative !important;
+  }
+
+  /* The space-y-2 wrapper stays as a vertical stack (block), not a flex row */
+  .tru-banner-header-area > div:first-child {
+    display: block !important;
+    padding-right: 0 !important;
+  }
+
+  /* Language toggle: stay in normal flex flow (no absolute positioning) */
+  .tru-language-toggle {
+    position: static !important;
+    font-size: 0.7rem !important;
+    padding: 2px 4px !important;
+    flex-shrink: 0 !important;
+    white-space: nowrap !important;
+    z-index: auto !important;
+  }
+
+  .tru-language-toggle svg {
+    height: 12px !important;
+    width: 12px !important;
+  }
+
+  .tru-language-dropdown {
+    width: 120px !important;
+  }
+
+  .tru-language-dropdown button {
+    padding: 6px 10px !important;
+    font-size: 0.725rem !important;
+  }
+
+  .tru-banner-logo {
+    max-height: 20px !important;
+    width: auto !important;
+    flex-shrink: 0 !important;
+  }
+
+  .tru-banner-title {
+    font-size: 0.875rem !important;
+    line-height: 1.2 !important;
+    overflow-wrap: break-word !important;
+    word-break: break-word !important;
+  }
+
+  .tru-disclaimer-box {
+    font-size: 0.675rem !important;
+    padding: 4px 10px !important;
+    line-height: 1.3 !important;
+    margin-top: 4px !important;
+  }
+
+  /* Tab bar */
+  .tru-tabs-bar {
+    padding: 0 8px;
+  }
+
+  .tru-tab-button {
+    padding: 6px 10px;
+    font-size: 0.75rem !important;
+  }
+
+  /* Scrollable area: fill remaining space, no fixed max-height */
+  .tru-banner-scroll-area {
+    flex: 1 !important;
+    padding: 8px 12px !important;
+    min-height: 120px !important;
+    max-height: none !important;
+    overflow-y: auto !important;
+  }
+
+  .tru-group-heading {
+    font-size: 0.6rem !important;
+    margin-top: 6px !important;
+    margin-bottom: 2px !important;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    opacity: 0.8;
+  }
+
+  /* Footer: auto height, not fixed */
+  .tru-banner-footer-area {
+    padding: 8px 12px 12px !important;
+    height: auto !important;
+    min-height: 0 !important;
+    flex-shrink: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 6px !important;
+    border-top: 1px solid var(--banner-border) !important;
+    background-color: var(--banner-hover-bg) !important;
+  }
+
+  .tru-footer-box {
+    font-size: 0.675rem !important;
+    padding: 4px 10px !important;
+    line-height: 1.3 !important;
+    margin-bottom: 2px !important;
+  }
+
+  .tru-actions-row {
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    gap: 6px !important;
+    justify-content: flex-end !important;
+  }
+
+  .tru-actions-row.tru-actions-center {
+    justify-content: center !important;
+  }
+
+  .tru-btn {
+    padding: 8px 14px !important;
+    font-size: 0.775rem !important;
+    min-width: 0 !important;
+  }
+
+  .tru-btn-primary {
+    min-width: 100px !important;
+  }
+
+  .tru-actions-row .tru-btn {
+    flex: 1 1 auto !important;
+    min-width: 80px !important;
+  }
+
+  /* Purpose cards */
+  .tru-notice-info-card {
+    padding: 10px 12px;
+  }
+
+  .tru-legitimate-disclaimer,
+  .tru-warning-bar {
+    padding: 6px 10px !important;
+    font-size: 0.7rem !important;
+    margin-top: 6px !important;
+  }
+
+  .tru-legitimate-disclaimer svg,
+  .tru-warning-bar svg {
+    width: 11px !important;
+    height: 11px !important;
+  }
+
+  .tru-purpose-card {
+    padding: 0.5rem !important;
+    border-radius: 8px !important;
+  }
+
+  .tru-purpose-card h3 {
+    font-size: 0.875rem !important;
+  }
+
+  .tru-data-section button {
+    padding: 4px 0 !important;
+    font-size: 0.75rem !important;
+  }
+
+  .tru-data-section div[class*="flex-wrap"] div {
+    padding: 2px 8px !important;
+    font-size: 0.675rem !important;
+  }
+
+  .switch.scale-90 {
+    transform: scale(0.72) !important;
+  }
 }