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

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