PluginProbe ʕ •ᴥ•ʔ
Cookiebot by Usercentrics – Automatic Cookie Banner for GDPR/CCPA & Google Consent Mode / 4.7.0
Cookiebot by Usercentrics – Automatic Cookie Banner for GDPR/CCPA & Google Consent Mode v4.7.0
4.7.2 4.7.1 trunk 2.3.0 2.4.0 2.4.1 2.4.2 2.5.0 3.0.0 3.0.1 3.1.0 3.10.0 3.10.1 3.11.1 3.11.2 3.11.3 3.2.0 3.3.0 3.3.1 3.4.0 3.4.1 3.4.2 3.5.0 3.6.0 3.6.1 3.6.2 3.6.5 3.6.6 3.7.0 3.7.1 3.8.0 3.9.0 4.0.0 4.0.1 4.0.2 4.0.3 4.1.0 4.1.1 4.2.0 4.2.1 4.2.10 4.2.11 4.2.12 4.2.13 4.2.14 4.2.2 4.2.3 4.2.4 4.2.5 4.2.6 4.2.7 4.2.8 4.2.9 4.3.0 4.3.1 4.3.10 4.3.11 4.3.12 4.3.2 4.3.3 4.3.4 4.3.5 4.3.6 4.3.7 4.3.7.1 4.3.8 4.3.9 4.3.9.1 4.4.0 4.4.1 4.4.2 4.5.0 4.5.1 4.5.10 4.5.11 4.5.2 4.5.3 4.5.4 4.5.5 4.5.6 4.5.7 4.5.8 4.5.9 4.6.0 4.6.1 4.6.2 4.6.3 4.6.4 4.6.5 4.6.6 4.6.7 4.7.0
cookiebot / assets / css / backend / settings-page.css
cookiebot / assets / css / backend Last commit date
global 1 year ago addons_page.css 7 months ago consent_mapping_table.css 1 year ago cookiebot_admin_main.css 4 months ago dashboard-old.css 4 months ago dashboard.css 1 year ago gtm_page.css 4 years ago multiple_page.css 3 years ago ppg_page.css 4 months ago settings-page.css 7 months ago support_page.css 1 year ago
settings-page.css
751 lines
1 .cookiebot_fieldset_header {
2 cursor: pointer;
3 }
4
5 .cookiebot_fieldset_header::after {
6 content: "\f140";
7 font: normal 24px/1 dashicons;
8 position: relative;
9 top: 5px;
10 }
11
12 .cookiebot_fieldset_header.active::after {
13 content: "\f142";
14 }
15
16 .cb-settings__header {
17 display: grid;
18 grid-template-columns: 3fr 1fr;
19 align-items: start;
20 }
21
22 .cb-settings__header .cb-main__page_title {
23 margin: 0;
24 }
25
26 .cb-settings__header p.submit {
27 text-align: right;
28 margin: 0;
29 padding: 0;
30 }
31
32 .cb-settings__header p.submit #submit {
33 background-color: rgba(0, 0, 0, 0.16);
34 color: #666666;
35 padding: 10px 20px;
36 font-size: 16px;
37 border: none;
38 pointer-events: none;
39 }
40
41 .cb-settings__header p.submit #submit.enabled{
42 background-color: #076646;
43 color: #ffffff;
44 pointer-events: initial;
45 }
46
47 .cb-settings__notabs {
48 margin-bottom: 60px;
49 }
50
51 .cb-settings__tabs {
52 display: grid;
53 grid-template-columns: repeat(6, 1fr);
54 margin: 25px 0 50px;
55 border-bottom: 1px solid #e1e1e1;
56 }
57
58 .cb-settings__tabs.cb-settings__tabs--uc {
59 grid-template-columns: repeat(5, 1fr);
60 }
61
62 .cb-settings__tabs__item {
63 display: grid;
64 padding: 15px 10px;
65 align-items: center;
66 border-bottom: 3px solid transparent;
67 color: #141414;
68 font-size: 16px;
69 font-weight: 600;
70 text-align: center;
71 cursor: pointer;
72 white-space: normal;
73 word-wrap: break-word;
74 overflow-wrap: break-word;
75 }
76
77 .cb-settings__tabs__item.active-item, .cb-settings__tabs__item:hover {
78 border-color: #1032cf;
79 }
80
81 .cb-settings__tabs__content--item {
82 display: none;
83 }
84
85 .cb-settings__tabs__content--item.active-item {
86 display: block;
87 }
88
89 .cb-general__new__account, .cb-general__consent__mode, .cb-general__prior__consent {
90 background-color: #f1f1f1;
91 border-radius: 15px;
92 padding: 40px;
93 margin-bottom: 50px;
94 }
95
96 .cb-general__new__account {
97 margin-top: 50px;
98 }
99
100 .cb-general__info__title {
101 font-size: 27px;
102 font-weight: 700;
103 line-height: 30px;
104 margin: 0;
105 }
106
107 .cb-general__info__text {
108 width: 100%;
109 max-width: 620px;
110 font-size: 16px;
111 line-height: 24px;
112 }
113
114 .new-account-actions .cb-btn:first-of-type {
115 margin-right: 20px;
116 }
117
118 .cb-settings__config__item {
119 display: grid;
120 grid-template-columns: 1fr 1fr;
121 grid-column-gap: 24px;
122 margin-bottom: 50px;
123 }
124
125 .cb-settings__config__content {
126 padding-right: 40px;
127 }
128
129 .cb-settings__config__subtitle {
130 font-size: 20px;
131 line-height: 25px;
132 margin: 0;
133 }
134
135 .cb-settings__config__data__inner {
136 background-color: #f1f1f1;
137 border-radius: 15px;
138 padding: 30px;
139 }
140
141 .cb-settings__data__subtitle {
142 font-size: 15px;
143 line-height: 20px;
144 margin: 0 0 15px;
145 }
146
147 .cookiebot-cbid-container {
148 display: grid;
149 grid-template-columns: 1fr auto;
150 }
151
152 .cookiebot-cbid-input {
153 position: relative;
154 }
155
156 .cookiebot-cbid-container p.submit {
157 margin: 0;
158 padding: 0;
159 }
160
161 .cookiebot-cbid-container p.submit #submit {
162 background-color: #1032cf;
163 color: #ffffff;
164 margin-top: 0;
165 font-size: 15px;
166 line-height: 2;
167 padding: 8px 15px;
168 font-weight: 500;
169 border-radius: 7px;
170 border-top-left-radius: 0;
171 border-bottom-left-radius: 0;
172 }
173
174 .cookiebot-cbid-container p.submit #submit.disabled {
175 background: gray;
176 pointer-events: none;
177 }
178
179 .cookiebot-cbid-input #cookiebot-cbid
180 {
181 border-top-right-radius: 0;
182 border-bottom-right-radius: 0;
183 text-overflow: ellipsis;
184 white-space: nowrap;
185 }
186
187 .cookiebot-cbid-input #cookiebot-cbid.cbid-active
188 {
189 pointer-events: none;
190 background: rgba(255, 255, 255, .5);
191 color: rgba(44, 51, 56, .5);
192 }
193
194 .cookiebot-cbid-input #cookiebot-cbid.check-progress
195 {
196 padding-right: 55px;
197 }
198
199 .cookiebot-cbid-check {
200 position: absolute;
201 top: 50%;
202 right: 10px;
203 width: 35px;
204 height: 35px;
205 transform: translateY(-50%);
206 }
207
208 .cookiebot-cbid-check.check-progress {
209 background-image: url(../../img/icons/loader.svg);
210
211 }
212
213 .cookiebot-cbid-check.check-pass {
214 background-color: #076646;
215 background-image: url(../../img/icons/check.svg);
216 border-radius: 50%;
217 background-size: auto;
218 background-position: center;
219 background-repeat: no-repeat;
220 }
221
222 #cookiebot-cbid-reset-dialog {
223 margin-top: 0;
224 line-height: 2;
225 padding: 8px 15px;
226 border-top-left-radius: 0;
227 border-bottom-left-radius: 0;
228 cursor: pointer;
229 }
230
231 #cookiebot-cbid-reset-dialog.disabled, #cookiebot-cbid-network-dialog {
232 background-color: #e1e1e1;
233 color: #666;
234 margin-top: 0;
235 pointer-events: none;
236 }
237
238 #cb-network-id-override {
239 margin-top: 24px;
240 }
241
242 #cookiebot-ruleset-id-selector.hidden {
243 display: none;
244 }
245
246 .cb-settings__config__head-section {
247 margin-bottom: 50px;
248 }
249
250 #embedding-shortcode {
251 display: inline-block;
252 width: 100%;
253 border: 2px solid #d3d3d3;
254 border-radius: 7px;
255 padding: 16px;
256 max-width: initial;
257 box-shadow: none;
258 background: #ffffff;
259 color: #242424;
260 font-weight: 600;
261 pointer-events: none;
262 }
263
264 input#cookiebot-embedding {
265 width: 100%;
266 border: 2px solid #d3d3d3;
267 border-radius: 7px;
268 padding: 8px 15px;
269 max-width: initial;
270 }
271
272 select#cookiebot-embedding, select#cookiebot-embedding-type {
273 width: 100%;
274 border: 2px solid #d3d3d3;
275 border-radius: 7px;
276 padding: 8px 15px;
277 max-width: initial;
278 }
279
280 #cookiebot-embedding-type option.hide-option,
281 #cookiebot-embedding-single-service-container.hide-container,
282 #cookiebot-tcf-toggle-container.hide-container
283 {
284 display:none;
285 }
286
287 #show_add_language_guide {
288 display: block;
289 }
290
291 .cb-settings__config__data__inner label {
292 display: block;
293 font-size: 16px;
294 line-height: 20px;
295 font-weight: 500;
296 color: #141414;
297 }
298
299 .cb-settings__config__data__inner label:not(.switch-checkbox) {
300 padding-left: 30px;
301 }
302
303 .cb-settings__config__data__inner label.cb-settings__cookie-types {
304 display: inline-block;
305 padding: 0;
306 text-transform: capitalize;
307 line-height: 32px;
308 }
309
310 .cb-settings__config__data__inner label.switch-checkbox {
311 display: flex;
312 }
313
314 .cb-settings__config__data__inner label:not(:first-of-type) {
315 margin-top: 20px;
316 }
317
318 .recommended-tag {
319 font-size: 13px;
320 background-color: #0e1848;
321 color: #ffffff;
322 padding: 3px 7px;
323 border-radius: 5px;
324 }
325
326 .cb-settings__config__item.secondary__item {
327 border-left: 4px solid #1032cf;
328 }
329
330 .cb-settings__config__item.secondary__item .cb-settings__config__content {
331 padding-left: 90px;
332 }
333
334 .cb-general__info__note {
335 font-size: 13px;
336 font-style: oblique;
337 }
338
339 .disabled__item {
340 display: none;
341 filter: grayscale(1);
342 opacity: .5;
343 pointer-events: none;
344 }
345
346 .cb-prior__tab__selector {
347 position: relative;
348 display: grid;
349 grid-template-columns: 1fr 1fr;
350 align-items: center;
351 justify-items: center;
352 width: 100%;
353 max-width: 360px;
354 margin: 0 auto;
355 border: 2px solid #e3e3e3;
356 border-radius: 150px;
357 }
358
359 .cb-prior__tab__selector:before {
360 position: absolute;
361 content: '';
362 width: calc(50% - 6px);
363 height: calc(100% - 6px);
364 background: #1032cf;
365 border-radius: 150px;
366 left: 3px;
367 z-index: 0;
368 }
369
370 .cb-prior__tab__item {
371 width: 100%;
372 text-align: center;
373 padding: 15px;
374 font-size: 15px;
375 font-weight: 500;
376 z-index: 1;
377 }
378
379 .cb-prior__tab__item.active-item {
380 color: #ffffff;
381 }
382
383 .cb-prior__tab__content__item {
384 display: none;
385 }
386
387 .cb-prior__tab__content__item.active-item {
388 display: block;
389 }
390
391 .cb-settings__vendor__config__item {
392 margin-bottom: 50px;
393 }
394
395 .cb-settings__vendor__config__item.vendor-list-offline {
396 background-color: #f1f1f1;
397 padding: 24px;
398 border-radius: 16px;
399 border: 2px solid #de8e09;
400 }
401
402 .cb-settings__vendor__config__item.vendor-list-offline .cb-general__info__text {
403 margin-bottom: 0;
404 }
405
406 .cb-settings__vendor__config__item .cb-general__info__text {
407 max-width: initial;
408 }
409 .cb-settings__vendor__config__item .only-title {
410 margin-bottom: 24px;
411 }
412
413
414 .cb-vendor__setting--item {
415 position: relative;
416 width: 100%;
417 background-color: #ffffff;
418 color: #141414;
419 border: 2px solid #d3d3d3;
420 border-radius: 7px;
421 padding: 8px 15px;
422 box-sizing: border-box;
423 font-size: 15px;
424 font-weight: 600;
425 line-height: 27px;
426 min-height: 30px;
427 cursor: pointer;
428 }
429
430 .cb-settings__config__data__inner.cb-vendor-settings {
431 display: flex;
432 flex-wrap: wrap;
433 column-gap: 16px;
434 }
435
436 .cb-vendor-settings .checkbox-vendor-search {
437 width: auto;
438 flex: 6 1 auto;
439 }
440
441 .cb-vendor-settings .cb-btn.cb-settings__selector-all {
442 margin: 0;
443 flex: 0 1 auto;
444 }
445
446 .cb-vendor-settings .cb-btn.cb-settings__selector-none {
447 margin: 0;
448 flex: 0 1 auto;
449 }
450
451 .vendor-selected-items-message {
452 flex: 1 1 100%;
453 margin-top: 20px;
454 }
455
456 .vendor-selected-items-message span {
457 display: inline-block;
458 border-radius: 6px;
459 font-weight: 700;
460 color: #d63638;
461 }
462
463 .cb-vendor-alert__msg, .cb-cbid-alert__msg, .cb-cbid-subsite-alert__msg {
464 box-sizing: border-box;
465 padding: 24px 34px;
466 font-size: 15px;
467 line-height: 24px;
468 font-weight: 600;
469 border-radius: 8px;
470 margin-bottom: 20px;
471 }
472
473 .cb-vendor-alert__msg {
474 background-color: #de8e09;
475 color: #ffffff;
476 }
477
478 .cb-cbid-alert__msg, .cb-cbid-subsite-alert__msg {
479 background-color: #fdedd3;
480 border: 4px solid #de8e09;
481 }
482
483 .vendor-selected-items {
484 display: grid;
485 grid-template-columns: 1fr 1fr;
486 grid-row-gap: 5px;
487 grid-column-gap: 5px;
488 grid-auto-rows: minmax(30px, 1fr);
489 max-height: 400px;
490 overflow-y: auto;
491 margin-top: 32px;
492 }
493
494 .vendor-selected-items label.switch-checkbox {
495 margin-top: 0;
496 align-items: flex-start;
497 }
498
499 .vendor-selected-items label.switch-checkbox.hidden {
500 display: none;
501 }
502
503 .vendor-selected-items .switch-checkbox .switcher {
504 width: 30px;
505 min-width: 30px;
506 height: 18px;
507 }
508
509 .vendor-selected-items .switch-checkbox .switcher:after {
510 top: 2px;
511 left: 2px;
512 width: 14px;
513 height: 14px;
514 }
515
516 .vendor-selected-items .switch-checkbox .switcher:active:after {
517 width: 14px;
518 }
519
520 .vendor-selected-items .switch-checkbox input[type=checkbox]:checked + .switcher:after {
521 left: calc(100% - 2px);
522 transform: translateX(-100%);
523 }
524
525 .vendor-selected-item {
526 display: inline-block;
527 padding: 1px 5px;
528 font-size: 13px;
529 line-height: initial;
530 background: blue;
531 color: #ffffff;
532 border-radius: 15px;
533 margin-right: 4px;
534 }
535
536 .vendor-name-list {
537 max-height: 400px;
538 overflow-y: scroll;
539 }
540
541 .cb-settings__vendor__restrictions {
542 margin-top: 24px;
543 }
544
545 .cb-settings__vendor__restrictions > .cb-settings__config__data__inner {
546 position: relative;
547 display: grid;
548 grid-template-columns: 1fr auto auto;
549 grid-column-gap: 16px;
550 align-items: center;
551 }
552
553 .cb-settings__vendor__restrictions .cb-main-btn {
554 margin-top: 0;
555 }
556
557 .vendor-purposes-restrictions > .cb-settings__config__data__inner {
558 margin-top: 16px;
559 }
560
561 .cb-settings__vendor__restrictions .remove__restriction {
562 cursor: pointer;
563 }
564
565 @media (max-width: 1414px) {
566 .recommended-tag {
567 display: block;
568 width: -webkit-fit-content;
569 width: fit-content;
570 margin-top: 5px;
571 margin-bottom: 10px;
572 }
573 }
574
575 .cb-general__new__account--double {
576 display: grid;
577 grid-template-columns: 1fr 1fr;
578 grid-column-gap: 24px;
579 margin-top: -26px;
580 margin-bottom: 50px;
581 }
582
583 .cb-general__new__account--double .cb-main__card__inner.new_card {
584 display: grid;
585 align-self: stretch;
586 position: relative;
587 padding: 25px;
588 overflow: hidden;
589 background-color: #00C6FB;
590 color: #141414;
591 border-radius: 10px;
592 }
593
594 .cb-main__card__inner.new_card .cb-main__card__content {
595 display: grid;
596 grid-template-columns: 1fr minmax(86px, auto);
597 grid-template-rows: minmax(120px, auto) auto;
598 grid-column-gap: 25px;
599 align-items: end;
600 }
601
602 .cb-main__card__inner.new_card .cb-main__card__title {
603 font-size: 28px;
604 line-height: 30px;
605 margin-bottom: 25px;
606 }
607
608 .cb-main__card__inner.new_card .cb-btn.cb-main-btn {
609 background-color: #000000;
610 color: #ffffff;
611 grid-row: 2;
612 grid-column: span 2;
613 text-align: center;
614 text-transform: uppercase;
615 margin-top: 0;
616 }
617
618 .cb-main__card__inner.new_card .cb-bf-counter {
619 background-color: #000000;
620 border-bottom-left-radius: 500px;
621 border-bottom-right-radius: 500px;
622 text-align: center;
623 padding: 6px 6px 12px;
624 width: 74px;
625 position: relative;
626 top: -25px;
627 align-self: start;
628 }
629
630 .cb-main__card__inner.new_card .cb-bf-counter-label {
631 color: #ffffff;
632 font-weight: 700;
633 }
634
635 .cb-main__card__inner.new_card .cb-bf-counter-number {
636 color: #00a2ff;
637 font-size: 50px;
638 line-height: 50px;
639 font-weight: 700;
640 }
641
642 .cb-main__card__inner.new_card .cb-bf-counter-last {
643 color: #00a2ff;
644 font-weight: 700;
645 text-transform: uppercase;
646 line-height: normal;
647 padding: 0 10px;
648 }
649
650 /* Banner Container Meeting cb-wrapper */
651 .banner-container {
652 max-width: 1366px;
653 width: 100%;
654 margin: -1.5rem auto 1.5rem;
655 }
656
657 .header-top-banners {
658 display: flex;
659 background-position: center;
660 border-radius: 0.5rem;
661 align-items: center;
662 width: 100%;
663 margin-bottom: 1rem;
664 }
665
666 .header-top-banners.trial-expired-banner {
667 background-color: #FDECCF;
668 justify-content: space-between;
669 }
670
671 .header-top-banners.connected-banner {
672 background-color: rgba(245, 245, 247, 1);
673 }
674
675 .header-top-banners.banner-live-banner {
676 background-color: #F5F5F7;
677 }
678
679 .header-top-banners.banner-live-banner h3 {
680 color: black;
681 }
682
683 .header-top-banners.banner-live-banner p {
684 color: black;
685 text-wrap: nowrap;
686 }
687
688 .header-top-banners img {
689 width: 24px;
690 height: 24px;
691 flex-shrink: 0;
692 }
693
694 .header-top-banners .banner-content {
695 display: flex;
696 align-items: flex-start;
697 gap: 1rem;
698 padding: 1.5rem 2rem;
699 flex: 1;
700 }
701
702 .header-top-banners h3 {
703 margin: 0 0 0.25rem;
704 font-size: 1.125rem;
705 font-weight: 600;
706 color: #1D2327;
707 line-height: 1.3;
708 }
709
710 .header-top-banners p {
711 margin: 0;
712 font-size: 0.875rem;
713 line-height: 1.4;
714 color: #4B5563;
715 max-width: 90%;
716 }
717
718 .header-top-banners .upgrade-expired-trial {
719 display: flex;
720 align-items: center;
721 cursor: pointer;
722 padding: 1.5rem 2rem;
723 }
724
725
726 /* Banner Close Button */
727 .banner-close-btn {
728 background: none;
729 border: none;
730 color: black;
731 font-size: 24px;
732 line-height: 1;
733 padding: 0 20px;
734 cursor: pointer;
735 opacity: 0.8;
736 transition: opacity 0.2s ease;
737 display: flex;
738 align-items: center;
739 justify-content: center;
740 height: 100%;
741 }
742
743 .banner-close-btn:hover {
744 opacity: 1;
745 }
746
747 .banner-close-btn span {
748 font-weight: lighter;
749 font-size: 28px;
750 }
751