source: main/trunk/greenstone3/web/interfaces/default/cc/cookieconsent.css@ 37747

Last change on this file since 37747 was 37747, checked in by anupama, 11 months ago

Changed the colour of the affirmative cookie consent button to Greenstone green (#459e00).
File size: 24.5 KB
Line 
1/** Light color-scheme **/
2:root{
3 --cc-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
4 --cc-font-size: 16px;
5 --cc-bg: #fff;
6 --cc-z-index: 2147483647;
7 --cc-text: #2d4156;
8 --cc-border-radius: .45rem;
9 --cc-btn-primary-bg: #459e00;
10 --cc-btn-primary-text: var(--cc-bg);
11 --cc-btn-primary-hover-bg: #1d2e38;
12 --cc-btn-primary-hover-text: var(--cc-btn-primary-text);
13 --cc-btn-secondary-bg: #eaeff2;
14 --cc-btn-secondary-text: var(--cc-text);
15 --cc-btn-secondary-hover-bg: #d8e0e6;
16 --cc-btn-secondary-hover-text: var(--cc-btn-secondary-text);
17 --cc-btn-border-radius: 0.375rem;
18 --cc-toggle-bg-off: #919ea6;
19 --cc-toggle-bg-on: var(--cc-btn-primary-bg);
20 --cc-toggle-bg-readonly: #d5dee2;
21 --cc-toggle-knob-bg: #fff;
22 --cc-toggle-knob-icon-color: #ecf2fa;
23 --cc-block-text: var(--cc-text);
24 --cc-cookie-category-block-bg: #f0f4f7;
25 --cc-cookie-category-block-bg-hover: #e9eff4;
26 --cc-section-border: #f1f3f5;
27 --cc-cookie-table-border: #e9edf2;
28 --cc-overlay-bg: rgb(4, 6, 8);
29 --cc-overlay-opacity: .85;
30 --cc-consent-modal-box-shadow: 0 0.625rem 1.875rem rgba(2, 2, 3, 0.28);
31 --cc-webkit-scrollbar-bg: #cfd5db;
32 --cc-webkit-scrollbar-bg-hover: #9199a0;
33}
34
35/** Dark color-scheme **/
36.c_darkmode{
37 --cc-bg: #181b1d;
38 --cc-text: #d8e5ea;
39 --cc-btn-primary-bg: #a6c4dd;
40 --cc-btn-primary-text: #000;
41 --cc-btn-primary-hover-bg: #c2dff7;
42 --cc-btn-primary-hover-text: var(--cc-btn-primary-text);
43 --cc-btn-secondary-bg: #33383c;
44 --cc-btn-secondary-text: var(--cc-text);
45 --cc-btn-secondary-hover-bg: #3e454a;
46 --cc-btn-secondary-hover-text: var(--cc-btn-secondary-text);
47 --cc-toggle-bg-off: #667481;
48 --cc-toggle-bg-on: var(--cc-btn-primary-bg);
49 --cc-toggle-bg-readonly: #454c54;
50 --cc-toggle-knob-bg: var(--cc-cookie-category-block-bg);
51 --cc-toggle-knob-icon-color: var(--cc-bg);
52 --cc-block-text: #b3bfc5;
53 --cc-cookie-category-block-bg: #23272a;
54 --cc-cookie-category-block-bg-hover: #2b3035;
55 --cc-section-border: #292d31;
56 --cc-cookie-table-border: #2b3035;
57 --cc-webkit-scrollbar-bg: #667481;
58 --cc-webkit-scrollbar-bg-hover: #9199a0;
59}
60
61#cc--main {
62 z-index: var(--cc-z-index);
63}
64
65.cc_div *,
66.cc_div *:hover,
67.cc_div :before,
68.cc_div :after{
69 -webkit-box-sizing: border-box;
70 box-sizing: border-box;
71 float: none;
72 font-style: inherit;
73 font-variant: normal;
74 font-weight: inherit;
75 font-family: inherit;
76 line-height: 1.2;
77 font-size: 1em;
78 transition: none;
79 animation: none;
80 margin: 0;
81 padding: 0;
82 text-transform: none;
83 letter-spacing: unset;
84 color: inherit;
85 background: none;
86 border: none;
87 border-radius: unset;
88 box-shadow: none;
89 text-decoration: none;
90 text-align: left;
91 visibility: unset;
92 height: auto;
93 vertical-align: baseline;
94}
95
96.cc_div {
97 font-size: var(--cc-font-size);
98 font-weight: 400;
99 font-family: var(--cc-font-family);
100 -webkit-font-smoothing: antialiased;
101 -moz-osx-font-smoothing: grayscale;
102 text-rendering: optimizeLegibility;
103 color: var(--cc-text);
104}
105
106.cc_div .c-bn,
107.cc_div .b-tl,
108#s-ttl,
109#c-ttl,
110#s-bl td:before{
111 font-weight: 600;
112}
113
114#cm,
115#s-inr,
116.cc_div .c-bl,
117.cc_div .b-tl,
118#s-bl .act .b-acc{
119 border-radius: var(--cc-border-radius);
120}
121
122#s-bl .act .b-acc{
123 border-top-left-radius: 0;
124 border-top-right-radius: 0;
125}
126
127.cc_div input,
128.cc_div button,
129.cc_div a{
130 -webkit-appearance: none;
131 -moz-appearance: none;
132 appearance: none;
133 overflow: hidden;
134}
135
136.cc_div a{
137 border-bottom: 1px solid;
138}
139
140.cc_div a:hover{
141 text-decoration: none;
142 border-color: transparent;
143}
144
145/* Make elements "animatable" */
146.c--anim #cm,
147.c--anim #s-cnt,
148.c--anim #s-inr,
149#cs-ov,
150#cm-ov{
151 transition: visibility .25s linear, opacity .25s ease, transform .25s ease!important;
152}
153
154.c--anim .c-bn{
155 transition: background-color .25s ease!important;
156}
157
158/* start transitions */
159.c--anim #cm.bar.slide,
160.c--anim .bar.slide #s-inr{
161 transition: visibility .4s ease, opacity .4s ease, transform .4s ease!important;
162}
163
164.c--anim #cm.bar.slide + #cm-ov,
165.c--anim .bar.slide + #cs-ov{
166 transition: visibility .4s ease, opacity .4s ease, transform .4s ease!important;
167}
168
169#cm.bar.slide,
170.cc_div .bar.slide #s-inr{
171 transform: translateX(100%);
172 opacity: 1;
173}
174
175#cm.bar.top.slide,
176.cc_div .bar.left.slide #s-inr{
177 transform: translateX(-100%);
178 opacity: 1;
179}
180
181#cm.slide,
182.cc_div .slide #s-inr{
183 transform: translateY(1.6em);
184}
185
186#cm.top.slide{
187 transform: translateY(-1.6em);
188}
189
190#cm.bar.slide{
191 transform: translateY(100%);
192}
193
194#cm.bar.top.slide{
195 transform: translateY(-100%);
196}
197/* end transitions */
198
199/* Show modals */
200
201.show--consent .c--anim #cm,
202.show--consent .c--anim #cm.bar,
203.show--settings .c--anim #s-inr,
204.show--settings .c--anim .bar.slide #s-inr{
205 opacity: 1;
206 transform: scale(1);
207 visibility: visible!important;
208}
209
210.show--consent .c--anim #cm.box.middle,
211.show--consent .c--anim #cm.cloud.middle{
212 transform: scale(1) translateY(-50%);
213}
214
215.show--settings .c--anim #s-cnt{
216 visibility: visible!important;
217}
218
219/* Show overlays */
220.force--consent.show--consent .c--anim #cm-ov,
221.show--settings .c--anim #cs-ov{
222 visibility: visible!important;
223 opacity: var(--cc-overlay-opacity)!important;
224}
225
226#cm{
227 font-family: inherit;
228 padding: 1em 1.4em 1.3em 1.4em;
229 position: fixed;
230 z-index: 1;
231 background: var(--cc-bg);
232 max-width: 24.2em;
233 width: 100%;
234 bottom: 1.250em;
235 right: 1.250em;
236 box-shadow: 0 0.625em 1.875em #000000;
237 box-shadow: var(--cc-consent-modal-box-shadow);
238 opacity: 0;
239 visibility: hidden;
240 transform: scale(.95);
241 line-height: initial;
242}
243
244/** fix https://github.com/orestbida/cookieconsent/issues/94 **/
245#cc_div #cm {
246 display: block!important;
247}
248
249#c-ttl{
250 margin-bottom: .7em;
251 font-size: 1.05em;
252}
253
254.cloud #c-ttl{
255 margin-top: -.15em;
256}
257
258#c-txt{
259 font-size: 0.9em;
260 line-height: 1.5em;
261}
262
263.cc_div #c-bns{
264 display: flex;
265 justify-content: space-between;
266 margin-top: 1.4em;
267}
268
269.cc_div .c-bn{
270 color: var(--cc-btn-secondary-text);
271 background: var(--cc-btn-secondary-bg);
272 padding: 1em 1.7em;
273 display: inline-block;
274 cursor: pointer;
275 font-size: 0.82em;
276 -moz-user-select: none;
277 -khtml-user-select: none;
278 -webkit-user-select: none;
279 -o-user-select: none;
280 user-select: none;
281 text-align: center;
282 border-radius: var(--cc-btn-border-radius);
283 flex: 1;
284}
285
286#c-bns button + button,
287#s-cnt button + button,
288#s-c-bn{
289 float: right;
290 margin-left: .5rem;
291}
292
293#s-cnt #s-rall-bn{
294 float: none;
295}
296
297#cm .c_link:hover,
298#cm .c_link:active,
299#s-cnt button + button:hover,
300#s-cnt button + button:active,
301#s-c-bn:active,
302#s-c-bn:hover{
303 background: var(--cc-btn-secondary-hover-bg);
304 color: var(--cc-btn-secondary-hover-text);
305}
306
307/**
308CookieConsent settings modal
309**/
310#s-cnt{
311 position: fixed;
312 top: 0;
313 left: 0;
314 width: 100%;
315 z-index: 101;
316 display: table;
317 height: 100%;
318 visibility: hidden;
319}
320
321#s-bl{
322 outline: none;
323 scrollbar-width: thin;
324}
325
326#s-bl .title{
327 margin-top: 1.4em;
328}
329
330#s-bl .title:first-child{
331 margin-top: 0;
332}
333
334#s-bl .b-bn{
335 margin-top: 0;
336}
337
338#s-bl .b-acc .p{
339 margin-top: 0;
340 padding: 1em;
341}
342
343#s-cnt .b-bn .b-tl{
344 display: block;
345 font-family: inherit;
346 font-size: .95em;
347 width: 100%;
348 position: relative;
349 padding: 1.3em 6.4em 1.3em 2.7em;
350 background: none;
351 transition: background-color .25s ease;
352}
353
354#s-cnt .b-bn .b-tl.exp{
355 cursor: pointer;
356}
357
358#s-cnt .act .b-bn .b-tl{
359 border-bottom-right-radius: 0;
360 border-bottom-left-radius: 0;
361}
362
363#s-cnt .b-bn .b-tl:active,
364#s-cnt .b-bn .b-tl:hover{
365 background: var(--cc-cookie-category-block-bg-hover);
366}
367
368#s-bl .b-bn{
369 position: relative;
370}
371
372#s-bl .c-bl{
373 padding: 1em;
374 margin-bottom: .4rem;
375 border: 1px solid var(--cc-section-border);
376 transition: background-color .25s ease;
377}
378
379#s-bl .c-bl:hover{
380 background: var(--cc-cookie-category-block-bg);
381}
382
383#s-bl .c-bl:last-child{
384 margin-bottom: .5em;
385}
386
387#s-bl .c-bl:first-child{
388 transition: none;
389 padding: 0;
390 margin-top: 0;
391 border:none;
392 margin-bottom: 2em;
393}
394
395#s-bl .c-bl:not(.b-ex):first-child:hover{
396 background: transparent;
397 background: unset;
398}
399
400#s-bl .c-bl.b-ex{
401 padding: 0;
402 border: none;
403 background: var(--cc-cookie-category-block-bg);
404 transition: none;
405}
406
407#s-bl .c-bl.b-ex + .c-bl{
408 margin-top: 2em;
409}
410
411#s-bl .c-bl.b-ex + .c-bl.b-ex{
412 margin-top: 0;
413}
414
415#s-bl .c-bl.b-ex:first-child{
416 margin-bottom: 1em;
417}
418
419#s-bl .c-bl.b-ex:first-child{
420 margin-bottom: .5em;
421}
422
423#s-bl .b-acc{
424 max-height: 0;
425 overflow: hidden;
426 padding-top: 0;
427 margin-bottom: 0;
428 display: none;
429}
430
431#s-bl .act .b-acc{
432 max-height: 100%;
433 display: block;
434 overflow: hidden;
435}
436
437#s-cnt .p{
438 font-size: 0.9em;
439 line-height: 1.5em;
440 margin-top: .85em;
441 color: var(--cc-block-text);
442}
443
444.cc_div .b-tg .c-tgl:disabled{
445 cursor: not-allowed;
446}
447
448#c-vln{
449 display: table-cell;
450 vertical-align: middle;
451 position: relative;
452}
453
454#cs{
455 padding: 0 1.7em;
456 width: 100%;
457 position: fixed;
458 left: 0;
459 right: 0;
460 top: 0;
461 bottom: 0;
462 height: 100%;
463}
464
465#s-inr{
466 height: 100%;
467 position: relative;
468 max-width: 45em;
469 margin: 0 auto;
470 transform: scale(.96);
471 opacity: 0;
472 padding-top: 4.75em;
473 padding-bottom: 4.75em;
474 position: relative;
475 height: 100%;
476 overflow: hidden;
477 visibility: hidden;
478 box-shadow: rgba(3, 6, 9, .26) 0px 13px 27px -5px;
479}
480
481#s-inr,
482#s-hdr,
483#s-bns{
484 background: var(--cc-bg);
485}
486
487#s-bl{
488 overflow-y: auto;
489 overflow-y: overlay;
490 overflow-x: hidden;
491 height: 100%;
492 padding: 1.3em 1.6em;
493 display: block;
494 width: 100%;
495}
496
497#s-bns{
498 position: absolute;
499 bottom: 0;
500 left: 0;
501 right: 0;
502 padding: 1em 1.8em;
503 border-top: 1px solid var(--cc-section-border);
504 height: 4.75em;
505}
506
507.cc_div .cc-link{
508 color: var(--cc-btn-primary-bg);
509 border-bottom: 1px solid var(--cc-btn-primary-bg);
510 display: inline;
511 padding-bottom: 0;
512 text-decoration: none;
513 cursor: pointer;
514 font-weight: 600;
515}
516
517.cc_div .cc-link:hover,
518.cc_div .cc-link:active{
519 border-color: transparent;
520}
521
522#c-bns button:first-child,
523#s-bns button:first-child{
524 color: var(--cc-btn-primary-text);
525 background: var(--cc-btn-primary-bg);
526}
527
528#c-bns.swap button:first-child{
529 color: var(--cc-btn-secondary-text);
530 background: var(--cc-btn-secondary-bg);
531}
532
533#c-bns.swap button:last-child{
534 color: var(--cc-btn-primary-text);
535 background: var(--cc-btn-primary-bg);
536}
537
538.cc_div .b-tg .c-tgl:checked ~ .c-tg{
539 background: var(--cc-toggle-bg-on);
540}
541
542#c-bns button:first-child:active,
543#c-bns button:first-child:hover,
544#s-bns button:first-child:active,
545#s-bns button:first-child:hover,
546#c-bns.swap button:last-child:active,
547#c-bns.swap button:last-child:hover{
548 background: var(--cc-btn-primary-hover-bg);
549 color: var(--cc-btn-primary-hover-text);
550}
551
552#c-bns.swap button:first-child:active,
553#c-bns.swap button:first-child:hover{
554 background: var(--cc-btn-secondary-hover-bg);
555 color: var(--cc-btn-secondary-hover-text);
556}
557
558#s-hdr{
559 position: absolute;
560 top: 0;
561 width: 100%;
562 display: table;
563 padding: 0 1.8em;
564 height: 4.75em;
565 vertical-align: middle;
566 z-index: 2;
567 border-bottom: 1px solid var(--cc-section-border);
568}
569
570#s-ttl{
571 display: table-cell;
572 vertical-align: middle;
573 font-size: 1em;
574}
575
576#s-c-bn{
577 padding: 0;
578 width: 1.7em;
579 height: 1.7em;
580 font-size: 1.45em;
581 margin: 0;
582 font-weight: initial;
583 position: relative;
584 overflow: hidden;
585}
586
587#s-c-bnc{
588 display: table-cell;
589 vertical-align: middle;
590}
591
592.cc_div span.t-lb {
593 position: absolute;
594 top: 0;
595 z-index: -1;
596 opacity: 0;
597 pointer-events: none;
598 overflow: hidden;
599}
600
601#c_policy__text{
602 height: 31.250em;
603 overflow-y: auto;
604 margin-top: 1.250em;
605}
606
607#c-s-in{
608 position: relative;
609 transform: translateY(-50%);
610 top: 50%;
611 height: 100%;
612 height: calc(100% - 2.5em);
613 max-height: 37.5em;
614}
615
616@media screen and (min-width: 688px) {
617 /** works only on webkit-based browsers **/
618 #s-bl::-webkit-scrollbar{
619 width: .8em;
620 height: 100%;
621 background: transparent;
622 border-radius: 0 0.250em 0.250em 0;
623 }
624
625 #s-bl::-webkit-scrollbar-thumb{
626 border: 0.25em solid var(--cc-bg);
627 background: var(--cc-webkit-scrollbar-bg);
628 border-radius: 100em;
629 }
630
631 #s-bl::-webkit-scrollbar-thumb:hover{
632 background: var(--cc-webkit-scrollbar-bg-hover);
633 }
634
635 #s-bl::-webkit-scrollbar-button {
636 width: 10px;
637 height: 5px;
638 }
639}
640
641/** custom checkbox **/
642/* The container */
643.cc_div .b-tg {
644 position: absolute;
645 right: 0;
646 top: 0;
647 bottom: 0;
648 display: inline-block;
649 margin: auto;
650 right: 1.2em;
651 cursor: pointer;
652 -webkit-user-select: none;
653 -moz-user-select: none;
654 -ms-user-select: none;
655 user-select: none;
656 vertical-align: middle;
657}
658
659/* Hide the browser's default checkbox */
660.cc_div .b-tg .c-tgl {
661 position: absolute;
662 cursor: pointer;
663 display: block;
664 top: 0;
665 left: 0;
666 margin: 0;
667 border: 0;
668}
669
670/* Create a custom checkbox */
671.cc_div .b-tg .c-tg {
672 position: absolute;
673 background: var(--cc-toggle-bg-off);
674 transition: background-color .25s ease, box-shadow .25s ease;
675 pointer-events: none;
676}
677
678.cc_div span.t-lb,
679.cc_div .b-tg,
680.cc_div .b-tg .c-tg,
681.cc_div .b-tg .c-tgl{
682 width: 3.4em;
683 height: 1.5em;
684 border-radius: 4em;
685}
686
687.cc_div .b-tg .c-tg.c-ro{
688 cursor: not-allowed;
689}
690
691.cc_div .b-tg .c-tgl ~ .c-tg.c-ro{
692 background: var(--cc-toggle-bg-readonly);
693}
694
695.cc_div .b-tg .c-tgl ~ .c-tg.c-ro:after{
696 box-shadow: none;
697}
698
699/* Style the checkmark/indicator */
700.cc_div .b-tg .c-tg:after {
701 content: "";
702 position: relative;
703 display: block;
704 left: 0.125em;
705 top: 0.125em;
706 width: 1.25em;
707 height: 1.25em;
708 border: none;
709 box-sizing: content-box;
710 background: var(--cc-toggle-knob-bg);
711 box-shadow: 0 1px 2px rgba(24, 32, 35, .36);
712 transition: transform .25s ease;
713 border-radius: 100%;
714}
715
716/* Show the checkmark when checked */
717.cc_div .b-tg .c-tgl:checked ~ .c-tg:after{
718 transform: translateX(1.9em);
719}
720
721#s-bl table,
722#s-bl th,
723#s-bl td{
724 border: none;
725}
726
727#s-bl tbody tr{
728 transition: background-color .25s ease;
729}
730
731#s-bl tbody tr:hover{
732 background: var(--cc-cookie-category-block-bg-hover);
733}
734
735#s-bl table {
736 text-align: left;
737 border-collapse: collapse;
738 width: 100%;
739 padding: 0;
740 margin: 0;
741 overflow: hidden;
742}
743
744#s-bl caption {
745 padding: 0.5rem 1rem;
746 font-size: .9em;
747 border-bottom: 1px solid var(--cc-cookie-table-border);
748 font-weight: 600;
749}
750
751#s-bl td,
752#s-bl th {
753 padding: 0.8em 0.625em;
754 text-align: left;
755 vertical-align: top;
756 font-size: .8em;
757 padding-left: 1.2em;
758}
759
760#s-bl th {
761 font-family: inherit;
762 padding: 1em 1rem;
763 font-weight: 600;
764}
765
766#s-bl thead tr:first-child{
767 border-bottom: 1px solid var(--cc-cookie-table-border);
768}
769
770.force--consent #s-cnt,
771.force--consent #cs{
772 width: 100vw;
773}
774
775#cm-ov,
776#cs-ov{
777 position: fixed;
778 left: 0;
779 right: 0;
780 top: 0;
781 bottom: 0;
782 visibility: hidden;
783 opacity: 0;
784 background: #070707;
785 background: var(--cc-overlay-bg);
786 display: none;
787 transition: none;
788}
789
790.show--settings #cs-ov,
791.c--anim #cs-ov,
792.force--consent .c--anim #cm-ov,
793.force--consent.show--consent #cm-ov{
794 display: block;
795}
796
797#cs-ov{
798 z-index: 2;
799}
800
801.force--consent .cc_div{
802 position: fixed;
803 top: 0;
804 left: 0;
805 bottom: 0;
806 width: 100%;
807 width: 100vw;
808 visibility: hidden;
809 transition: visibility .25s linear;
810}
811
812.force--consent.show--consent .c--anim .cc_div,
813.force--consent.show--settings .c--anim .cc_div{
814 visibility: visible;
815}
816
817.force--consent #cm{
818 position: absolute;
819}
820
821.force--consent #cm.bar{
822 width: 100vw;
823 max-width: 100vw;
824}
825
826html.force--consent.show--consent{
827 overflow-y: hidden!important;
828}
829
830html.force--consent.show--consent,
831html.force--consent.show--consent body{
832 height: auto!important;
833 overflow-x: hidden!important;
834}
835/** END BLOCK PAGE SCROLL */
836
837/** BEGIN ICONS **/
838.cc_div .b-bn .exp::before,
839.cc_div .act .b-bn .exp::before{
840 border: solid var(--cc-btn-secondary-text);
841 border-width: 0 2px 2px 0;
842 padding: .2em;
843 display: inline-block;
844 position: absolute;
845 content: '';
846 margin-right: 15px;
847 position: absolute;
848 transform: translateY(-50%) rotate(45deg);
849 left: 1.2em;
850 top: 50%;
851}
852
853.cc_div .act .b-bn .b-tl::before{
854 transform: translateY(-20%) rotate(225deg);
855}
856
857.cc_div .on-i::before{
858 border: solid var(--cc-toggle-knob-icon-color);
859 border-width: 0 2px 2px 0;
860 padding: .1em;
861 display: inline-block;
862 padding-bottom: .45em;
863 content: '';
864 margin: 0 auto;
865 transform: rotate(45deg);
866 top: .37em;
867 left: .75em;
868 position: absolute;
869}
870
871#s-c-bn::before,
872#s-c-bn::after{
873 content: '';
874 position: absolute;
875 left: .82em;
876 top: .58em;
877 height: .6em;
878 width: 1.5px;
879 background: var(--cc-btn-secondary-text);
880 transform: rotate(45deg);
881 border-radius: 1em;
882 margin: 0 auto;
883}
884
885#s-c-bn::after{
886 transform: rotate(-45deg);
887}
888
889.cc_div .off-i,
890.cc_div .on-i{
891 height: 100%;
892 width: 50%;
893 position: absolute;
894 right: 0;
895 display: block;
896 text-align: center;
897 transition: opacity .15s ease;
898}
899
900.cc_div .on-i{
901 left: 0;
902 opacity: 0;
903}
904
905.cc_div .off-i::before,
906.cc_div .off-i::after{
907 right: .8em;
908 top: .42em;
909 content: ' ';
910 height: .7em;
911 width: .09375em;
912 display: block;
913 background: var(--cc-toggle-knob-icon-color);
914 margin: 0 auto;
915 position: absolute;
916 transform-origin: center;
917}
918
919.cc_div .off-i::before {
920 transform: rotate(45deg);
921}
922.cc_div .off-i::after {
923 transform: rotate(-45deg);
924}
925
926.cc_div .b-tg .c-tgl:checked ~ .c-tg .on-i{
927 opacity: 1;
928}
929.cc_div .b-tg .c-tgl:checked ~ .c-tg .off-i{
930 opacity: 0;
931}
932/** END ICONS **/
933
934#cm.box.middle,
935#cm.cloud.middle{
936 top: 50%;
937 transform: translateY(-37%);
938 bottom: auto;
939}
940
941#cm.box.middle.zoom,
942#cm.cloud.middle.zoom{
943 transform: scale(.95) translateY(-50%);
944}
945
946#cm.box.center{
947 left: 1em;
948 right: 1em;
949 margin: 0 auto;
950}
951
952/* Start cloud layout */
953#cm.cloud {
954 max-width: 50em;
955 margin: 0 auto;
956 text-align: center;
957 left: 1em;
958 right: 1em;
959 overflow: hidden;
960 padding: 1.2em 1.7em;
961 width: unset;
962}
963
964.cc_div .cloud #c-inr{
965 display: table;
966 width: 100%;
967}
968
969.cc_div .cloud #c-inr-i{
970 width: 70%;
971 display: table-cell;
972 vertical-align: top;
973 padding-right: 2.4em;
974}
975
976.cc_div .cloud #c-txt{
977 font-size: 0.85em;
978}
979
980.cc_div .cloud #c-bns{
981 min-width: 170px;
982 display: table-cell;
983 vertical-align: middle;
984}
985
986#cm.cloud .c-bn{
987 margin: .5rem 0 0 0;
988 width: 100%;
989}
990
991#cm.cloud .c-bn:first-child{
992 margin: 0;
993}
994
995#cm.cloud.left{
996 margin-right: 1.25em;
997}
998
999#cm.cloud.right{
1000 margin-left: 1.25em;
1001}
1002/* End cloud layout */
1003
1004/* Start bar layout */
1005#cm.bar {
1006 width: 100%;
1007 max-width: 100%;
1008 left: 0;
1009 right: 0;
1010 bottom: 0;
1011 border-radius: 0;
1012 position: fixed;
1013 padding: 2em;
1014}
1015
1016#cm.bar #c-inr{
1017 max-width: 32em;
1018 margin: 0 auto;
1019}
1020
1021#cm.bar #c-bns{
1022 max-width: 33.75em;
1023}
1024
1025#cm.bar #cs{
1026 padding: 0;
1027}
1028
1029.cc_div .bar #c-s-in{
1030 top: 0;
1031 transform: none;
1032 height: 100%;
1033 max-height: 100%;
1034}
1035
1036.cc_div .bar #s-hdr,
1037.cc_div .bar #s-bl,
1038.cc_div .bar #s-bns {
1039 padding-left: 1.4em;
1040 padding-right: 1.4em;
1041}
1042
1043.cc_div .bar #cs{
1044 padding: 0;
1045}
1046
1047/* align bar to right by default */
1048.cc_div .bar #s-inr{
1049 margin: 0;
1050 margin-left: auto;
1051 margin-right: 0;
1052 border-radius: 0;
1053 max-width: 32em;
1054}
1055
1056.cc_div .bar.left #s-inr{
1057 margin-left: 0;
1058 margin-right: auto;
1059}
1060
1061/* Force table to not be like tables anymore */
1062.cc_div .bar #s-bl table,
1063.cc_div .bar #s-bl thead,
1064.cc_div .bar #s-bl tbody,
1065.cc_div .bar #s-bl th,
1066.cc_div .bar #s-bl td,
1067.cc_div .bar #s-bl tr,
1068.cc_div .bar #s-cnt{
1069 display: block;
1070}
1071
1072.cc_div .bar #s-bl caption {
1073 display: block;
1074 border-top: 0;
1075 border-bottom: 1px solid var(--cc-cookie-table-border);
1076}
1077
1078/* Hide table headers (but not display: none;, for accessibility) */
1079.cc_div .bar #s-bl thead tr{
1080 position: absolute;
1081 top: -9999px;
1082 left: -9999px;
1083}
1084
1085.cc_div .bar #s-bl tr{
1086 border-top: 1px solid var(--cc-cookie-table-border);
1087}
1088
1089.cc_div .bar #s-bl td {
1090 /* Behave like a "row" */
1091 border: none;
1092 position: relative;
1093 padding-left: 35%;
1094}
1095
1096.cc_div .bar #s-bl td:before {
1097 position: absolute;
1098 left: 1rem;
1099 padding-right: 0.625em;
1100 white-space: nowrap;
1101 content: attr(data-column);
1102 color: var(--cc-text);
1103 overflow: hidden;
1104 text-overflow: ellipsis;
1105}
1106/* End bar layout */
1107
1108/* Positions */
1109#cm.top {
1110 bottom: auto;
1111 top: 1.250em;
1112}
1113
1114#cm.left{
1115 right: auto;
1116 left: 1.250em;
1117}
1118
1119#cm.right{
1120 left: auto;
1121 right: 1.250em;
1122}
1123
1124#cm.bar.left,
1125#cm.bar.right{
1126 left: 0;
1127 right: 0;
1128}
1129
1130#cm.bar.top{
1131 top: 0;
1132}
1133/* end positions */
1134
1135/* Disable transitions if prefers-reduced-motion detected */
1136@media (prefers-reduced-motion) {
1137 #cc--main #cm,
1138 #cc--main #s-cnt,
1139 #cc--main #s-inr{
1140 transition: none!important;
1141 }
1142}
1143
1144@media screen and (max-width: 688px) {
1145
1146 #cm,
1147 #cm.cloud,
1148 #cm.left,
1149 #cm.right{
1150 width: auto;
1151 max-width: 100%;
1152 margin: 0;
1153 padding: 1.2em!important;
1154 right: 1em;
1155 left: 1em;
1156 bottom: 1em;
1157 display: block;
1158 }
1159
1160 .force--consent #cm,
1161 .force--consent #cm.cloud{
1162 width: auto;
1163 max-width: 100vw;
1164 }
1165
1166 #cm.top{
1167 top: 1em;
1168 bottom: auto;
1169 }
1170
1171 #cm.bottom{
1172 bottom: 1em;
1173 top: auto;
1174 }
1175
1176 #cm.bar.bottom{
1177 bottom: 0;
1178 }
1179
1180 #cm.cloud .c-bn{
1181 font-size: .85em;
1182 }
1183
1184 #s-bns,
1185 .cc_div .bar #s-bns{
1186 padding: 1em 1.3em;
1187 }
1188
1189 .cc_div .bar #s-inr{
1190 max-width: 100%;
1191 width: 100%;
1192 }
1193
1194 .cc_div .cloud #c-inr-i{
1195 padding-right: 0;
1196 }
1197
1198 #cs{
1199 border-radius: 0;
1200 padding: 0;
1201 }
1202
1203 #c-s-in{
1204 max-height: 100%;
1205 height: 100%;
1206 top: 0;
1207 transform: none;
1208 }
1209
1210 .cc_div .b-tg{
1211 transform: scale(1.1);
1212 right: 1.1em;
1213 }
1214
1215 #s-inr{
1216 margin: 0;
1217 padding-bottom: 7.9em;
1218 border-radius: 0;
1219 }
1220
1221 #s-bns{
1222 height: 7.9em;
1223 }
1224
1225 #s-bl,
1226 .cc_div .bar #s-bl{
1227 padding: 1.2em;
1228 }
1229
1230 #s-hdr,
1231 .cc_div .bar #s-hdr{
1232 padding: 0 1.2em;
1233 }
1234
1235 /** dynamic table layout **/
1236 #s-bl table {
1237 width: 100%;
1238 }
1239
1240 #s-inr.bns-t{
1241 padding-bottom: 10.5em;
1242 }
1243
1244 .bns-t #s-bns{
1245 height: 10.5em;
1246 }
1247
1248 .cc_div .bns-t .c-bn{
1249 font-size: 0.83em;
1250 padding: .9em 1.6em;
1251 }
1252
1253 #s-cnt .b-bn .b-tl{
1254 padding-top: 1.2em;
1255 padding-bottom: 1.2em;
1256 }
1257
1258 /* Force table to not be like tables anymore */
1259 #s-bl table,
1260 #s-bl thead,
1261 #s-bl tbody,
1262 #s-bl th,
1263 #s-bl td,
1264 #s-bl tr,
1265 #s-cnt{
1266 display: block;
1267 }
1268
1269 #s-bl caption {
1270 border-bottom: 0;
1271 display: block;
1272 }
1273
1274 /* Hide table headers (but not display: none;, for accessibility) */
1275 #s-bl thead tr{
1276 position: absolute;
1277 top: -9999px;
1278 left: -9999px;
1279 }
1280
1281 #s-bl tr{
1282 border-top: 1px solid var(--cc-cookie-table-border);
1283 }
1284
1285 #s-bl td {
1286 /* Behave like a "row" */
1287 border: none;
1288 position: relative;
1289 padding-left: 35%;
1290 }
1291
1292 #s-bl td:before {
1293 position: absolute;
1294 left: 1rem;
1295 padding-right: 0.625em;
1296 white-space: nowrap;
1297 content: attr(data-column);
1298 color: var(--cc-text);
1299 overflow: hidden;
1300 text-overflow: ellipsis;
1301 }
1302
1303 #cm .c-bn,
1304 .cc_div .c-bn{
1305 width: 100%;
1306 margin-right: 0;
1307 }
1308
1309 #s-cnt #s-rall-bn{
1310 margin-left: 0;
1311 }
1312
1313 .cc_div #c-bns{
1314 flex-direction: column;
1315 }
1316
1317 #c-bns button + button,
1318 #s-cnt button + button{
1319 margin-top: 0.625em;
1320 margin-left: 0;
1321 float: unset;
1322 }
1323
1324 #cm.cloud,
1325 #cm.box{
1326 left: 1em;
1327 right: 1em;
1328 width: auto;
1329 }
1330
1331 #cm.cloud.right,
1332 #cm.cloud.left{
1333 margin: 0;
1334 }
1335
1336 .cc_div .cloud #c-bns,
1337 .cc_div .cloud #c-inr,
1338 .cc_div .cloud #c-inr-i{
1339 display: block;
1340 width: auto;
1341 min-width: unset;
1342 }
1343
1344 .cc_div .cloud #c-txt{
1345 font-size: .9em;
1346 }
1347
1348 .cc_div .cloud #c-bns{
1349 margin-top: 1.625em;
1350 }
1351}
Note: See TracBrowser for help on using the repository browser.