v0.7.5

dist/klaro.css

@@ -5,13 +5,21 @@ We declare all variables here as default so that they are easy to override...
 /* Colors */
 /* Spacing */
 /* Breakpoints */
+.klaro.cm-as-context-notice {
+ height: 100%;
+ padding-bottom: 12px;
+ padding-top: 12px;
+}
+
 .klaro .cookie-modal,
+.klaro .context-notice,
 .klaro .cookie-notice {
  /* The switch - the box around the slider */
  font-size: 14px;
 }
 
 .klaro .cookie-modal .cm-switch-container,
+.klaro .context-notice .cm-switch-container,
 .klaro .cookie-notice .cm-switch-container {
  display: block;
  position: relative;
@@ -24,21 +32,25 @@ We declare all variables here as default so that they are easy to override...
 }
 
 .klaro .cookie-modal .cm-switch-container:last-child,
+.klaro .context-notice .cm-switch-container:last-child,
 .klaro .cookie-notice .cm-switch-container:last-child {
  border-bottom: 0;
 }
 
 .klaro .cookie-modal .cm-switch-container:first-child,
+.klaro .context-notice .cm-switch-container:first-child,
 .klaro .cookie-notice .cm-switch-container:first-child {
  margin-top: 0;
 }
 
 .klaro .cookie-modal .cm-switch-container p,
+.klaro .context-notice .cm-switch-container p,
 .klaro .cookie-notice .cm-switch-container p {
  margin-top: 0;
 }
 
 .klaro .cookie-modal .cm-switch,
+.klaro .context-notice .cm-switch,
 .klaro .cookie-notice .cm-switch {
  position: relative;
  display: inline-block;
@@ -47,38 +59,44 @@ We declare all variables here as default so that they are easy to override...
 }
 
 .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
