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

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