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

Last change on this file since 37732 was 37732, checked in by davidb, 12 months ago

Updating to newer version, and then also including some changes that were beneficial in helping Safari an a Mac set the 'cc_concent' cookie
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: #2d4156;
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.