+.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider,
 .klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {
  background-color: #1a936f;
  background-color: var(--green1, #1a936f);
 }
 
 .klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider,
+.klaro .context-notice .cm-list-input.half-checked:checked + .cm-list-label .slider,
 .klaro .cookie-notice .cm-list-input.half-checked:checked + .cm-list-label .slider {
  background-color: #1a936f;
  background-color: var(--green1, #1a936f);
  opacity: 0.6;
 }
 
 .klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider::before,
+.klaro .context-notice .cm-list-input.half-checked:checked + .cm-list-label .slider::before,
 .klaro .cookie-notice .cm-list-input.half-checked:checked + .cm-list-label .slider::before {
  -ms-transform: translateX(10px);
  transform: translateX(10px);
 }
 
 .klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider,
+.klaro .context-notice .cm-list-input.only-required + .cm-list-label .slider,
 .klaro .cookie-notice .cm-list-input.only-required + .cm-list-label .slider {
  background-color: #24cc9a;
  background-color: var(--green2, #24cc9a);
  opacity: 0.8;
 }
 
 .klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider::before,
+.klaro .context-notice .cm-list-input.only-required + .cm-list-label .slider::before,
 .klaro .cookie-notice .cm-list-input.only-required + .cm-list-label .slider::before {
  -ms-transform: translateX(10px);
  transform: translateX(10px);
 }
 
 .klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider,
+.klaro .context-notice .cm-list-input.required:checked + .cm-list-label .slider,
 .klaro .cookie-notice .cm-list-input.required:checked + .cm-list-label .slider {
  background-color: #24cc9a;
  background-color: var(--green2, #24cc9a);
@@ -87,11 +105,13 @@ We declare all variables here as default so that they are easy to override...
 }
 
 .klaro .cookie-modal .slider,
+.klaro .context-notice .slider,
 .klaro .cookie-notice .slider {
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19);
 }
 
 .klaro .cookie-modal .cm-list-input,
+.klaro .context-notice .cm-list-input,
 .klaro .cookie-notice .cm-list-input {
  position: absolute;
  top: 0;
@@ -102,31 +122,36 @@ We declare all variables here as default so that they are easy to override...
 }
 
 .klaro .cookie-modal .cm-list-title,
+.klaro .context-notice .cm-list-title,
 .klaro .cookie-notice .cm-list-title {
  font-size: 14px;
  font-weight: 600;
 }
 
 .klaro .cookie-modal .cm-list-description,
+.klaro .context-notice .cm-list-description,
 .klaro .cookie-notice .cm-list-description {
  font-size: 14px;
  padding-top: 4px;
  color: #666;
 }
 
 .klaro .cookie-modal .cm-list-label,
+.klaro .context-notice .cm-list-label,
 .klaro .cookie-notice .cm-list-label {
  /* The slider */
  /* Rounded sliders */
 }
 
 .klaro .cookie-modal .cm-list-label .cm-switch,
+.klaro .context-notice .cm-list-label .cm-switch,
 .klaro .cookie-notice .cm-list-label .cm-switch {
  position: absolute;
  left: 0;
 }
 
 .klaro .cookie-modal .cm-list-label .slider,
+.klaro .context-notice .cm-list-label .slider,
 .klaro .cookie-notice .cm-list-label .slider {
  position: absolute;
  cursor: pointer;
@@ -141,6 +166,7 @@ We declare all variables here as default so that they are easy to override...
 }
 
 .klaro .cookie-modal .cm-list-label .slider::before,
+.klaro .context-notice .cm-list-label .slider::before,
 .klaro .cookie-notice .cm-list-label .slider::before {
  position: absolute;
  content: '';
@@ -153,45 +179,53 @@ We declare all variables here as default so that they are easy to override...
 }
 
 .klaro .cookie-modal .cm-list-label .slider.round,
+.klaro .context-notice .cm-list-label .slider.round,
 .klaro .cookie-notice .cm-list-label .slider.round {
  border-radius: 30px;
 }
 
 .klaro .cookie-modal .cm-list-label .slider.round::before,
+.klaro .context-notice .cm-list-label .slider.round::before,
 .klaro .cookie-notice .cm-list-label .slider.round::before {
  border-radius: 50%;
 }
 
 .klaro .cookie-modal .cm-list-label input:focus + .slider,
+.klaro .context-notice .cm-list-label input:focus + .slider,
 .klaro .cookie-notice .cm-list-label input:focus + .slider {
  box-shadow-color: #48dfb2;
  box-shadow-color: var(--green3, #48dfb2);
  box-shadow: 0 0 1px #48dfb2;
 }
 
 .klaro .cookie-modal .cm-list-label input:checked + .slider::before,
+.klaro .context-notice .cm-list-label input:checked + .slider::before,
 .klaro .cookie-notice .cm-list-label input:checked + .slider::before {
  -ms-transform: translateX(20px);
  transform: translateX(20px);
 }
 
 .klaro .cookie-modal .cm-list-input:focus + .cm-list-label .slider,
+.klaro .context-notice .cm-list-input:focus + .cm-list-label .slider,
 .klaro .cookie-notice .cm-list-input:focus + .cm-list-label .slider {
  box-shadow: 0 4px 6px 0 rgba(125, 125, 125, 0.2), 5px 5px 10px 0 rgba(125, 125, 125, 0.19);
 }
 
 .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before,
+.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider::before,
 .klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider::before {
  -ms-transform: translateX(20px);
  transform: translateX(20px);
 }
 
 .klaro .cookie-modal .slider,
+.klaro .context-notice .slider,
 .klaro .cookie-notice .slider {
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19);
 }
 
 .klaro .cookie-modal a,
+.klaro .context-notice a,
 .klaro .cookie-notice a {
  color: #1a936f;
  color: var(--green1, #1a936f);
@@ -204,6 +238,12 @@ We declare all variables here as default so that they are easy to override...
 .klaro .cookie-modal h2,
 .klaro .cookie-modal ul,
 .klaro .cookie-modal li,
+.klaro .context-notice p,
+.klaro .context-notice strong,
+.klaro .context-notice h1,
+.klaro .context-notice h2,
+.klaro .context-notice ul,
+.klaro .context-notice li,
 .klaro .cookie-notice p,
 .klaro .cookie-notice strong,
 .klaro .cookie-notice h1,
@@ -219,6 +259,11 @@ We declare all variables here as default so that they are easy to override...
 .klaro .cookie-modal h2,
 .klaro .cookie-modal ul,
 .klaro .cookie-modal li,
+.klaro .context-notice p,
+.klaro .context-notice h1,
+.klaro .context-notice h2,
+.klaro .context-notice ul,
+.klaro .context-notice li,
 .klaro .cookie-notice p,
 .klaro .cookie-notice h1,
 .klaro .cookie-notice h2,
@@ -232,12 +277,14 @@ We declare all variables here as default so that they are easy to override...
 }
 
 .klaro .cookie-modal .cm-link,
+.klaro .context-notice .cm-link,
 .klaro .cookie-notice .cm-link {
  margin-right: 0.5em;
  vertical-align: middle;
 }
 
 .klaro .cookie-modal .cm-btn,
+.klaro .context-notice .cm-btn,
 .klaro .cookie-notice .cm-btn {
  color: #eee;
  color: var(--font-color-dark, #eee);
@@ -252,28 +299,72 @@ We declare all variables here as default so that they are easy to override...
 }
 
 .klaro .cookie-modal .cm-btn:disabled,
+.klaro .context-notice .cm-btn:disabled,
 .klaro .cookie-notice .cm-btn:disabled {
  opacity: 0.5;
 }
 
 .klaro .cookie-modal .cm-btn.cm-btn-close,
+.klaro .context-notice .cm-btn.cm-btn-close,
 .klaro .cookie-notice .cm-btn.cm-btn-close {
  background: #aaa;
  color: #000;
 }
 
 .klaro .cookie-modal .cm-btn.cm-btn-success,
+.klaro .context-notice .cm-btn.cm-btn-success,
 .klaro .cookie-notice .cm-btn.cm-btn-success {
  background: #1a936f;
  background: var(--green1, #1a936f);
 }
 
+.klaro .cookie-modal .cm-btn.cm-btn-success-var,
+.klaro .context-notice .cm-btn.cm-btn-success-var,
+.klaro .cookie-notice .cm-btn.cm-btn-success-var {
+ background: #24cc9a;
+ background: var(--green2, #24cc9a);
+}
+
 .klaro .cookie-modal .cm-btn.cm-btn-info,
+.klaro .context-notice .cm-btn.cm-btn-info,
 .klaro .cookie-notice .cm-btn.cm-btn-info {
  background: #2581c4;
  background: var(--blue1, #2581c4);
 }
 
+.klaro .context-notice {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ background: #eee;
+ border: 1px solid #f0f0f0;
+ border-radius: 4px;
+ padding: 12px;
+}
+
+.klaro .context-notice p {
+ flex-grow: 0;
+ text-align: center;
+ padding-top: 0;
+ margin-top: 0;
+ color: #000;
+}
+
+.klaro .context-notice p strong {
+ color: #333;
+}
+
+.klaro .context-notice p a {
+ color: #459cdc;
+}
+
+.klaro .context-notice p.cm-buttons {
+ margin-top: 12px;
+}
+
 .klaro .cookie-modal {
  width: 100%;
  height: 100%;