PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.10.0
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.10.0
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.10.0, at css/frame.css

1,563 lines 28.4 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 /******************************** TOOLBAR ***********************************/
400 /******************************************************************************/
401
402 #toolbar {
403 overflow: hidden;
404 position: absolute;
405 z-index: 100;
406 right: 0;
407 bottom: 0;
408 left: 0;
409 height: 36px;
410 padding: 12px 16px;
411 border-top: 1px solid #dfdfdf;
412 box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.1);
413 text-align: center;
414 }
415
416 #toolbar .push-right {
417 float: right;
418 margin-right: 10px;
419 }
420
421 #toolbar .push-left {
422 float: left;
423 }
424
425 .toolbar-div a {
426 float: left;
427 }
428
429 .toolbar-div {
430 display: inline-block;
431 float: left;
432 width: 30%;
433 vertical-align: top;
434 }
435
436 /******************************************************************************/
437 /******************************** TYPE PICKER ******************************/
438 /******************************************************************************/
439
440 .type-box span {
441 display: block;
442 position: absolute;
443 right: 0;
444 bottom: -6px;
445 width: 100%;
446 padding: 4px 0;
447 border-top: 1px dashed #ddd;
448 border-bottom: 1px dashed #ddd;
449 background: #e0e0e0;
450 background-color: #efefef;
451 box-shadow: 0 0 8px #ddd;
452 font-weight: bold;
453 text-align: center;
454 }
455
456 .type-box .pro-upsell {
457 color: #c55555;
458 }
459
460 #type-picker {
461 width: 954px;
462 margin: 50px auto;
463 }
464
465 .type-box {
466 float: left;
467 position: relative;
468 margin: 0 20px 20px 0;
469 border: 1px dashed #ddd;
470 background-color: #efefef;
471 box-shadow: 0 0 8px #ddd;
472 }
473
474 .type-box:nth-child(3n+3) {
475 margin-right: 0;
476 }
477
478 .type-box .pro-upsell .visualizder-pro-label {
479 display: inline;
480 position: absolute;
481 top: 0;
482 width: 74px;
483 height: 10px;
484 height: 17px;
485 border: none;
486 color: #fff;
487 z-index: 1;
488 background: #c55555;
489 }
490
491 .type-label {
492 display: block;
493 width: 270px;
494 height: 205px;
495 padding: 15px;
496 border: 1px solid #e0e0e0;
497 background-color: white;
498 background-image: url(../images/chart_types_v395.png);
499 background-repeat: no-repeat;
500 background-position: center center;
501 background-size: 900px 1150px;
502 filter: grayscale(100%);
503 }
504
505 .type-label-selected,
506 .type-box .type-label:hover {
507 /* background-image: url(../images/chart_types_v340.png);*/
508 filter: grayscale(0);
509 }
510
511 .type-box-area .type-label {
512 background-position: -8px -225px;
513 }
514
515 .type-box-line .type-label {
516 background-position: -600px 0;
517 }
518
519 .type-box-scatter .type-label {
520 background-position: -300px 0;
521 }
522
523 .type-box-pie .type-label {
524 background-position: 0 0;
525 }
526
527 .type-box-gauge .type-label {
528 background-position: -7px -450px;
529 }
530
531 .type-box-geo .type-label {
532 background-position: -600px -450px;
533 }
534
535 .type-box-candlestick .type-label {
536 background-position: -304px -450px;
537 }
538
539 .type-box-bar .type-label {
540 background-position: -300px -225px;
541 }
542
543 .type-box-bubble .type-label {
544 background-position: -604px -906px;
545 }
546
547 .type-box-column .type-label {
548 background-position: -600px -225px;
549 }
550
551 .type-box-dataTable .type-label,
552 .type-box-table .type-label,
553 .type-box-tabular .type-label {
554 background-position: -301px -670px;
555 }
556
557 .type-box-timeline .type-label {
558 background-position: -8px -670px;
559 }
560
561 .type-box-combo .type-label {
562 background-position: -606px -670px;
563 }
564
565 .type-box-polarArea .type-label {
566 background-position: -2px -912px;
567 }
568
569 .type-box-radar .type-label {
570 background-position: -301px -899px;
571 }
572
573 /******************************************************************************/
574 /******************************** OTHER STYLES ******************************/
575 /******************************************************************************/
576
577 #thehole {
578 position: absolute;
579 top: 0;
580 left: 0;
581 width: 1px;
582 height: 1px;
583 border: 0;
584 opacity: 0;
585
586 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
587 -moz-opacity: 0;
588 }
589
590 .locker,
591 .locker-loader {
592 position: absolute;
593 top: 0;
594 left: 0;
595 }
596
597 .locker {
598 z-index: 1000;
599 opacity: 0.8;
600 background-color: white;
601
602 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
603 filter: alpha(opacity=80);
604 }
605
606 .locker-loader {
607 z-index: 1001;
608 background: url(../images/ajax-loader.gif) no-repeat center center;
609 }
610
611 .file-wrapper {
612 display: inline-block;
613 width: auto;
614 max-width: 133px;
615 }
616
617 .file {
618 position: fixed;
619 max-width: 138px;
620 margin-top: -6px;
621 margin-left: -33px;
622 opacity: 0;
623 font-size: 22px;
624 cursor: pointer;
625
626 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
627 -moz-opacity: 0;
628 }
629
630 #remote-file {
631 display: inline-block;
632 float: right;
633 margin-left: 6px;
634 }
635
636 .form-inline {
637 display: table;
638 /*margin: 0 auto;*/
639 width: 100%;
640 vertical-align: middle;
641 }
642
643 .computer-btn {
644 overflow: hidden;
645 left: -18px;
646 padding-left: 27px !important;
647 border: medium none rgb(100, 100, 100) !important;
648 border: 1px solid #b0b0b0 !important;
649 color: #646464 !important;
650 background: #e6e6e6 url("../images/computer.png") no-repeat scroll 7px 1px !important;
651 box-shadow: none !important;
652 text-shadow: none!important;
653 font-family: "Open Sans",sans-serif;
654 font-weight: 700;
655 transition: all 0.3s ease 0s;
656 }
657
658 .computer-btn:hover {
659 padding-left: 27px !important;
660 border: 1px solid #2f8cea !important;
661 color: white !important;
662 background: #2f8cea url("../images/computer.png") no-repeat scroll 7px -36px !important;
663 box-shadow: 0 1px 0 rgba(171, 171, 171, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15) !important;
664 box-shadow: none !important;
665 transition: all 0.3s ease 0s;
666 transition: all 0.3s ease;
667 }
668
669 .from-web {
670 margin-top: 0;
671 margin-bottom: 15px !important;
672 }
673
674 .from-web-btn {
675 padding-left: 25px !important;
676 border: medium none #646464 !important;
677 border: 1px solid #b0b0b0 !important;
678 color: #646464 !important;
679 background: #e6e6e6 url("../images/web.png") no-repeat scroll 7px 1px !important;
680 box-shadow: none !important;
681 font-family: "Open Sans",sans-serif;
682 font-weight: 700;
683 transition: all 0.3s ease 0s;
684 /*margin-left: 2px !important;*/
685 }
686
687 .from-web-btn:hover {
688 padding-left: 25px !important;
689 /*margin-left: 2px !important;*/
690 border: 1px solid #89b158 !important;
691 color: white !important;
692 background: #89b158 url("../images/web.png") no-repeat scroll 7px -38px !important;
693 box-shadow: none !important;
694 transition: all 0.3s ease 0s;
695 transition: all 0.3s ease;
696 }
697
698 .preview {
699 width: 100%;
700 }
701
702 #sidebar > ul > div.initial-screen > div {
703 padding: 0 20px;
704 }
705
706 .from-chart-btn {
707 padding-left: 25px !important;
708 border: medium none #646464 !important;
709 border: 1px solid #b0b0b0 !important;
710 color: #646464 !important;
711 background: #e6e6e6 url("../images/from_chart.png") no-repeat scroll 7px 1px !important;
712 box-shadow: none !important;
713 font-family: "Open Sans",sans-serif;
714 font-weight: 700;
715 transition: all 0.3s ease 0s;
716 /*margin-left: 2px !important;
717 margin-top: 2px !important;*/
718 }
719
720 .from-chart-btn:hover {
721 padding-left: 25px !important;
722 /*margin-left: 2px !important;*/
723 border: 1px solid #10aecb !important;
724 color: white !important;
725 background: #10aecb url("../images/from_chart.png") no-repeat scroll 7px -36px !important;
726 box-shadow: none !important;
727 transition: all 0.3s ease 0s;
728 transition: all 0.3s ease;
729 /*margin-top: 2px !important;*/
730 }
731
732 input#existing-chart {
733 /*left: 18px;
734 width: 110px;
735 position: relative;*/
736 }
737
738 select#chart-id {
739 float: right;
740 width: 146px;
741 margin-right: 14px;
742 }
743
744 button#editor-chart-button {
745 display: block;
746 margin: 0 auto;
747 border: 1px solid #2c80d6 !important;
748 color: white !important;
749 background-color: #2f8cea !important;
750 box-shadow: none !important;
751 text-shadow: none;
752 transition: all 0.3s ease;
753 }
754
755 .preview-btn {
756 border: 1px solid #2c80d6 !important;
757 color: white !important;
758 background-color: #2f8cea !important;
759 box-shadow: none !important;
760 font-family: "Open Sans",sans-serif;
761 font-weight: 700;
762 transition: all 0.3s ease;
763 }
764
765 .preview-btn:hover {
766 border: 1px solid #2c80d6 !important;
767 color: white !important;
768 background-color: #2c80d6 !important;
769 box-shadow: none !important;
770 font-family: "Open Sans",sans-serif;
771 font-weight: 700;
772 transition: all 0.3s ease;
773 }
774
775 .show-live-btn {
776 width: 100%;
777 margin-top: 15px !important;
778 border-color: #e98b00 !important;
779 background-color: #f90 !important;
780 box-shadow: none !important;
781 font-family: "Open Sans",sans-serif;
782 font-weight: 700;
783 }
784
785 .show-live-btn:hover {
786 width: 100%;
787 margin-top: 15px !important;
788 border-color: #e98b00 !important;
789 background-color: #ea8c00 !important;
790 box-shadow: none !important;
791 font-family: "Open Sans",sans-serif;
792 font-weight: 700;
793 transition: all 0.3s ease;
794 }
795
796 .check-pro-btn {
797 display: block;
798 width: 245px;
799 height: 40px;
800 margin: 0 auto;
801 }
802
803 .advanced-settings-btn,
804 .return-settings-btn {
805 display: block;
806 height: auto;
807 margin: 0 auto;
808 margin-top: 5px;
809 margin-bottom: 20px;
810 border-radius: 3px;
811 font-size: 17px;
812 line-height: 34px;
813 cursor: pointer;
814 }
815
816 .return-settings-btn {
817 width: 90%;
818 }
819
820 .advanced-settings-btn {
821 width: 100%;
822 }
823
824 .return-settings-btn {
825 margin: 10px auto;
826 }
827
828 .hidden-setting {
829 display: none;
830 }
831
832 .viz-select-library {
833 color: #0085ba;
834 }
835 .viz-select-library.viz-hide-libary {
836 display: none;
837 }
838
839 .viz-select-library option:first-child {
840 font-weight: bold;
841 }
842
843 /* ====== RESPONSIVE ====== */
844
845 @media (max-width: 1366px) {
846 #rate-stars {
847 margin: 3px 0 10px 40%;
848 }
849
850 .rate-the-plugin {
851 margin-left: -8%;
852 }
853 }
854
855 @media screen and (max-width: 782px) {
856 .button.button-primary.file-wrapper.computer-btn,
857 #remote-file,
858 #existing-chart {
859 height: 28px;
860 margin-bottom: 4px;
861 padding: 0 10px 1px;
862 font-size: 13px;
863 line-height: 26px;
864 vertical-align: middle;
865 }
866 }
867
868 #vz-chart-settings h2:hover,
869 #vz-chart-permissions h2:hover,
870 .sidebar-footer-link h2:hover,
871 #vz-chart-review a:hover {
872 text-decoration: none;
873 }
874
875 #vz-chart-review a {
876 color: #00a0d2;
877 text-decoration: none;
878 }
879
880 #vz-chart-settings h2,
881 #vz-chart-permissions h2,
882 .sidebar-footer-link h2,
883 #vz-chart-review h2 {
884 padding: 0;
885 border: none;
886 font-size: 12px;
887 font-weight: 400;
888 }
889
890 #vz-chart-review {
891 right: 0;
892 bottom: 10px;
893 box-sizing: border-box;
894 width: 40%;
895 padding-right: 6px;
896 text-align: right;
897 }
898
899 #vz-chart-settings.bottom-fixed h2 {
900 padding-left: 6px;
901 }
902
903 #vz-chart-settings {
904 bottom: 40px;
905 left: 0;
906 box-sizing: border-box;
907 width: 33%;
908 text-align: left;
909 }
910
911 #vz-chart-permissions:not(.open) h2 {
912 display: inline-block;
913 width: 100%;
914 margin: 0;
915 text-align: right;
916 }
917
918 #vz-chart-permissions {
919 right: 0;
920 bottom: 40px;
921 box-sizing: border-box;
922 width: 33%;
923 text-align: left;
924 }
925
926 #vz-chart-permissions h2,
927 #vz-chart-settings h2,
928 .sidebar-footer-link h2 {
929 display: inline;
930 color: #00a0d2;
931 background: none;
932 font-family: "Open Sans",sans-serif;
933 cursor: pointer;
934 }
935
936 .sidebar-footer-link,
937 #vz-chart-review,
938 #vz-chart-permissions,
939 #vz-chart-settings {
940 display: inline;
941 background: none;
942 cursor: pointer;
943 }
944
945 .sidebar-footer-link > ul,
946 #vz-chart-source > ul,
947 #vz-chart-permissions > ul,
948 #vz-chart-settings > ul {
949 position: relative;
950 z-index: 10;
951 border-bottom: 1px solid #ddd;
952 }
953
954 #vz-chart-copyright {
955 bottom: 10px;
956 text-align: center;
957 }
958
959 #sidebar {
960 border-left: 1px solid #ddd;
961 background: #f3f3f3;
962 }
963
964 #vz-chart-permissions.open h2 {
965 position: absolute;
966 right: 6px;
967 bottom: 28px;
968 left: auto;
969 width: 50%;
970 text-align: right;
971 }
972
973 #vz-chart-settings.open h2 {
974 position: absolute;
975 bottom: 28px;
976 left: 6px;
977 }
978
979 #vz-chart-permissions .viz-group-header,
980 #vz-chart-settings.open .viz-group-header {
981 display: block;
982 }
983
984 #vz-chart-permissions .viz-group-header,
985 #vz-chart-settings .viz-group-header {
986 display: none;
987 }
988
989 .sidebar-footer-link.open h2 {
990 position: absolute;
991 bottom: 28px;
992 left: 20px;
993 }
994
995 .sidebar-footer-link.open .viz-group-header {
996 display: block;
997 }
998
999 .sidebar-footer-link .viz-group-header {
1000 display: none;
1001 }
1002
1003 #vz-csv-file-form,
1004 #vz-one-time-import,
1005 #vz-schedule-import,
1006 #vz-permissions .only-pro-content,
1007 .edit-data-content {
1008 text-align: center;
1009 }
1010
1011 #csv-file {
1012 margin: 15px 0;
1013 padding: 0;
1014 }
1015
1016 .visualizer-input,
1017 .visualizer-select {
1018 width: 100%;
1019 margin: 0 0 15px;
1020 }
1021
1022 .viz-group .dashicons-lock {
1023 display: none;
1024 }
1025
1026 .only-pro-feature .dashicons-lock {
1027 display: inline;
1028 }
1029
1030 .viz-section-title .dashicons,
1031 .viz-group-title .dashicons {
1032 width: 18px;
1033 height: 18px;
1034 margin-left: 3px;
1035 font-size: 18px;
1036 }
1037
1038 .only-pro-feature input,
1039 .only-pro-feature button,
1040 .only-pro-feature select {
1041 cursor: not-allowed !important;
1042 pointer-events: none;
1043 }
1044
1045 .only-pro-feature > div {
1046 position: relative;
1047 }
1048
1049 .only-pro-content {
1050 position: absolute;
1051 top: 0;
1052 bottom: 0;
1053 left: 0;
1054 width: 100%;
1055 opacity: 0;
1056 background: rgba(253,253,253,0.9);
1057 transition: 0.5s ease;
1058 }
1059
1060 .only-pro-feature:hover .only-pro-content {
1061 opacity: 1;
1062 }
1063
1064 .only-pro-container {
1065 display: table;
1066 width: 100%;
1067 height: 100%;
1068 }
1069
1070 .only-pro-inner {
1071 display: table-cell;
1072 vertical-align: middle;
1073 }
1074
1075 .only-pro-content p {
1076 margin: 0 0 15px;
1077 font-size: 14px;
1078 font-weight: 700;
1079 }
1080
1081 .only-pro-content a {
1082 display: inline-block;
1083 padding: 7px 12px;
1084 color: #fff;
1085 background: #ff595e;
1086 font-weight: 600;
1087 text-decoration: none;
1088 text-transform: uppercase;
1089 transition: 0.1s ease;
1090 }
1091
1092 .only-pro-content a:hover {
1093 background: #ce484c;
1094 }
1095
1096 #sidebar::-webkit-scrollbar {
1097 width: 4px;
1098 }
1099
1100 #sidebar::-webkit-scrollbar-thumb {
1101 background: #999;
1102 }
1103
1104 span.viz-section-error {
1105 color: #ff000;
1106 }
1107
1108 #visualizer-error-manual {
1109 color: #ff595e;
1110 }
1111
1112 #vz-chart-permissions {
1113 width: 43%;
1114 }
1115
1116 #vz-chart-permissions {
1117 color: #ce484c;
1118 }
1119
1120 #vz-chart-permissions {
1121 right: 6px;
1122 bottom: 40px;
1123 width: 35%;
1124 }
1125
1126 #permissions-form .only-pro-feature > ul {
1127 position: relative;
1128 text-align: center;
1129 }
1130
1131 /******************************************************************************/
1132 /******************************** DB WIZARD ***********************************/
1133 /******************************************************************************/
1134 .db-wizard-condition .select-condition {
1135 display: none;
1136 }
1137
1138 .db-wizard-condition .select-condition.active {
1139 display: block;
1140 max-width: 50%;
1141 margin-top: 10px;
1142 padding-top: 10px;
1143 border-top: 1px solid #eee;
1144 font-weight: 500;
1145 }
1146
1147 .db-wizard-results {
1148 width: calc(100% - 350px);
1149 }
1150
1151 #db-wizard-form {
1152 padding: 25px;
1153 }
1154
1155 .db-wizard-query label {
1156 display: block;
1157 min-width: 150px;
1158 padding: 20px 0 5px;
1159 color: rgba(0,0,0,0.85);
1160 font-size: 18px;
1161 font-weight: 500;
1162 }
1163
1164 .db-wizard-query .db-wizard-where label,
1165 .db-wizard-query .db-wizard-from label {
1166 padding-top: 0;
1167 }
1168
1169 .db-wizard-query > div:not(:last-child) {
1170 margin-bottom: 15px;
1171 }
1172
1173 .db-wizard-query .select-condition > div {
1174 display: block;
1175 }
1176
1177 .db-wizard-query .chosen-container {
1178 width: auto;
1179 }
1180
1181 .db-wizard-query .chosen-container-single .chosen-single {
1182 border: 1px solid #ccc;
1183 background: #fff;
1184 box-shadow: none;
1185 font-size: 13px;
1186 font-weight: 500;
1187 }
1188
1189 .db-wizard-templates,
1190 .db-wizard-templates > div {
1191 display: block;
1192 }
1193
1194 .db-wizard-templates > div {
1195 box-sizing: border-box;
1196 width: 50%;
1197 margin-top: 20px;
1198 padding: 20px;
1199 border: 1px solid #efefef;
1200 }
1201
1202 .db-wizard-templates > div:first-child {
1203 margin-top: 0;
1204 }
1205
1206 .db-wizard-query .chosen-container-multi .chosen-choices {
1207 padding: 5px;
1208 border-color: #ccc;
1209 background: #fff;
1210 box-shadow: none;
1211 }
1212
1213 .db-wizard-results .dataTables_wrapper .dataTables_filter input,
1214 .db-wizard-query .select-condition-operand input,
1215 .db-wizard-limit input {
1216 width: 50%;
1217 padding-left: 7px;
1218 border: 1px solid #ccc;
1219 border-radius: 6px;
1220 background: #fff;
1221 box-shadow: none;
1222 font-size: 13px;
1223 }
1224
1225 .db-wizard-limit input {
1226 display: inline;
1227 width: 150px;
1228 margin: 0 0 20px 20px;
1229 }
1230
1231 .db-wizard-limit label {
1232 display: inline;
1233 }
1234
1235 .db-wizard-query .select-condition-operand input::-webkit-input-placeholder {
1236 color: #cdcdcd;
1237 }
1238
1239 .db-wizard-query .select-condition-operand input:-ms-input-placeholder {
1240 color: #cdcdcd;
1241 }
1242
1243 .db-wizard-query .select-condition-operand input::placeholder {
1244 color: #cdcdcd;
1245 }
1246
1247 .db-wizard-query .chosen-container-multi .chosen-choices li.search-choice {
1248 padding: 5px 30px 5px 5px;
1249 border-color: #ccc;
1250 background: #fff;
1251 box-shadow: none;
1252 font-weight: 600;
1253 }
1254
1255 .db-wizard-results table > thead > tr > th {
1256 padding: 15px 8px;
1257 border: none;
1258 color: #252422;
1259 background: #fff;
1260 font-size: 18px;
1261 font-weight: 500;
1262 text-align: left;
1263 }
1264
1265 .db-wizard-results table > tbody > tr > td,
1266 .dataTables_info {
1267 padding: 15px 8px;
1268 border-top: 1px solid #a2a2a2;
1269 color: #252422;
1270 font-size: 14px;
1271 font-weight: 300;
1272 }
1273
1274 .db-wizard-results table > tbody > tr.odd {
1275 background-color: #f7f7f7;
1276 }
1277
1278 .db-wizard-results table.dataTable.no-footer {
1279 border: none;
1280 }
1281
1282 .db-wizard-results .dataTables_wrapper .dataTables_info {
1283 border-top: 1px solid #ccc5b9;
1284 color: #a2a2a2;
1285 font-size: 12px;
1286 font-weight: 500;
1287 }
1288
1289 .db-wizard-results .dataTables_filter label {
1290 font-size: 18px;
1291 font-weight: 500;
1292 }
1293
1294 .db-wizard-where-template-remove,
1295 .db-wizard-where-template-add {
1296 width: auto;
1297 height: 25px;
1298 margin-top: 10px;
1299 border: none;
1300 border-radius: 3px;
1301 color: #fff;
1302 font-size: 12px;
1303 cursor: pointer;
1304 transition: 0.3s ease;
1305 }
1306
1307 .db-wizard-where-template-remove:hover,
1308 .db-wizard-where-template-add:hover {
1309 opacity: 0.8;
1310 }
1311
1312 .db-wizard-results .dataTables_wrapper .dataTables_filter {
1313 float: none;
1314 text-align: left;
1315 }
1316
1317 .db-wizard-where-template-add {
1318 background-color: #34a85e;
1319 }
1320
1321 .db-wizard-where-template-remove {
1322 background-color: #ff0d00;
1323 }
1324
1325 #db-query-form .CodeMirror-scroll {
1326 overflow: hidden !important;
1327 height: 50%;
1328 margin: 0;
1329 padding: 0;
1330 }
1331
1332 #db-query-form .CodeMirror-wrap {
1333 height: 200px;
1334 padding: 15px;
1335 color: #fff;
1336 background: #282923;
1337 font-size: 15px;
1338 }
1339
1340 #db-query-form .CodeMirror-wrap .CodeMirror-cursor {
1341 border-left: 1px solid #fff !important;
1342 }
1343
1344 #db-query-form .CodeMirror-wrap .CodeMirror-placeholder {
1345 color: #fff;
1346 }
1347
1348 #db-query-form .CodeMirror-wrap pre {
1349 color: #fff !important;
1350 }
1351
1352 #db-query-form .CodeMirror-wrap pre .cm-keyword {
1353 color: #f92472 !important;
1354 }
1355
1356 #db-query-form .CodeMirror-wrap pre .cm-comment {
1357 color: #74705d !important;
1358 }
1359
1360 #db-query-form .CodeMirror-wrap pre .cm-number,
1361 #db-query-form .CodeMirror-wrap pre .cm-string {
1362 color: #fff !important;
1363 }
1364
1365 .visualizer-db-query-form > div {
1366 display: block;
1367 width: 15%;
1368 vertical-align: middle;
1369 }
1370
1371 #visualizer-db-query {
1372 padding: 20px;
1373 }
1374
1375 .visualizer-db-query-form > div:first-child {
1376 width: 100%;
1377 margin-bottom: 20px;
1378 }
1379
1380 .db-wizard-error {
1381 color: #f00;
1382 }
1383
1384 .db-wizard-hints,
1385 .json-wizard-hints,
1386 .html-table-editor-hints {
1387 margin-bottom: 30px;
1388 color: #0085ba;
1389 }
1390
1391 .db-wizard-hints .visualizer-emboss,
1392 .db-wizard-hints a,
1393 .html-table-editor-hints a,
1394 .json-wizard-hints .visualizer-emboss,
1395 .json-wizard-hints a {
1396 color: #f92472;
1397 }
1398
1399 .db-wizard-hints ul,
1400 .html-table-editor-hints ul,
1401 .json-wizard-hints ul {
1402 list-style: square;
1403 }
1404
1405 .db-wizard-results .dataTables_wrapper .dataTables_info {
1406 width: calc(100% - 17px);
1407 }
1408
1409
1410 /******************************************************************************/
1411 /******************************** data tables *******************************/
1412 /******************************************************************************/
1413 .db-wizard-results .dt-button {
1414 display: none !important;
1415 }
1416
1417 .dt-button.buttons-print {
1418 display: none;
1419 }
1420
1421 /******************************************************************************/
1422 /******************************** json table *********************************/
1423 /******************************************************************************/
1424 #json-conclude-form .results {
1425 min-width: 10px !important;
1426 }
1427
1428 #json-conclude-form .json-table {
1429 width: 85%;
1430 }
1431
1432 #vz-import-json-url,
1433 #vz-import-json-root,
1434 #vz-import-json-paging {
1435 width: 75%;
1436 }
1437
1438 #json-conclude-form .json-table,
1439 #json-conclude-form button#visualizer-json-conclude {
1440 display: inline-block;
1441 vertical-align: middle;
1442 }
1443
1444 .viz-editor-table tbody tr:first-child {
1445 background-color: #ececec !important;
1446 }
1447
1448 .viz-editor-table tr th {
1449 background-color: #cccccc;
1450 }
1451
1452 .viz-editor-table thead tr th:nth-child(n+1) {
1453 cursor: move !important;
1454 }
1455
1456 #json-conclude-form .json-wizard-hints .info,
1457 .html-table-editor-hints .info {
1458 margin: 1% 0px;
1459 }
1460
1461 .viz-step.ui-state-active {
1462 border-color: #0085BA !important;
1463 background: #0085BA !important;
1464 color: #ffffff;
1465 }
1466
1467 .viz-substep {
1468 outline: 0 !important;
1469 border: 0 !important;
1470 background: none !important;
1471 text-transform: uppercase;
1472 }
1473
1474 .viz-substep.ui-state-active {
1475 }
1476
1477 .viz-substep ~ .ui-accordion-content {
1478 outline: 0 !important;
1479 border: 0 !important;
1480 font-size: smaller;
1481 }
1482
1483 .viz-substep ~ div {
1484 display: table;
1485 }
1486
1487 .viz-substep ~ div > div {
1488 display: table-row;
1489 }
1490
1491 .viz-substep ~ div > div div {
1492 display: table-cell;
1493 padding: 5px;
1494 }
1495
1496 .json-wizard-header .field-title {
1497 position: absolute;
1498 left: 30px;
1499 }
1500 /******************************************************************************/
1501 /******************************** html table editor **************************/
1502 /******************************************************************************/
1503 .viz-simple-editor-type,
1504 .viz-simple-editor {
1505 display: none;
1506 }
1507
1508 .viz-table-editor {
1509 width: 75%;
1510 margin-left: 2%;
1511 }
1512
1513 .viz-html-table,
1514 button#visualizer-save-html-table {
1515 display: inline-block;
1516 vertical-align: middle;
1517 }
1518
1519
1520 /******************************************************************************/
1521 /******************************** text area editor **************************/
1522 /******************************************************************************/
1523 .viz-text-editor {
1524 padding: 20px;
1525 z-index: 9999;
1526 box-sizing: border-box;
1527 padding-right: 320px;
1528 }
1529
1530 .viz-text-editor textarea {
1531 width: 85%;
1532 overflow: auto;
1533 background: #282923;
1534 color: #ffffff;
1535 padding: 15px;
1536 height: 400px;
1537 font-size: 15px;
1538 }
1539
1540 .viz-text-editor textarea,
1541 button#viz-text-editor-button {
1542 display: inline-block;
1543 vertical-align: middle;
1544 }
1545
1546 .viz-simple-editor .viz-html-table {
1547 width: 95%;
1548 }
1549
1550 /******************************************************************************/
1551 /******************************** chartjs ***********************************/
1552 /******************************************************************************/
1553
1554 canvas.chartjs-render-monitor {
1555 height: 500px !important;
1556 }
1557
1558 /******************************************************************************/
1559 /******************************** Frontend Actions ***********************************/
1560 /******************************************************************************/
1561 #vz-frontend-actions .only-pro-inner, #vz-data-controls .only-pro-inner {
1562 text-align: center;
1563 }