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

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