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

1,569 lines 28.5 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: #3F57E1;
1086 font-weight: 600;
1087 text-decoration: none;
1088 transition: 0.1s ease;
1089 border-width: 1px;
1090 border-style: solid;
1091 border-radius: 3px;
1092 }
1093 .only-pro-content .only-pro-container a {
1094 color: #fff !important;
1095 }
1096
1097 .only-pro-content a:hover {
1098 background: #2D419B;
1099 }
1100
1101 #sidebar::-webkit-scrollbar {
1102 width: 4px;
1103 }
1104
1105 #sidebar::-webkit-scrollbar-thumb {
1106 background: #999;
1107 }
1108
1109 span.viz-section-error {
1110 color: #ff000;
1111 }
1112
1113 #visualizer-error-manual {
1114 color: #ff595e;
1115 }
1116
1117 #vz-chart-permissions {
1118 width: 43%;
1119 }
1120
1121 #vz-chart-permissions {
1122 color: #ce484c;
1123 }
1124
1125 #vz-chart-permissions {
1126 right: 6px;
1127 bottom: 40px;
1128 width: 35%;
1129 }
1130
1131 #permissions-form .only-pro-feature > ul {
1132 position: relative;
1133 text-align: center;
1134 }
1135
1136 /******************************************************************************/
1137 /******************************** DB WIZARD ***********************************/
1138 /******************************************************************************/
1139 .db-wizard-condition .select-condition {
1140 display: none;
1141 }
1142
1143 .db-wizard-condition .select-condition.active {
1144 display: block;
1145 max-width: 50%;
1146 margin-top: 10px;
1147 padding-top: 10px;
1148 border-top: 1px solid #eee;
1149 font-weight: 500;
1150 }
1151
1152 .db-wizard-results {
1153 width: calc(100% - 350px);
1154 }
1155
1156 #db-wizard-form {
1157 padding: 25px;
1158 }
1159
1160 .db-wizard-query label {
1161 display: block;
1162 min-width: 150px;
1163 padding: 20px 0 5px;
1164 color: rgba(0,0,0,0.85);
1165 font-size: 18px;
1166 font-weight: 500;
1167 }
1168
1169 .db-wizard-query .db-wizard-where label,
1170 .db-wizard-query .db-wizard-from label {
1171 padding-top: 0;
1172 }
1173
1174 .db-wizard-query > div:not(:last-child) {
1175 margin-bottom: 15px;
1176 }
1177
1178 .db-wizard-query .select-condition > div {
1179 display: block;
1180 }
1181
1182 .db-wizard-query .chosen-container {
1183 width: auto;
1184 }
1185
1186 .db-wizard-query .chosen-container-single .chosen-single {
1187 border: 1px solid #ccc;
1188 background: #fff;
1189 box-shadow: none;
1190 font-size: 13px;
1191 font-weight: 500;
1192 }
1193
1194 .db-wizard-templates,
1195 .db-wizard-templates > div {
1196 display: block;
1197 }
1198
1199 .db-wizard-templates > div {
1200 box-sizing: border-box;
1201 width: 50%;
1202 margin-top: 20px;
1203 padding: 20px;
1204 border: 1px solid #efefef;
1205 }
1206
1207 .db-wizard-templates > div:first-child {
1208 margin-top: 0;
1209 }
1210
1211 .db-wizard-query .chosen-container-multi .chosen-choices {
1212 padding: 5px;
1213 border-color: #ccc;
1214 background: #fff;
1215 box-shadow: none;
1216 }
1217
1218 .db-wizard-results .dataTables_wrapper .dataTables_filter input,
1219 .db-wizard-query .select-condition-operand input,
1220 .db-wizard-limit input {
1221 width: 50%;
1222 padding-left: 7px;
1223 border: 1px solid #ccc;
1224 border-radius: 6px;
1225 background: #fff;
1226 box-shadow: none;
1227 font-size: 13px;
1228 }
1229
1230 .db-wizard-limit input {
1231 display: inline;
1232 width: 150px;
1233 margin: 0 0 20px 20px;
1234 }
1235
1236 .db-wizard-limit label {
1237 display: inline;
1238 }
1239
1240 .db-wizard-query .select-condition-operand input::-webkit-input-placeholder {
1241 color: #cdcdcd;
1242 }
1243
1244 .db-wizard-query .select-condition-operand input:-ms-input-placeholder {
1245 color: #cdcdcd;
1246 }
1247
1248 .db-wizard-query .select-condition-operand input::placeholder {
1249 color: #cdcdcd;
1250 }
1251
1252 .db-wizard-query .chosen-container-multi .chosen-choices li.search-choice {
1253 padding: 5px 30px 5px 5px;
1254 border-color: #ccc;
1255 background: #fff;
1256 box-shadow: none;
1257 font-weight: 600;
1258 }
1259
1260 .db-wizard-results table > thead > tr > th {
1261 padding: 15px 8px;
1262 border: none;
1263 color: #252422;
1264 background: #fff;
1265 font-size: 18px;
1266 font-weight: 500;
1267 text-align: left;
1268 }
1269
1270 .db-wizard-results table > tbody > tr > td,
1271 .dataTables_info {
1272 padding: 15px 8px;
1273 border-top: 1px solid #a2a2a2;
1274 color: #252422;
1275 font-size: 14px;
1276 font-weight: 300;
1277 }
1278
1279 .db-wizard-results table > tbody > tr.odd {
1280 background-color: #f7f7f7;
1281 }
1282
1283 .db-wizard-results table.dataTable.no-footer {
1284 border: none;
1285 }
1286
1287 .db-wizard-results .dataTables_wrapper .dataTables_info {
1288 border-top: 1px solid #ccc5b9;
1289 color: #a2a2a2;
1290 font-size: 12px;
1291 font-weight: 500;
1292 }
1293
1294 .db-wizard-results .dataTables_filter label {
1295 font-size: 18px;
1296 font-weight: 500;
1297 }
1298
1299 .db-wizard-where-template-remove,
1300 .db-wizard-where-template-add {
1301 width: auto;
1302 height: 25px;
1303 margin-top: 10px;
1304 border: none;
1305 border-radius: 3px;
1306 color: #fff;
1307 font-size: 12px;
1308 cursor: pointer;
1309 transition: 0.3s ease;
1310 }
1311
1312 .db-wizard-where-template-remove:hover,
1313 .db-wizard-where-template-add:hover {
1314 opacity: 0.8;
1315 }
1316
1317 .db-wizard-results .dataTables_wrapper .dataTables_filter {
1318 float: none;
1319 text-align: left;
1320 }
1321
1322 .db-wizard-where-template-add {
1323 background-color: #34a85e;
1324 }
1325
1326 .db-wizard-where-template-remove {
1327 background-color: #ff0d00;
1328 }
1329
1330 #db-query-form .CodeMirror-scroll {
1331 overflow: hidden !important;
1332 height: 50%;
1333 margin: 0;
1334 padding: 0;
1335 }
1336
1337 #db-query-form .CodeMirror-wrap {
1338 height: 200px;
1339 padding: 15px;
1340 color: #fff;
1341 background: #282923;
1342 font-size: 15px;
1343 }
1344
1345 #db-query-form .CodeMirror-wrap .CodeMirror-cursor {
1346 border-left: 1px solid #fff !important;
1347 }
1348
1349 #db-query-form .CodeMirror-wrap .CodeMirror-placeholder {
1350 color: #fff;
1351 }
1352
1353 #db-query-form .CodeMirror-wrap pre {
1354 color: #fff !important;
1355 }
1356
1357 #db-query-form .CodeMirror-wrap pre .cm-keyword {
1358 color: #f92472 !important;
1359 }
1360
1361 #db-query-form .CodeMirror-wrap pre .cm-comment {
1362 color: #74705d !important;
1363 }
1364
1365 #db-query-form .CodeMirror-wrap pre .cm-number,
1366 #db-query-form .CodeMirror-wrap pre .cm-string {
1367 color: #fff !important;
1368 }
1369
1370 .visualizer-db-query-form > div {
1371 display: block;
1372 width: 15%;
1373 vertical-align: middle;
1374 }
1375
1376 #visualizer-db-query {
1377 padding: 20px;
1378 }
1379
1380 .visualizer-db-query-form > div:first-child {
1381 width: 100%;
1382 margin-bottom: 20px;
1383 }
1384
1385 .db-wizard-error {
1386 color: #f00;
1387 }
1388
1389 .db-wizard-hints,
1390 .json-wizard-hints,
1391 .html-table-editor-hints {
1392 margin-bottom: 30px;
1393 color: #0085ba;
1394 }
1395
1396 .db-wizard-hints .visualizer-emboss,
1397 .db-wizard-hints a,
1398 .html-table-editor-hints a,
1399 .json-wizard-hints .visualizer-emboss,
1400 .json-wizard-hints a {
1401 color: #f92472;
1402 }
1403
1404 .db-wizard-hints ul,
1405 .html-table-editor-hints ul,
1406 .json-wizard-hints ul {
1407 list-style: square;
1408 }
1409
1410 .db-wizard-results .dataTables_wrapper .dataTables_info {
1411 width: calc(100% - 17px);
1412 }
1413
1414
1415 /******************************************************************************/
1416 /******************************** data tables *******************************/
1417 /******************************************************************************/
1418 .db-wizard-results .dt-button {
1419 display: none !important;
1420 }
1421
1422 .dt-button.buttons-print {
1423 display: none;
1424 }
1425
1426 /******************************************************************************/
1427 /******************************** json table *********************************/
1428 /******************************************************************************/
1429 #json-conclude-form .results {
1430 min-width: 10px !important;
1431 }
1432
1433 #json-conclude-form .json-table {
1434 width: 85%;
1435 }
1436
1437 #vz-import-json-url,
1438 #vz-import-json-root,
1439 #vz-import-json-paging {
1440 width: 75%;
1441 }
1442
1443 #json-conclude-form .json-table,
1444 #json-conclude-form button#visualizer-json-conclude {
1445 display: inline-block;
1446 vertical-align: middle;
1447 }
1448
1449 .viz-editor-table tbody tr:first-child {
1450 background-color: #ececec !important;
1451 }
1452
1453 .viz-editor-table tr th {
1454 background-color: #cccccc;
1455 }
1456
1457 .viz-editor-table thead tr th:nth-child(n+1) {
1458 cursor: move !important;
1459 }
1460
1461 #json-conclude-form .json-wizard-hints .info,
1462 .html-table-editor-hints .info {
1463 margin: 1% 0px;
1464 }
1465
1466 .viz-step.ui-state-active {
1467 border-color: #0085BA !important;
1468 background: #0085BA !important;
1469 color: #ffffff;
1470 }
1471
1472 .viz-substep {
1473 outline: 0 !important;
1474 border: 0 !important;
1475 background: none !important;
1476 text-transform: uppercase;
1477 }
1478
1479 .viz-substep.ui-state-active {
1480 }
1481
1482 .viz-substep ~ .ui-accordion-content {
1483 outline: 0 !important;
1484 border: 0 !important;
1485 font-size: smaller;
1486 }
1487
1488 .viz-substep ~ div {
1489 display: table;
1490 }
1491
1492 .viz-substep ~ div > div {
1493 display: table-row;
1494 }
1495
1496 .viz-substep ~ div > div div {
1497 display: table-cell;
1498 padding: 5px;
1499 }
1500
1501 .json-wizard-header .field-title {
1502 position: absolute;
1503 left: 30px;
1504 }
1505 /******************************************************************************/
1506 /******************************** html table editor **************************/
1507 /******************************************************************************/
1508 .viz-simple-editor-type,
1509 .viz-simple-editor {
1510 display: none;
1511 }
1512
1513 .viz-table-editor {
1514 width: 75%;
1515 margin-left: 2%;
1516 }
1517
1518 .viz-html-table,
1519 button#visualizer-save-html-table {
1520 display: inline-block;
1521 vertical-align: middle;
1522 }
1523
1524
1525 /******************************************************************************/
1526 /******************************** text area editor **************************/
1527 /******************************************************************************/
1528 .viz-text-editor {
1529 padding: 20px;
1530 z-index: 9999;
1531 box-sizing: border-box;
1532 padding-right: 320px;
1533 }
1534
1535 .viz-text-editor textarea {
1536 width: 85%;
1537 overflow: auto;
1538 background: #282923;
1539 color: #ffffff;
1540 padding: 15px;
1541 height: 400px;
1542 font-size: 15px;
1543 }
1544
1545 .viz-text-editor textarea,
1546 button#viz-text-editor-button {
1547 display: inline-block;
1548 vertical-align: middle;
1549 }
1550
1551 .viz-simple-editor .viz-html-table {
1552 width: 95%;
1553 }
1554
1555 /******************************************************************************/
1556 /******************************** chartjs ***********************************/
1557 /******************************************************************************/
1558
1559 canvas.chartjs-render-monitor {
1560 height: 500px !important;
1561 }
1562
1563 /******************************************************************************/
1564 /******************************** Frontend Actions ***********************************/
1565 /******************************************************************************/
1566 #vz-frontend-actions .only-pro-inner, #vz-data-controls .only-pro-inner {
1567 text-align: center;
1568 }
1569