UNPKG

react-cookie-kit

Version:

GDPR / CCPA Easy Cookie, Script, Do-Not-Sell, and Fingerprint Consent Management for Websites.

586 lines (571 loc) 24.2 kB
.d-none { display: none !important; } .xb-cookie-kit { font-family: Arial, Helvetica, sans-serif; position: fixed; z-index: 100000; opacity: 1; transition: opacity 1s ease-out; font-size: 16px; line-height: 1.5; } .xb-cookie-kit .button, .xb-cookie-kit button { border-radius: 0; } .xb-cookie-kit .button:hover, .xb-cookie-kit button:hover { background: none; } .xb-cookie-kit.left_top { top: 8px; left: 8px; } .xb-cookie-kit.right_top, .xb-cookie-kit.top { top: 8px; right: 8px; } .xb-cookie-kit.right_bottom, .xb-cookie-kit.bottom { bottom: 8px; right: 8px; } .xb-cookie-kit.left_bottom { bottom: 8px; left: 8px; } .xb-cookie-kit.transparent { opacity: 0; } .xb-cookie-kit.scroll { max-height: 100%; overflow: auto; } .xb-cookie-kit__button { background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit; } .xb-cookie-kit__cookie-button { width: 4vw; } .xb-cookie-kit__reset-button { align-self: center; background: #fdb81a; color: #fff; font-size: 12px; padding: 8px; border-radius: 4px !important; margin-left: 5px; margin-top: 5px; } .xb-cookie-kit__reset-button:hover { background: #fdb81a !important; } .xb-cookie-kit__cookie-icon { background-repeat: no-repeat; background-position: left top; position: relative; width: 4vw; height: 4vw; } .xb-cookie-kit__cookie-icon--default { background-image: url(./assets/cookie.svg); } .xb-cookie-kit__cookie-icon--blue { animation: xb-cookie-blue 5s; background-image: url(./assets/cookie.svg); } @keyframes xb-cookie-blue { 30%, 90% { background-image: url(./assets/cookie-blue.svg); } 100% { background-image: url(./assets/cookie.svg); .xb-cookie-kit__cookie-icon--blue:before { animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) 3s; } } } .xb-cookie-kit__cookie-icon--blue:before { background-color: #01a4e9; } .xb-cookie-kit__cookie-icon--green { animation: xb-cookie-green 5s; background-image: url(./assets/cookie.svg); } .xb-cookie-kit__cookie-icon--green:before { background-color: #7acf77; } @keyframes xb-cookie-green { 0%, 90% { background-image: url(./assets/cookie-green.svg); } 100% { background-image: url(./assets/cookie.svg); .xb-cookie-kit__cookie-icon--green:before { animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) 3s; } } } .xb-cookie-kit__cookie-icon--yellow { animation: xb-cookie-yellow 5s; background-image: url(./assets/cookie.svg); } .xb-cookie-kit__cookie-icon--yellow:before { background-color: #faf376; } @keyframes xb-cookie-yellow { 30%, 90% { background-image: url(./assets/cookie-yellow.svg); } 100% { background-image: url(./assets/cookie.svg); .xb-cookie-kit__cookie-icon--yellow:before { animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) 3s; } } } .xb-cookie-kit__cookie-icon--red { animation: xb-cookie-red 5s; background-image: url(./assets/cookie.svg); } .xb-cookie-kit__cookie-icon--red:before { background-color: #f37026; } @keyframes xb-cookie-red { 30%, 90% { background-image: url(./assets/cookie-red.svg); } 100% { background-image: url(./assets/cookie.svg); .xb-cookie-kit__cookie-icon--red:before { animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) 3s; } } } .xb-cookie-kit__pulsing:before { content: ''; position: absolute; display: block; width: 6vw; height: 6vw; top: -1vw; left: -1vw; box-sizing: border-box; border-radius: 50%; animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } @keyframes pulse-ring { 0% { transform: scale(0.33); } 80%, 100% { opacity: 0; } } .xb-cookie-kit .xb-cookie-kit-popup { margin: 8px; display: flex; max-width: 400px; flex-direction: column; background: #e6e6e6; border: 2px solid #fdb81a; border-radius: 7px; } .xb-cookie-kit .xb-cookie-kit-popup__button { padding: 8px; text-align: center; background: #f37026; color: #fff; cursor: pointer; border-radius: 5px; } .xb-cookie-kit .xb-cookie-kit-popup__button:hover { background: #fdb81a; } .xb-cookie-kit .xb-cookie-kit-popup__block { background: #fdb81a; color: #fff; margin: 8px; border: 1px solid #fdb81a; border-radius: 10px; display: flex; justify-content: center; align-items: center; flex-direction: column; } @media (max-width: 500px) { .xb-cookie-kit .xb-cookie-kit-popup__block { margin: 4px 0; border-radius: 5px; } } .xb-cookie-kit .xb-cookie-kit-popup__block--sm { height: 35px; width: 35px; font-size: 13px; } @media (max-width: 500px) { .xb-cookie-kit .xb-cookie-kit-popup__block--sm { height: 30px; width: 30px; font-size: 12px; } } .xb-cookie-kit .xb-cookie-kit-popup__block--lg { height: 80px; width: 80px; font-size: 14px; word-break: break-all; } @media (max-width: 500px) { .xb-cookie-kit .xb-cookie-kit-popup__block--lg { height: auto; display: flex; flex-direction: row; justify-content: flex-start; width: 60%; padding: 4px; } } .xb-cookie-kit .xb-cookie-kit-popup__flag [role~=img] { width: 25px !important; height: 25px !important; } @media (max-width: 500px) { .xb-cookie-kit .xb-cookie-kit-popup__flag [role~=img] { width: 20px !important; height: 20px !important; } } .xb-cookie-kit .xb-cookie-kit-popup__header { display: flex; justify-content: space-between; align-items: center; background: #f37026; border-radius: 5px 5px 0 0; } .xb-cookie-kit .xb-cookie-kit-popup__header > .xb-cookie-kit-popup__logo .xb-cookie-kit-popup__company-logo { max-height: 80px; width: 80px; padding: 4px; cursor: pointer; } .xb-cookie-kit .xb-cookie-kit-popup__header > .xb-cookie-kit-popup__title { color: #fff; font-size: 18px; } .xb-cookie-kit .xb-cookie-kit-popup__header > .xb-cookie-kit-popup__close-button { padding: 16px; cursor: pointer; } .xb-cookie-kit .xb-cookie-kit-popup__header > .xb-cookie-kit-popup__close-button > .xb-cookie-kit-popup__close-button-icon { height: 15px; width: 15px; } .xb-cookie-kit .xb-cookie-kit-popup__text-container { display: flex; } .xb-cookie-kit .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__text { font-size: 17px; padding: 16px; flex: 1; word-wrap: break-word; } .xb-cookie-kit .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container { position: relative; } .xb-cookie-kit .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__locale { background: #f37026; padding: 4px; border-radius: 0 0 0 10px; } .xb-cookie-kit .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__locale > .xb-cookie-kit-popup__language-picker { cursor: pointer; background: #fdb81a; color: #fff; margin: 8px; border: 1px solid #fdb81a; border-radius: 10px; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 35px; width: 35px; font-size: 13px; } @media (max-width: 500px) { .xb-cookie-kit .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__locale > .xb-cookie-kit-popup__language-picker { height: 30px; width: 30px; font-size: 12px; margin: 4px 0; border-radius: 5px; } } .xb-cookie-kit .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__locale img { border-radius: 5px; } .xb-cookie-kit .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container .xb-cookie-kit-popup__country-picker { cursor: pointer; } .xb-cookie-kit .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container .xb-cookie-kit-popup__country-picker-button { width: 100%; height: 100%; } .xb-cookie-kit .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__custom-select { position: absolute; top: 12px; left: -130px; display: flex; background: #fdb81a; border-radius: 10px; } .xb-cookie-kit .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__custom-select > .xb-cookie-kit-popup__language-picker-button { cursor: pointer; background: #fdb81a; color: #fff; padding: 8px; font-size: 13px; border-top: 1px solid #f37026; border-bottom: 1px solid #f37026; margin: 0; } .xb-cookie-kit .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__custom-select > .xb-cookie-kit-popup__language-picker-button:first-child { border-radius: 10px 0 0 10px; border-left: 1px solid #f37026; } .xb-cookie-kit .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__custom-select > .xb-cookie-kit-popup__language-picker-button:last-child { border-radius: 0 10px 10px 0; } .xb-cookie-kit .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__custom-select > .xb-cookie-kit-popup__language-picker-button:not(last-child) { border-right: 1px solid #f37026; } .xb-cookie-kit .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__custom-select > .xb-cookie-kit-popup__language-picker-button:hover { background: #f37026; } .xb-cookie-kit .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__country-picker-select { display: flex; flex-direction: column; position: absolute; left: 12px; top: 95px; background: #fdb81a; border-radius: 10px; border: 1px solid #f37026; width: 35px; height: 175px; overflow: scroll; z-index: 10; -ms-overflow-style: none; scrollbar-width: none; } .xb-cookie-kit .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__country-picker-select::-webkit-scrollbar { width: 0; height: 0; opacity: 0; } .xb-cookie-kit .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__country-picker-select > .xb-cookie-kit-popup__country-picker-button { cursor: pointer; background: #fdb81a; padding: 8px; display: flex; justify-content: center; align-items: center; min-height: 40px; border-bottom: 1px solid #f37026; } .xb-cookie-kit .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__country-picker-select > .xb-cookie-kit-popup__country-picker-button:last-child { border-bottom: 0; } .xb-cookie-kit .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__country-picker-select > .xb-cookie-kit-popup__country-picker-button:hover { background: #f37026; } .xb-cookie-kit .xb-cookie-kit-popup__cookie-list { display: flex; margin-top: 12px; justify-content: space-around; } .xb-cookie-kit .xb-cookie-kit-popup__cookie-list .xb-cookie-kit-popup__cookie { display: flex; flex-direction: column; align-items: center; } .xb-cookie-kit .xb-cookie-kit-popup__cookie-list .xb-cookie-kit-popup__cookie .xb-cookie-kit-popup__consent-label { text-align: center; } .xb-cookie-kit .xb-cookie-kit-popup__cookie-list .xb-cookie-kit-popup__cookie .xb-cookie-kit-popup__consent-label .xb-cookie-kit-popup__consent-label-link { color: inherit; } .xb-cookie-kit .xb-cookie-kit-popup__check-all { display: flex; justify-content: center; align-items: center; cursor: pointer; color: #f37026; } .xb-cookie-kit .xb-cookie-kit-popup__check-all:hover { color: #fdb81a; } .xb-cookie-kit .xb-cookie-kit-popup__consent { background: #fdb81a; margin: 8px auto; border-radius: 10px; padding: 8px 8px 4px; color: #fff; display: flex; } .xb-cookie-kit .xb-cookie-kit-popup__consent .xb-cookie-kit-popup__consent-label { margin-top: 2px; margin-left: 8px; font-size: 14px; } .xb-cookie-kit .xb-cookie-kit-popup__consent .xb-cookie-kit-popup__consent-label-link { color: inherit; } @media (max-width: 500px) { .xb-cookie-kit .xb-cookie-kit-popup__consent { border-radius: 5px; padding: 6px 6px 2px; margin: 4px auto; } } .xb-cookie-kit .xb-cookie-kit-popup__consents-container { display: flex; justify-content: space-around; } .xb-cookie-kit .xb-cookie-kit-popup__consents-container > * { margin: 4px; } .xb-cookie-kit .xb-cookie-kit-popup__actions { display: flex; justify-content: space-between; align-items: center; padding: 8px; } .xb-cookie-kit .xb-cookie-kit-popup__actions > .xb-cookie-kit-popup__privacy-partner-container { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 90px; } .xb-cookie-kit .xb-cookie-kit-popup__actions > .xb-cookie-kit-popup__privacy-partner-container > .xb-cookie-kit-popup__privacy-partner-link { font-size: 13px; color: #717171; text-decoration: none; } .xb-cookie-kit .xb-cookie-kit-popup__actions .xb-cookie-kit-popup__privacy-partner { cursor: pointer; } .xb-cookie-kit .xb-cookie-kit-popup__actions .xb-cookie-kit-popup__privacy-partner, .xb-cookie-kit .xb-cookie-kit-popup__actions .xb-cookie-kit-popup__button-container { font-size: 13px; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #717171; width: 100%; } .xb-cookie-kit .xb-cookie-kit-popup__actions .xb-cookie-kit-popup__privacy-partner .xb-cookie-kit-popup__button, .xb-cookie-kit .xb-cookie-kit-popup__actions .xb-cookie-kit-popup__button-container .xb-cookie-kit-popup__button { width: 50%; } .xb-cookie-kit .xb-cookie-kit-popup__links { display: flex; justify-content: space-around; align-items: center; padding: 0 24px 8px; } .xb-cookie-kit .xb-cookie-kit-popup__links .xb-cookie-kit-popup__link { color: #f37026; text-decoration: underline; cursor: pointer; flex: 1; text-align: center; } .xb-cookie-kit .xb-cookie-kit-popup__links .xb-cookie-kit-popup__link:hover { color: #fdb81a; } .xb-cookie-kit .xb-cookie-kit-popup__powered-by { display: none; } @media (max-width: 500px) { .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__header { padding: 4px; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__header > .xb-cookie-kit-popup__logo .xb-cookie-kit-popup__company-logo { width: 40px; max-height: 40px; padding: 4px; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__header > .xb-cookie-kit-popup__title { font-size: 16px; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__header > .xb-cookie-kit-popup__close-button { padding: 4px 8px 4px 4px; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__header > .xb-cookie-kit-popup__close-button > .xb-cookie-kit-popup__close-button-icon { height: 10px; width: 10px; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__text { font-size: 14px; padding: 8px; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__locale { padding: 2px 4px; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__custom-select { top: 6px; left: -108px; border-radius: 5px; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__custom-select > .xb-cookie-kit-popup__language-picker-button { padding: 5px; font-size: 12px; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__custom-select > .xb-cookie-kit-popup__language-picker-button:first-child { border-radius: 5px 0 0 5px; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container > .xb-cookie-kit-popup__custom-select > .xb-cookie-kit-popup__language-picker-button:last-child { border-radius: 0 5px 5px 0; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container .xb-cookie-kit-popup__country-picker-select { left: 4px; top: 72px; width: 30px; height: 135px; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__text-container > .xb-cookie-kit-popup__locale-container .xb-cookie-kit-popup__country-picker-select > .xb-cookie-kit-popup__country-picker-button { min-height: 30px; padding: 4px; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__cookie-list { flex-direction: column; margin-top: 10px; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__cookie-list .xb-cookie-kit-popup__consent-label { margin-left: 8px; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__check-all { margin-top: 4px; font-size: 12px; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__actions { flex-direction: column; padding: 8px; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__actions .xb-cookie-kit-popup__privacy-partner-container { display: none; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__actions .xb-cookie-kit-popup__button-container { font-size: 14px; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__actions .xb-cookie-kit-popup__button-container .xb-cookie-kit-popup__button { width: 60%; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__links { font-size: 14px; padding: 0 8px 4px; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__powered-by { display: block; color: #717171; font-size: 11px; text-align: center; padding-bottom: 4px; } .xb-cookie-kit .xb-cookie-kit-popup > .xb-cookie-kit-popup__powered-by > .xb-cookie-kit-popup__powered-by-link { margin-left: 4px; font-weight: 600; color: inherit; text-decoration: none; cursor: pointer; } } .xb-cookie-kit input[type=checkbox] { display: none; } .xb-cookie-kit .xb-cookie-kit-popup__checkbox { height: 20px; width: 20px; background-color: transparent; border: 2px solid #f37026; border-radius: 5px; position: relative; display: inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transition: border-color ease 0.1s; -o-transition: border-color ease 0.1s; -webkit-transition: border-color ease 0.1s; transition: border-color ease 0.1s; cursor: pointer; } .xb-cookie-kit .xb-cookie-kit-popup__checkbox[disabled] { cursor: default; } .xb-cookie-kit .xb-cookie-kit-popup__checkbox::before, .xb-cookie-kit .xb-cookie-kit-popup__checkbox::after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; height: 0; width: 4px; background-color: #f37026; display: inline-block; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; -webkit-transform-origin: left top; transform-origin: left top; border-radius: 5px; content: ' '; -webkit-transition: opacity ease 0.2s; -moz-transition: opacity ease 0.2s; transition: opacity ease 0.2s; } .xb-cookie-kit .xb-cookie-kit-popup__checkbox::before { top: 14.4px; left: 8.2px; -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .xb-cookie-kit .xb-cookie-kit-popup__checkbox::after { top: 7.4px; left: 1px; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .xb-cookie-kit input[type=checkbox]:checked + .xb-cookie-kit-popup__checkbox, .xb-cookie-kit .xb-cookie-kit-popup__checkbox.checked { border-color: #f37026; } .xb-cookie-kit input[type=checkbox]:checked + .xb-cookie-kit-popup__checkbox::after, .xb-cookie-kit .xb-cookie-kit-popup__checkbox.checked::after { height: 10px; -moz-animation: dothabottomcheck 0.1s ease 0s forwards; -o-animation: dothabottomcheck 0.1s ease 0s forwards; -webkit-animation: dothabottomcheck 0.1s ease 0s forwards; animation: dothabottomcheck 0.1s ease 0s forwards; } .xb-cookie-kit input[type=checkbox]:checked + .xb-cookie-kit-popup__checkbox::before, .xb-cookie-kit .xb-cookie-kit-popup__checkbox.checked::before { height: 24px; -moz-animation: dothatopcheck 0.2s ease 0s forwards; -o-animation: dothatopcheck 0.2s ease 0s forwards; -webkit-animation: dothatopcheck 0.2s ease 0s forwards; animation: dothatopcheck 0.2s ease 0s forwards; } @-moz-keyframes dothabottomcheck { 0% { height: 0; } 100% { height: 10px; } } @-webkit-keyframes dothabottomcheck { 0% { height: 0; } 100% { height: 10px; } } @keyframes dothabottomcheck { 0% { height: 0; } 100% { height: 10px; } } @keyframes dothatopcheck { 0% { height: 0; } 50% { height: 0; } 100% { height: 24px; } } @-webkit-keyframes dothatopcheck { 0% { height: 0; } 50% { height: 0; } 100% { height: 24px; } } @-moz-keyframes dothatopcheck { 0% { height: 0; } 50% { height: 0; } 100% { height: 24px; } } xbee-script { display: none; } xbee-cookie { display: none; }