PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.11.10
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.11.10
4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.1 3.1.2 3.1.3 3.10.0 3.10.1 3.10.10 3.10.11 3.10.12 3.10.13 3.10.14 3.10.15 3.10.2 3.10.3 3.10.4 All 148 releases
visualizer / css / frame.css

frame.css in Visualizer – Tables & Charts Manager with Built-in AI Generator 3.11.10, at css/frame.css

1,682 lines 30.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 #content {
2 overflow: auto;
3 position: absolute;
4 z-index: 75;
5 top: 0;
6 right: 0;
7 bottom: 60px;
8 left: 0;
9 width: auto;
10 background-color: white;
11 }
12
13 #canvas {
14 position: absolute;
15 top: 10px;
16 right: 310px;
17 bottom: 10px;
18 left: 10px;
19 }
20 #control_wrapper_canvas:not(:empty) {
21 margin: 15px 0 0 5px;
22 position: relative;
23 z-index: 1;
24 }
25 #control_wrapper_canvas:not(:empty) + #canvas .google-visualization-table {
26 top: 60px;
27 }
28 .vz-vertical .google-visualization-table {
29 left: 70px;
30 }
31 .google-visualization-controls-categoryfilter label.google-visualization-controls-label {
32 vertical-align: middle;
33 }
34 .google-visualization-controls-categoryfilter li.goog-inline-block {
35 margin: 0 0.2em;
36 }
37 .google-visualization-controls-categoryfilter li {
38 padding: 0 0.2em;
39 }
40 .goog-combobox input {
41 min-height: auto;
42 }
43 .loader {
44 position: absolute;
45 top: 50%;
46 left: 50%;
47 margin-top: -16px;
48 margin-left: -16px;
49 }
50
51 /******************************************************************************/
52 /******************************** SIDEBAR ***********************************/
53 /******************************************************************************/
54
55 #sidebar {
56 overflow: auto;
57 position: absolute;
58 z-index: 75;
59 top: 0;
60 right: 0;
61 bottom: 60px;
62 width: 350px;
63 border-left: 1px solid #dfdfdf;
64 background: whitesmoke;
65
66 -webkit-overflow-scrolling: touch;
67 }
68
69 .viz-group {
70 margin: 0;
71 font-size: 12px;
72 line-height: 18px;
73 list-style: none;
74 }
75
76 .viz-group .viz-group-header .viz-group-title {
77 margin: 10px 0;
78 padding: 15px 20px;
79 border-top: 1px solid #ddd;
80 border-bottom: 1px solid #ddd;
81 color: #555d66;
82 background: #fff;
83 }
84
85 .viz-group-wrapper ul .viz-group-title {
86 border-top: 1px solid #ddd;
87 }
88
89 .viz-group-wrapper ul li {
90 border-top: 1px solid #ddd;
91 }
92
93 .viz-group-wrapper ul ul li.viz-subsection {
94 margin: 5px;
95 border: 1px solid #ddd;
96 }
97
98 .viz-group-wrapper .viz-group .viz-group .viz-group-title {
99 position: relative;
100 margin: 0;
101 padding: 10px 10px 11px 14px;
102 border-top: none;
103 border-bottom: none;
104 border-left: 4px solid #fff;
105 color: #555d66;
106 background-color: #fff;
107 font-size: 14px;
108 font-weight: 600;
109 line-height: 21px;
110 cursor: pointer;
111 transition: 0.15s color ease-in-out,0.15s background-color ease-in-out,0.15s border-color ease-in-out;
112 }
113
114 .viz-title-small {
115 font-size: smaller;
116 }
117
118 .viz-group-wrapper .viz-group .viz-group:hover .viz-group-title,
119 .viz-group-wrapper .viz-group .viz-group.open .viz-group-title {
120 border-left-color: #0073aa;
121 color: #0073aa;
122 background: #f3f3f5;
123 }
124
125 .viz-group-wrapper .viz-group .viz-group .viz-group-title:after {
126 position: absolute;
127 z-index: 1;
128 top: 11px;
129 right: 10px;
130 color: #a0a5aa;
131 font: 400 20px/1 dashicons;
132 content: "\f345";
133 }
134
135 .viz-group-wrapper .viz-group .viz-group.open .viz-group-title:after {
136 content: "\f347";
137 }
138
139 .viz-group-wrapper .viz-group .customize-section-back {
140 display: block;
141 float: left;
142 width: 42px;
143 height: 49px;
144 margin: 0 15px 0 0;
145 padding: 0;
146 border: none;
147 border-top: 1px solid #ddd;
148 border-right: 1px solid #ddd;
149 border-left: 4px solid #fff;
150 background: #fff;
151 box-shadow: none;
152 cursor: pointer;
153 transition: color 0.15s ease-in-out,border-color 0.15s ease-in-out,background 0.15s ease-in-out;
154 }
155
156 .viz-group-wrapper .viz-group .customize-section-back:hover {
157 border-left-color: #0073aa;
158 outline: 0;
159 color: #0073aa;
160 background: #f3f3f5;
161 }
162
163 .viz-group-wrapper .viz-group .customize-section-back:before {
164 position: relative;
165 top: -11px;
166 left: -2px;
167 font: 400 20px/72px dashicons;
168 content: "\f341";
169 }
170
171 .viz-group-wrapper.full-height {
172 float: left;
173 position: relative;
174 width: 100%;
175 height: 100%;
176 margin: 0;
177 }
178
179 .viz-group.bottom-fixed {
180 display: block;
181 position: absolute;
182 bottom: 0;
183 width: 100%;
184 }
185
186 .viz-group ul li h2,
187 .viz-group ul li h3 {
188 padding: 7px 15px 7px 35px;
189 }
190
191 .viz-group h2 .dashicons,
192 .viz-group h3 .dashicons {
193 margin-right: 5px;
194 vertical-align: -5px;
195 }
196
197 .viz-group-content {
198 display: none;
199 margin: 0;
200 padding: 0;
201 background-color: #fdfdfd;
202 }
203
204 div.viz-group-content {
205 padding: 15px;
206 }
207
208 .viz-group.open > .viz-group-content {
209 display: block;
210 }
211
212 .viz-group-description {
213 margin: 0;
214 padding: 5px;
215 color: #555;
216 font-size: 12px;
217 text-align: left;
218 }
219
220 div.viz-group-content .viz-group-description {
221 padding: 5px;
222 font-family: "Montserrat",sans-serif;
223 font-weight: 300;
224 }
225
226 .initial-screen .viz-group-description {
227 padding: 0;
228 padding: 10px 20px 20px;
229 font-family: "Montserrat",sans-serif;
230 font-weight: 300;
231 }
232
233 .viz-section-title {
234 display: block;
235 position: relative;
236 margin-bottom: 5px;
237 padding: 4px 20px;
238 border-top: 1px solid #eee;
239 border-bottom: 1px solid #eee;
240 background-color: rgba(0, 0, 0, 0.02);
241 box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1);
242 font-weight: bold;
243 cursor: pointer;
244 }
245
246 .viz-group-wrapper ul ul li .viz-section-title {
247 margin-bottom: 0;
248 border: none;
249 box-shadow: none;
250 }
251
252 .viz-section-title::after {
253 position: absolute;
254 z-index: 1;
255 top: 13px;
256 right: 20px;
257 width: 0;
258 height: 0;
259 border-width: 4px 4px 0;
260 border-style: solid;
261 border-color: #ccc transparent;
262 content: "";
263 }
264
265 .viz-section-title.open::after {
266 border-width: 0 4px 4px;
267 }
268
269 .section-items,
270 .viz-section-items {
271 display: none;
272 padding: 15px;
273 }
274
275 .viz-section-items.open {
276 display: block;
277 }
278
279 .more-info {
280 display: none;
281 float: right;
282 color: #21759b;
283 font-size: 85%;
284 font-weight: normal;
285 text-decoration: none;
286 }
287
288 .viz-info-msg {
289 font-weight: bold !important;
290 font-style: italic;
291 }
292
293 .viz-info-msg::before {
294 font-family: dashicons;
295 content: "\f488";
296 margin-right: 5px;
297 }
298
299 .viz-section-description {
300 margin: 0;
301 /*display: none;*/
302 padding: 0;
303 color: gray;
304 font-size: 11px;
305 }
306
307 .viz-section-table {
308 width: 100%;
309 }
310
311 .section-delimiter,
312 .viz-section-delimiter {
313 margin: 15px 0;
314 border-top: 1px dashed #ccc;
315 }
316
317 .viz-section-table-column {
318 width: 50%;
319 padding: 0 1px;
320 text-align: left;
321 vertical-align: top;
322 }
323
324 .viz-section-item {
325 margin-bottom: 10px;
326 }
327
328 .control-select,
329 .control-text {
330 width: 100%;
331 }
332
333 .control-check {
334 float: right;
335 }
336
337 .control-check::after {
338 clear: both;
339 }
340
341 .viz-section-description ul {
342 margin: 0 0 0 25px;
343 list-style: circle;
344 }
345
346 .viz-section-description li {
347 margin: 0;
348 list-style: circle;
349 }
350
351 #rate-the-plugin {
352 margin-top: 40px;
353 padding: 20px;
354 border-top: 1px dashed #ddd;
355 text-align: center;
356 }
357
358 .rate-the-plugin {
359 width: 40% !important;
360 margin-top: -5px;
361 }
362
363 #rate-stars {
364 width: 100px;
365 height: 20px;
366 margin: 15px auto;
367 background-image: url("../images/star.png");
368 background-repeat: repeat-x;
369 background-position: right center;
370 }
371
372 #rate-link {
373 font-family: "Montserrat",sans-serif;
374 font-weight: 400;
375 text-decoration: none;
376 }
377
378 #flattr {
379 margin-top: 15px;
380 text-align: center;
381 }
382
383 #viz-tabs {
384 display: none;
385 }
386
387 #viz-tabs.done {
388 display: block;
389 }
390
391 #viz-tabs .ui-tabs-panel {
392 padding: 0;
393 }
394
395 #viz-tabs .wp-color-picker {
396 width: 4rem !important;
397 }
398
399 .viz-info-panel {
400 display: flex;
401 flex-direction: column;
402 padding: 10px;
403 gap: 10px;
404 }
405
406 .viz-info-panel label {
407 margin: 0;
408 padding: 0;
409 font-weight: bold;
410 }
411
412 .viz-info-panel input {
413 flex: 1;
414 }
415
416 .viz-info-panel .viz-info-item {
417 display: flex;
418 flex-direction: column;
419 flex: 1;
420 gap: 3px;
421 }
422
423 .viz-info-panel .viz-info-row {
424 display: flex;
425 flex-direction: row;
426 gap: 5px;
427 }
428
429 /******************************************************************************/
430 /******************************** TOOLBAR ***********************************/
431 /******************************************************************************/
432
433 #toolbar {
434 overflow: hidden;
435 position: absolute;
436 z-index: 100;
437 right: 0;
438 bottom: 0;
439 left: 0;
440 height: 36px;
441 padding: 12px 16px;
442 border-top: 1px solid #dfdfdf;
443 box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.1);
444 text-align: center;
445 }
446
447 #toolbar .push-right {
448 float: right;
449 margin-right: 10px;
450 }
451
452 #toolbar .push-left {
453 float: left;
454 }
455
456 .toolbar-div a {
457 float: left;
458 }
459
460 .toolbar-div {
461 display: inline-block;
462 float: left;
463 width: 30%;
464 vertical-align: top;
465 }
466
467 #chart-select {
468 display: flex;
469 padding: 12px 8px;
470 justify-content: center;
471 align-items: center;
472 gap: 12px;
473 }
474
475 #chart-select label {
476 font-weight: bold;
477 }
478
479 /******************************************************************************/
480 /******************************** TYPE PICKER ******************************/
481 /******************************************************************************/
482
483 .type-box span {
484 display: block;
485 position: absolute;
486 right: 0;
487 bottom: -6px;
488 width: 100%;
489 padding: 4px 0;
490 border-top: 1px dashed #ddd;
491 border-bottom: 1px dashed #ddd;
492 background: #e0e0e0;
493 background-color: #efefef;
494 box-shadow: 0 0 8px #ddd;
495 font-weight: bold;
496 text-align: center;
497 }
498
499 .type-box .pro-upsell {
500 color: #c55555;
501 }
502
503 #type-picker {
504 width: 954px;
505 margin: 50px auto;
506 }
507
508 .type-box {
509 float: left;
510 position: relative;
511 margin: 0 20px 20px 0;
512 border: 1px dashed #ddd;
513 background-color: #efefef;
514 box-shadow: 0 0 8px #ddd;
515 }
516
517 .type-box.viz-hidden {
518 display: none;
519 }
520
521 .type-box.viz-hidden {
522 display: none;
523 }
524
525 .type-box:nth-child(3n+1) {
526 margin-right: 0;
527 }
528
529 .type-box .pro-upsell .visualizder-pro-label {
530 display: inline;
531 position: absolute;
532 top: 0;
533 width: 74px;
534 height: 10px;
535 height: 17px;
536 border: none;
537 color: #fff;
538 z-index: 4;
539 background: #c55555;
540 }
541
542 .type-label {
543 display: block;
544 width: 270px;
545 height: 205px;
546 padding: 15px;
547 border: 1px solid #e0e0e0;
548 background-color: white;
549 background-image: url(../images/chart_types_v395.png);
550 background-repeat: no-repeat;
551 background-position: center center;
552 background-size: 900px 1150px;
553 filter: grayscale(100%);
554 cursor: pointer;
555 }
556
557 #type-picker.lib-ChartJS .type-label {
558 background-image: url(../images/chart_types_chartjs.png);
559 }
560
561 #type-picker.lib-DataTable .type-label {
562 background-image: url(../images/chart_types_datatable.png);
563 }
564
565 .type-label-selected,
566 .type-box .type-label:hover {
567 /* background-image: url(../images/chart_types_v340.png);*/
568 filter: grayscale(0);
569 }
570
571 .type-box-area .type-label {
572 background-position: -8px -225px;
573 }
574
575 .type-box-line .type-label {
576 background-position: -600px 0;
577 }
578
579 .type-box-scatter .type-label {
580 background-position: -300px 0;
581 }
582
583 .type-box-pie .type-label {
584 background-position: 0 0;
585 }
586
587 .type-box-gauge .type-label {
588 background-position: -7px -450px;
589 }
590
591 .type-box-geo .type-label {
592 background-position: -600px -450px;
593 }
594
595 .type-box-candlestick .type-label {
596 background-position: -304px -450px;
597 }
598
599 .type-box-bar .type-label {
600 background-position: -300px -225px;
601 }
602
603 .type-box-bubble .type-label {
604 background-position: -604px -906px;
605 }
606
607 .type-box-column .type-label {
608 background-position: -600px -225px;
609 }
610
611 .type-box-dataTable .type-label,
612 .type-box-table .type-label,
613 .type-box-tabular .type-label {
614 background-position: -301px -670px;
615 }
616
617 .type-box-timeline .type-label {
618 background-position: -8px -670px;
619 }
620
621 .type-box-combo .type-label {
622 background-position: -606px -670px;
623 }
624
625 .type-box-polarArea .type-label {
626 background-position: -2px -912px;
627 }
628
629 .type-box-radar .type-label {
630 background-position: -301px -899px;
631 }
632
633 /******************************************************************************/
634 /******************************** OTHER STYLES ******************************/
635 /******************************************************************************/
636
637 #thehole {
638 position: absolute;
639 top: 0;
640 left: 0;
641 width: 1px;
642 height: 1px;
643 border: 0;
644 opacity: 0;
645
646 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
647 -moz-opacity: 0;
648 }
649
650 .locker,
651 .locker-loader {
652 position: absolute;
653 top: 0;
654 left: 0;
655 }
656
657 .locker {
658 z-index: 1000;
659 opacity: 0.8;
660 background-color: white;
661
662 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
663 filter: alpha(opacity=80);
664 }
665
666 .locker-loader {
667 z-index: 1001;
668 background: url(../images/ajax-loader.gif) no-repeat center center;
669 }
670
671 .file-wrapper {
672 display: inline-block;
673 width: auto;
674 max-width: 133px;
675 }
676
677 .file {
678 position: fixed;
679 max-width: 138px;
680 margin-top: -6px;
681 margin-left: -33px;
682 opacity: 0;
683 font-size: 22px;
684 cursor: pointer;
685
686 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
687 -moz-opacity: 0;
688 }
689
690 #remote-file {
691 display: inline-block;
692 float: right;
693 margin-left: 6px;
694 }
695
696 .form-inline {
697 display: table;
698 /*margin: 0 auto;*/
699 width: 100%;
700 vertical-align: middle;
701 }
702
703 .computer-btn {
704 overflow: hidden;
705 left: -18px;
706 padding-left: 27px !important;
707 border: medium none rgb(100, 100, 100) !important;
708 border: 1px solid #b0b0b0 !important;
709 color: #646464 !important;
710 background: #e6e6e6 url("../images/computer.png") no-repeat scroll 7px 1px !important;
711 box-shadow: none !important;
712 text-shadow: none!important;
713 font-family: "Open Sans",sans-serif;
714 font-weight: 700;
715 transition: all 0.3s ease 0s;
716 }
717
718 .computer-btn:hover {
719 padding-left: 27px !important;
720 border: 1px solid #2f8cea !important;
721 color: white !important;
722 background: #2f8cea url("../images/computer.png") no-repeat scroll 7px -36px !important;
723 box-shadow: 0 1px 0 rgba(171, 171, 171, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15) !important;
724 box-shadow: none !important;
725 transition: all 0.3s ease 0s;
726 transition: all 0.3s ease;
727 }
728
729 .from-web {
730 margin-top: 0;
731 margin-bottom: 15px !important;
732 }
733
734 .from-web-btn {
735 padding-left: 25px !important;
736 border: medium none #646464 !important;
737 border: 1px solid #b0b0b0 !important;
738 color: #646464 !important;
739 background: #e6e6e6 url("../images/web.png") no-repeat scroll 7px 1px !important;
740 box-shadow: none !important;
741 font-family: "Open Sans",sans-serif;
742 font-weight: 700;
743 transition: all 0.3s ease 0s;
744 /*margin-left: 2px !important;*/
745 }
746
747 .from-web-btn:hover {
748 padding-left: 25px !important;
749 /*margin-left: 2px !important;*/
750 border: 1px solid #89b158 !important;
751 color: white !important;
752 background: #89b158 url("../images/web.png") no-repeat scroll 7px -38px !important;
753 box-shadow: none !important;
754 transition: all 0.3s ease 0s;
755 transition: all 0.3s ease;
756 }
757
758 .preview {
759 width: 100%;
760 }
761
762 #sidebar > ul > div.initial-screen > div {
763 padding: 0 20px;
764 }
765
766 .from-chart-btn {
767 padding-left: 25px !important;
768 border: medium none #646464 !important;
769 border: 1px solid #b0b0b0 !important;
770 color: #646464 !important;
771 background: #e6e6e6 url("../images/from_chart.png") no-repeat scroll 7px 1px !important;
772 box-shadow: none !important;
773 font-family: "Open Sans",sans-serif;
774 font-weight: 700;
775 transition: all 0.3s ease 0s;
776 /*margin-left: 2px !important;
777 margin-top: 2px !important;*/
778 }
779
780 .from-chart-btn:hover {
781 padding-left: 25px !important;
782 /*margin-left: 2px !important;*/
783 border: 1px solid #10aecb !important;
784 color: white !important;
785 background: #10aecb url("../images/from_chart.png") no-repeat scroll 7px -36px !important;
786 box-shadow: none !important;
787 transition: all 0.3s ease 0s;
788 transition: all 0.3s ease;
789 /*margin-top: 2px !important;*/
790 }
791
792 input#existing-chart {
793 /*left: 18px;
794 width: 110px;
795 position: relative;*/
796 }
797
798 select#chart-id {
799 float: right;
800 width: 146px;
801 margin-right: 14px;
802 }
803
804 button#editor-chart-button {
805 display: block;
806 margin: 0 auto;
807 border: 1px solid #2c80d6 !important;
808 color: white !important;
809 background-color: #2f8cea !important;
810 box-shadow: none !important;
811 text-shadow: none;
812 transition: all 0.3s ease;
813 }
814
815 .preview-btn {
816 border: 1px solid #2c80d6 !important;
817 color: white !important;
818 background-color: #2f8cea !important;
819 box-shadow: none !important;
820 font-family: "Open Sans",sans-serif;
821 font-weight: 700;
822 transition: all 0.3s ease;
823 }
824
825 .preview-btn:hover {
826 border: 1px solid #2c80d6 !important;
827 color: white !important;
828 background-color: #2c80d6 !important;
829 box-shadow: none !important;
830 font-family: "Open Sans",sans-serif;
831 font-weight: 700;
832 transition: all 0.3s ease;
833 }
834
835 .show-live-btn {
836 width: 100%;
837 margin-top: 15px !important;
838 border-color: #e98b00 !important;
839 background-color: #f90 !important;
840 box-shadow: none !important;
841 font-family: "Open Sans",sans-serif;
842 font-weight: 700;
843 }
844
845 .show-live-btn:hover {
846 width: 100%;
847 margin-top: 15px !important;
848 border-color: #e98b00 !important;
849 background-color: #ea8c00 !important;
850 box-shadow: none !important;
851 font-family: "Open Sans",sans-serif;
852 font-weight: 700;
853 transition: all 0.3s ease;
854 }
855
856 .check-pro-btn {
857 display: block;
858 width: 245px;
859 height: 40px;
860 margin: 0 auto;
861 }
862
863 .advanced-settings-btn,
864 .return-settings-btn {
865 display: block;
866 height: auto;
867 margin: 0 auto;
868 margin-top: 5px;
869 margin-bottom: 20px;
870 border-radius: 3px;
871 font-size: 17px;
872 line-height: 34px;
873 cursor: pointer;
874 }
875
876 .return-settings-btn {
877 width: 90%;
878 }
879
880 .advanced-settings-btn {
881 width: 100%;
882 }
883
884 .return-settings-btn {
885 margin: 10px auto;
886 }
887
888 .hidden-setting {
889 display: none;
890 }
891
892 .viz-select-library {
893 color: #0085ba;
894 }
895 .viz-select-library.viz-hide-library {
896 display: none;
897 }
898
899 .viz-select-library option:first-child {
900 font-weight: bold;
901 }
902
903 /* ====== RESPONSIVE ====== */
904
905 @media (max-width: 1366px) {
906 #rate-stars {
907 margin: 3px 0 10px 40%;
908 }
909
910 .rate-the-plugin {
911 margin-left: -8%;
912 }
913 }
914
915 @media screen and (max-width: 782px) {
916 .button.button-primary.file-wrapper.computer-btn,
917 #remote-file,
918 #existing-chart {
919 height: 28px;
920 margin-bottom: 4px;
921 padding: 0 10px 1px;
922 font-size: 13px;
923 line-height: 26px;
924 vertical-align: middle;
925 }
926 }
927
928 #vz-chart-settings h2:hover,
929 #vz-chart-permissions h2:hover,
930 .sidebar-footer-link h2:hover,
931 #vz-chart-review a:hover {
932 text-decoration: none;
933 }
934
935 #vz-chart-review a {
936 color: #00a0d2;
937 text-decoration: none;
938 }
939
940 #vz-chart-settings h2,
941 #vz-chart-permissions h2,
942 .sidebar-footer-link h2,
943 #vz-chart-review h2 {
944 padding: 0;
945 border: none;
946 font-size: 12px;
947 font-weight: 400;
948 }
949
950 #vz-chart-review {
951 right: 0;
952 bottom: 10px;
953 box-sizing: border-box;
954 width: 40%;
955 padding-right: 6px;
956 text-align: right;
957 }
958
959 #vz-chart-settings.bottom-fixed h2 {
960 padding-left: 6px;
961 }
962
963 #vz-chart-settings {
964 bottom: 40px;
965 left: 0;
966 box-sizing: border-box;
967 width: 33%;
968 text-align: left;
969 }
970
971 #vz-chart-permissions:not(.open) h2 {
972 display: inline-block;
973 width: 100%;
974 margin: 0;
975 text-align: right;
976 }
977
978 #vz-chart-permissions {
979 right: 0;
980 bottom: 40px;
981 box-sizing: border-box;
982 width: 33%;
983 text-align: left;
984 }
985
986 #vz-chart-permissions h2,
987 #vz-chart-settings h2,
988 .sidebar-footer-link h2 {
989 display: inline;
990 color: #00a0d2;
991 background: none;
992 font-family: "Open Sans",sans-serif;
993 cursor: pointer;
994 }
995
996 .sidebar-footer-link,
997 #vz-chart-review,
998 #vz-chart-permissions,
999 #vz-chart-settings {
1000 display: inline;
1001 background: none;
1002 cursor: pointer;
1003 }
1004
1005 .sidebar-footer-link > ul,
1006 #vz-chart-source > ul,
1007 #vz-chart-permissions > ul,
1008 #vz-chart-settings > ul {
1009 position: relative;
1010 z-index: 10;
1011 border-bottom: 1px solid #ddd;
1012 }
1013
1014 #vz-chart-copyright {
1015 bottom: 10px;
1016 text-align: center;
1017 }
1018
1019 #sidebar {
1020 border-left: 1px solid #ddd;
1021 background: #f3f3f3;
1022 }
1023
1024 #vz-chart-permissions.open h2 {
1025 position: absolute;
1026 right: 6px;
1027 bottom: 28px;
1028 left: auto;
1029 width: 50%;
1030 text-align: right;
1031 }
1032
1033 #vz-chart-settings.open h2 {
1034 position: absolute;
1035 bottom: 28px;
1036 left: 6px;
1037 }
1038
1039 #vz-chart-permissions .viz-group-header,
1040 #vz-chart-settings.open .viz-group-header {
1041 display: block;
1042 }
1043
1044 #vz-chart-permissions .viz-group-header,
1045 #vz-chart-settings .viz-group-header {
1046 display: none;
1047 }
1048
1049 .sidebar-footer-link.open h2 {
1050 position: absolute;
1051 bottom: 28px;
1052 left: 20px;
1053 }
1054
1055 .sidebar-footer-link.open .viz-group-header {
1056 display: block;
1057 }
1058
1059 .sidebar-footer-link .viz-group-header {
1060 display: none;
1061 }
1062
1063 #vz-csv-file-form,
1064 #vz-one-time-import,
1065 #vz-schedule-import,
1066 #vz-permissions .only-pro-content,
1067 .edit-data-content {
1068 text-align: center;
1069 }
1070
1071 #csv-file {
1072 margin: 15px 0;
1073 padding: 0;
1074 }
1075
1076 .visualizer-input,
1077 .visualizer-select {
1078 width: 100%;
1079 margin: 0 0 15px;
1080 }
1081
1082 .viz-group .dashicons-lock {
1083 display: none;
1084 }
1085
1086 .only-pro-feature .dashicons-lock {
1087 display: inline;
1088 }
1089
1090 .viz-section-title .dashicons,
1091 .viz-group-title .dashicons {
1092 width: 18px;
1093 height: 18px;
1094 margin-left: 3px;
1095 font-size: 18px;
1096 }
1097
1098 .only-pro-feature input,
1099 .only-pro-feature button,
1100 .only-pro-feature select {
1101 cursor: not-allowed !important;
1102 pointer-events: none;
1103 }
1104
1105 .only-pro-feature > div {
1106 position: relative;
1107 }
1108
1109 .only-pro-content {
1110 position: absolute;
1111 top: 0;
1112 bottom: 0;
1113 left: 0;
1114 width: 100%;
1115 opacity: 0;
1116 background: rgba(253,253,253,0.9);
1117 transition: 0.5s ease;
1118 }
1119
1120 .only-pro-feature:hover .only-pro-content {
1121 opacity: 1;
1122 }
1123
1124 .only-pro-container {
1125 display: flex;
1126 align-items: center;
1127 justify-content: center;
1128 width: 100%;
1129 height: 100%;
1130 }
1131
1132 .only-pro-inner {
1133 display: flex;
1134 flex-direction: column;
1135 align-items: center;
1136 justify-content: center;
1137 }
1138
1139 .only-pro-content p {
1140 margin: 0 0 15px;
1141 font-size: 14px;
1142 font-weight: 700;
1143 }
1144
1145 .only-pro-content a {
1146 display: inline-block;
1147 padding: 7px 12px;
1148 color: #fff;
1149 background: #3F57E1;
1150 font-weight: 600;
1151 text-decoration: none;
1152 transition: 0.1s ease;
1153 border-width: 1px;
1154 border-style: solid;
1155 border-radius: 3px;
1156 }
1157 .only-pro-content .only-pro-container a {
1158 color: #fff !important;
1159 }
1160
1161 .only-pro-content a:hover {
1162 background: #2D419B;
1163 }
1164
1165 .only-pro-anchor {
1166 position: relative;
1167 }
1168
1169 #sidebar::-webkit-scrollbar {
1170 width: 4px;
1171 }
1172
1173 #sidebar::-webkit-scrollbar-thumb {
1174 background: #999;
1175 }
1176
1177 span.viz-section-error {
1178 color: #ff000;
1179 }
1180
1181 #visualizer-error-manual {
1182 color: #ff595e;
1183 }
1184
1185 #vz-chart-permissions {
1186 width: 43%;
1187 }
1188
1189 #vz-chart-permissions {
1190 color: #ce484c;
1191 }
1192
1193 #vz-chart-permissions {
1194 right: 6px;
1195 bottom: 40px;
1196 width: 35%;
1197 }
1198
1199 #permissions-form .only-pro-feature > ul {
1200 position: relative;
1201 text-align: center;
1202 }
1203
1204 /******************************************************************************/
1205 /******************************** DB WIZARD ***********************************/
1206 /******************************************************************************/
1207 .db-wizard-condition .select-condition {
1208 display: none;
1209 }
1210
1211 .db-wizard-condition .select-condition.active {
1212 display: block;
1213 max-width: 50%;
1214 margin-top: 10px;
1215 padding-top: 10px;
1216 border-top: 1px solid #eee;
1217 font-weight: 500;
1218 }
1219
1220 .db-wizard-results {
1221 width: calc(100% - 350px);
1222 }
1223
1224 #db-wizard-form {
1225 padding: 25px;
1226 }
1227
1228 .db-wizard-query label {
1229 display: block;
1230 min-width: 150px;
1231 padding: 20px 0 5px;
1232 color: rgba(0,0,0,0.85);
1233 font-size: 18px;
1234 font-weight: 500;
1235 }
1236
1237 .db-wizard-query .db-wizard-where label,
1238 .db-wizard-query .db-wizard-from label {
1239 padding-top: 0;
1240 }
1241
1242 .db-wizard-query > div:not(:last-child) {
1243 margin-bottom: 15px;
1244 }
1245
1246 .db-wizard-query .select-condition > div {
1247 display: block;
1248 }
1249
1250 .db-wizard-query .chosen-container {
1251 width: auto;
1252 }
1253
1254 .db-wizard-query .chosen-container-single .chosen-single {
1255 border: 1px solid #ccc;
1256 background: #fff;
1257 box-shadow: none;
1258 font-size: 13px;
1259 font-weight: 500;
1260 }
1261
1262 .db-wizard-templates,
1263 .db-wizard-templates > div {
1264 display: block;
1265 }
1266
1267 .db-wizard-templates > div {
1268 box-sizing: border-box;
1269 width: 50%;
1270 margin-top: 20px;
1271 padding: 20px;
1272 border: 1px solid #efefef;
1273 }
1274
1275 .db-wizard-templates > div:first-child {
1276 margin-top: 0;
1277 }
1278
1279 .db-wizard-query .chosen-container-multi .chosen-choices {
1280 padding: 5px;
1281 border-color: #ccc;
1282 background: #fff;
1283 box-shadow: none;
1284 }
1285
1286 .db-wizard-results .dataTables_wrapper .dataTables_filter input,
1287 .db-wizard-query .select-condition-operand input,
1288 .db-wizard-limit input {
1289 width: 50%;
1290 padding-left: 7px;
1291 border: 1px solid #ccc;
1292 border-radius: 6px;
1293 background: #fff;
1294 box-shadow: none;
1295 font-size: 13px;
1296 }
1297
1298 .db-wizard-limit input {
1299 display: inline;
1300 width: 150px;
1301 margin: 0 0 20px 20px;
1302 }
1303
1304 .db-wizard-limit label {
1305 display: inline;
1306 }
1307
1308 .db-wizard-query .select-condition-operand input::-webkit-input-placeholder {
1309 color: #cdcdcd;
1310 }
1311
1312 .db-wizard-query .select-condition-operand input:-ms-input-placeholder {
1313 color: #cdcdcd;
1314 }
1315
1316 .db-wizard-query .select-condition-operand input::placeholder {
1317 color: #cdcdcd;
1318 }
1319
1320 .db-wizard-query .chosen-container-multi .chosen-choices li.search-choice {
1321 padding: 5px 30px 5px 5px;
1322 border-color: #ccc;
1323 background: #fff;
1324 box-shadow: none;
1325 font-weight: 600;
1326 }
1327
1328 .db-wizard-results table > thead > tr > th {
1329 padding: 15px 8px;
1330 border: none;
1331 color: #252422;
1332 background: #fff;
1333 font-size: 18px;
1334 font-weight: 500;
1335 text-align: left;
1336 }
1337
1338 .db-wizard-results table > tbody > tr > td,
1339 .dataTables_info {
1340 padding: 15px 8px;
1341 border-top: 1px solid #a2a2a2;
1342 color: #252422;
1343 font-size: 14px;
1344 font-weight: 300;
1345 }
1346
1347 .db-wizard-results table > tbody > tr.odd {
1348 background-color: #f7f7f7;
1349 }
1350
1351 .db-wizard-results table.dataTable.no-footer {
1352 border: none;
1353 }
1354
1355 .db-wizard-results .dataTables_wrapper .dataTables_info {
1356 border-top: 1px solid #ccc5b9;
1357 color: #a2a2a2;
1358 font-size: 12px;
1359 font-weight: 500;
1360 }
1361
1362 .db-wizard-results .dataTables_filter label {
1363 font-size: 18px;
1364 font-weight: 500;
1365 }
1366
1367 .db-wizard-where-template-remove,
1368 .db-wizard-where-template-add {
1369 width: auto;
1370 height: 25px;
1371 margin-top: 10px;
1372 border: none;
1373 border-radius: 3px;
1374 color: #fff;
1375 font-size: 12px;
1376 cursor: pointer;
1377 transition: 0.3s ease;
1378 }
1379
1380 .db-wizard-where-template-remove:hover,
1381 .db-wizard-where-template-add:hover {
1382 opacity: 0.8;
1383 }
1384
1385 .db-wizard-results .dataTables_wrapper .dataTables_filter {
1386 float: none;
1387 text-align: left;
1388 }
1389
1390 .db-wizard-where-template-add {
1391 background-color: #34a85e;
1392 }
1393
1394 .db-wizard-where-template-remove {
1395 background-color: #ff0d00;
1396 }
1397
1398 #db-query-form .CodeMirror-wrap {
1399 height: 200px;
1400 padding: 15px;
1401 color: #fff;
1402 background: #282923;
1403 font-size: 15px;
1404 }
1405
1406 #db-query-form .CodeMirror-wrap .CodeMirror-cursor {
1407 border-left: 1px solid #fff !important;
1408 }
1409
1410 #db-query-form .CodeMirror-wrap .CodeMirror-placeholder {
1411 color: #fff;
1412 }
1413
1414 #db-query-form .CodeMirror-wrap pre {
1415 color: #fff !important;
1416 }
1417
1418 #db-query-form .CodeMirror-wrap pre .cm-keyword {
1419 color: #FF6188 !important;
1420 }
1421
1422 #db-query-form .CodeMirror-wrap pre .cm-builtin {
1423 color: #78DCE8 !important;
1424 }
1425
1426 #db-query-form .CodeMirror-wrap pre .cm-comment {
1427 color: #74705d !important;
1428 }
1429
1430 #db-query-form .CodeMirror-wrap pre .cm-number,
1431 #db-query-form .CodeMirror-wrap pre .cm-string {
1432 color: #A9DC76 !important;
1433 }
1434
1435 .visualizer-db-query-form > div {
1436 display: block;
1437 width: 15%;
1438 vertical-align: middle;
1439 }
1440
1441 #visualizer-db-query {
1442 padding: 20px;
1443 }
1444
1445 .visualizer-db-query-form > div:first-child {
1446 width: 100%;
1447 margin-bottom: 20px;
1448 }
1449
1450 .db-wizard-error {
1451 color: #f00;
1452 padding: 16px 0;
1453 }
1454
1455 .db-wizard-hints,
1456 .json-wizard-hints,
1457 .html-table-editor-hints {
1458 margin-bottom: 30px;
1459 color: #0085ba;
1460 }
1461
1462 .db-wizard-hints .visualizer-emboss,
1463 .db-wizard-hints a,
1464 .html-table-editor-hints a,
1465 .json-wizard-hints .visualizer-emboss,
1466 .json-wizard-hints a {
1467 color: #f92472;
1468 }
1469
1470 .db-wizard-hints ul,
1471 .html-table-editor-hints ul,
1472 .json-wizard-hints ul {
1473 list-style: square;
1474 padding: 0 16px;
1475 }
1476
1477 .db-wizard-results .dataTables_wrapper .dataTables_info {
1478 width: calc(100% - 17px);
1479 }
1480
1481
1482 /******************************************************************************/
1483 /******************************** data tables *******************************/
1484 /******************************************************************************/
1485 .db-wizard-results .dt-button {
1486 display: none !important;
1487 }
1488
1489 .dt-button.buttons-print {
1490 display: none;
1491 }
1492
1493 /******************************************************************************/
1494 /******************************** json table *********************************/
1495 /******************************************************************************/
1496 #json-conclude-form .results {
1497 min-width: 10px !important;
1498 }
1499
1500 #json-conclude-form .json-table {
1501 width: 85%;
1502 }
1503
1504 #vz-import-json-url,
1505 #vz-import-json-root,
1506 #vz-import-json-paging {
1507 width: 75%;
1508 }
1509
1510 #json-conclude-form .json-table,
1511 #json-conclude-form button#visualizer-json-conclude {
1512 display: inline-block;
1513 vertical-align: middle;
1514 }
1515
1516 .viz-editor-table tbody tr:first-child {
1517 background-color: #ececec !important;
1518 }
1519
1520 .viz-editor-table tr th {
1521 background-color: #cccccc;
1522 }
1523
1524 .viz-editor-table thead tr th:nth-child(n+1) {
1525 cursor: move !important;
1526 }
1527
1528 #json-conclude-form .json-wizard-hints .info,
1529 .html-table-editor-hints .info {
1530 margin: 1% 0px;
1531 }
1532
1533 .viz-step.ui-state-active {
1534 border-color: #0085BA !important;
1535 background: #0085BA !important;
1536 color: #ffffff;
1537 }
1538
1539 .viz-substep {
1540 outline: 0 !important;
1541 border: 0 !important;
1542 background: none !important;
1543 text-transform: uppercase;
1544 }
1545
1546 .viz-substep.ui-state-active {
1547 }
1548
1549 .viz-substep ~ .ui-accordion-content {
1550 outline: 0 !important;
1551 border: 0 !important;
1552 font-size: smaller;
1553 }
1554
1555 .viz-substep ~ div {
1556 display: table;
1557 }
1558
1559 .viz-substep ~ div > div {
1560 display: table-row;
1561 }
1562
1563 .viz-substep ~ div > div div {
1564 display: table-cell;
1565 padding: 5px;
1566 }
1567
1568 .json-wizard-header .field-title {
1569 position: absolute;
1570 left: 30px;
1571 }
1572 /******************************************************************************/
1573 /******************************** html table editor **************************/
1574 /******************************************************************************/
1575 .viz-simple-editor-type,
1576 .viz-simple-editor {
1577 display: none;
1578 }
1579
1580 .viz-table-editor {
1581 width: 75%;
1582 margin-left: 2%;
1583 }
1584
1585 .viz-html-table,
1586 button#visualizer-save-html-table {
1587 display: inline-block;
1588 vertical-align: middle;
1589 }
1590
1591
1592 /******************************************************************************/
1593 /******************************** text area editor **************************/
1594 /******************************************************************************/
1595 .viz-text-editor {
1596 padding: 20px;
1597 z-index: 9999;
1598 box-sizing: border-box;
1599 padding-right: 320px;
1600 }
1601
1602 .viz-text-editor textarea {
1603 width: 85%;
1604 overflow: auto;
1605 background: #282923;
1606 color: #ffffff;
1607 padding: 15px;
1608 height: 400px;
1609 font-size: 15px;
1610 }
1611
1612 .viz-text-editor textarea,
1613 button#viz-text-editor-button {
1614 display: inline-block;
1615 vertical-align: middle;
1616 }
1617
1618 .viz-simple-editor .viz-html-table {
1619 width: 95%;
1620 }
1621
1622 /******************************************************************************/
1623 /******************************** chartjs ***********************************/
1624 /******************************************************************************/
1625
1626 canvas.chartjs-render-monitor {
1627 height: 500px !important;
1628 }
1629
1630 /******************************************************************************/
1631 /******************************** Frontend Actions ***********************************/
1632 /******************************************************************************/
1633 #vz-frontend-actions .only-pro-inner, #vz-data-controls .only-pro-inner {
1634 text-align: center;
1635 }
1636
1637 /******************************************************************************/
1638 /******************************** chart type box upsell ***********************/
1639 /******************************************************************************/
1640
1641 .pro-upsell .pro-upsell-overlay {
1642 position: absolute;
1643 width: 100%;
1644 height: 100%;
1645 left: 0;
1646 top: 0;
1647 display: grid;
1648 place-items: center;
1649 background-color: rgba(255, 255, 255, 0.7);
1650 z-index: 1;
1651 opacity: 0;
1652 visibility: hidden;
1653 transition: all .3s ease-in-out;
1654 }
1655 .pro-upsell:hover .pro-upsell-overlay{
1656 opacity: 1;
1657 visibility: visible;
1658 }
1659
1660 .pro-upsell .pro-upsell-overlay .button {
1661 width: 155px;
1662 height: 39px;
1663 background: #007CBA;
1664 border-radius: 4px;
1665 display: flex;
1666 align-items: center;
1667 text-align: center;
1668 color: #FFFFFF;
1669 justify-content: center;
1670 }
1671 .pro-upsell .pro-upsell-overlay .button.button-secondary{
1672 background: #ffffff;
1673 color: #007CBA;
1674 }
1675 .pro-upsell .pro-upsell-overlay .pro-upsell-action {
1676 display: flex;
1677 gap: 20px;
1678 }
1679 .pro-upsell .pro-upsell-overlay .pro-upsell-action .button{
1680 width: 100%;
1681 text-align: center;
1682 }