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

1,533 lines 27.7 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 .viz-select-library.viz-hide-libary {
810 display: none;
811 }
812
813 .viz-select-library option:first-child {
814 font-weight: bold;
815 }
816
817 /* ====== RESPONSIVE ====== */
818
819 @media (max-width: 1366px) {
820 #rate-stars {
821 margin: 3px 0 10px 40%;
822 }
823
824 .rate-the-plugin {
825 margin-left: -8%;
826 }
827 }
828
829 @media screen and (max-width: 782px) {
830 .button.button-primary.file-wrapper.computer-btn,
831 #remote-file,
832 #existing-chart {
833 height: 28px;
834 margin-bottom: 4px;
835 padding: 0 10px 1px;
836 font-size: 13px;
837 line-height: 26px;
838 vertical-align: middle;
839 }
840 }
841
842 #vz-chart-settings h2:hover,
843 #vz-chart-permissions h2:hover,
844 .sidebar-footer-link h2:hover,
845 #vz-chart-review a:hover {
846 text-decoration: none;
847 }
848
849 #vz-chart-review a {
850 color: #00a0d2;
851 text-decoration: none;
852 }
853
854 #vz-chart-settings h2,
855 #vz-chart-permissions h2,
856 .sidebar-footer-link h2,
857 #vz-chart-review h2 {
858 padding: 0;
859 border: none;
860 font-size: 12px;
861 font-weight: 400;
862 }
863
864 #vz-chart-review {
865 right: 0;
866 bottom: 10px;
867 box-sizing: border-box;
868 width: 40%;
869 padding-right: 6px;
870 text-align: right;
871 }
872
873 #vz-chart-settings.bottom-fixed h2 {
874 padding-left: 6px;
875 }
876
877 #vz-chart-settings {
878 bottom: 40px;
879 left: 0;
880 box-sizing: border-box;
881 width: 33%;
882 text-align: left;
883 }
884
885 #vz-chart-permissions:not(.open) h2 {
886 display: inline-block;
887 width: 100%;
888 margin: 0;
889 text-align: right;
890 }
891
892 #vz-chart-permissions {
893 right: 0;
894 bottom: 40px;
895 box-sizing: border-box;
896 width: 33%;
897 text-align: left;
898 }
899
900 #vz-chart-permissions h2,
901 #vz-chart-settings h2,
902 .sidebar-footer-link h2 {
903 display: inline;
904 color: #00a0d2;
905 background: none;
906 font-family: "Open Sans",sans-serif;
907 cursor: pointer;
908 }
909
910 .sidebar-footer-link,
911 #vz-chart-review,
912 #vz-chart-permissions,
913 #vz-chart-settings {
914 display: inline;
915 background: none;
916 cursor: pointer;
917 }
918
919 .sidebar-footer-link > ul,
920 #vz-chart-source > ul,
921 #vz-chart-permissions > ul,
922 #vz-chart-settings > ul {
923 position: relative;
924 z-index: 10;
925 border-bottom: 1px solid #ddd;
926 }
927
928 #vz-chart-copyright {
929 bottom: 10px;
930 text-align: center;
931 }
932
933 #sidebar {
934 border-left: 1px solid #ddd;
935 background: #f3f3f3;
936 }
937
938 #vz-chart-permissions.open h2 {
939 position: absolute;
940 right: 6px;
941 bottom: 28px;
942 left: auto;
943 width: 50%;
944 text-align: right;
945 }
946
947 #vz-chart-settings.open h2 {
948 position: absolute;
949 bottom: 28px;
950 left: 6px;
951 }
952
953 #vz-chart-permissions .viz-group-header,
954 #vz-chart-settings.open .viz-group-header {
955 display: block;
956 }
957
958 #vz-chart-permissions .viz-group-header,
959 #vz-chart-settings .viz-group-header {
960 display: none;
961 }
962
963 .sidebar-footer-link.open h2 {
964 position: absolute;
965 bottom: 28px;
966 left: 20px;
967 }
968
969 .sidebar-footer-link.open .viz-group-header {
970 display: block;
971 }
972
973 .sidebar-footer-link .viz-group-header {
974 display: none;
975 }
976
977 #vz-csv-file-form,
978 #vz-one-time-import,
979 #vz-schedule-import,
980 #vz-permissions .only-pro-content,
981 .edit-data-content {
982 text-align: center;
983 }
984
985 #csv-file {
986 margin: 15px 0;
987 padding: 0;
988 }
989
990 .visualizer-input,
991 .visualizer-select {
992 width: 100%;
993 margin: 0 0 15px;
994 }
995
996 .viz-group .dashicons-lock {
997 display: none;
998 }
999
1000 .only-pro-feature .dashicons-lock {
1001 display: inline;
1002 }
1003
1004 .viz-section-title .dashicons,
1005 .viz-group-title .dashicons {
1006 width: 18px;
1007 height: 18px;
1008 margin-left: 3px;
1009 font-size: 18px;
1010 }
1011
1012 .only-pro-feature input,
1013 .only-pro-feature button,
1014 .only-pro-feature select {
1015 cursor: not-allowed !important;
1016 pointer-events: none;
1017 }
1018
1019 .only-pro-feature > div {
1020 position: relative;
1021 }
1022
1023 .only-pro-content {
1024 position: absolute;
1025 top: 0;
1026 bottom: 0;
1027 left: 0;
1028 width: 100%;
1029 opacity: 0;
1030 background: rgba(253,253,253,0.9);
1031 transition: 0.5s ease;
1032 }
1033
1034 .only-pro-feature:hover .only-pro-content {
1035 opacity: 1;
1036 }
1037
1038 .only-pro-container {
1039 display: table;
1040 width: 100%;
1041 height: 100%;
1042 }
1043
1044 .only-pro-inner {
1045 display: table-cell;
1046 vertical-align: middle;
1047 }
1048
1049 .only-pro-content p {
1050 margin: 0 0 15px;
1051 font-size: 14px;
1052 font-weight: 700;
1053 }
1054
1055 .only-pro-content a {
1056 display: inline-block;
1057 padding: 7px 12px;
1058 color: #fff;
1059 background: #ff595e;
1060 font-weight: 600;
1061 text-decoration: none;
1062 text-transform: uppercase;
1063 transition: 0.1s ease;
1064 }
1065
1066 .only-pro-content a:hover {
1067 background: #ce484c;
1068 }
1069
1070 #sidebar::-webkit-scrollbar {
1071 width: 4px;
1072 }
1073
1074 #sidebar::-webkit-scrollbar-thumb {
1075 background: #999;
1076 }
1077
1078 span.viz-section-error {
1079 color: #ff000;
1080 }
1081
1082 #visualizer-error-manual {
1083 color: #ff595e;
1084 }
1085
1086 #vz-chart-permissions {
1087 width: 43%;
1088 }
1089
1090 #vz-chart-permissions {
1091 color: #ce484c;
1092 }
1093
1094 #vz-chart-permissions {
1095 right: 6px;
1096 bottom: 40px;
1097 width: 35%;
1098 }
1099
1100 #permissions-form .only-pro-feature > ul {
1101 position: relative;
1102 text-align: center;
1103 }
1104
1105 /******************************************************************************/
1106 /******************************** DB WIZARD ***********************************/
1107 /******************************************************************************/
1108 .db-wizard-condition .select-condition {
1109 display: none;
1110 }
1111
1112 .db-wizard-condition .select-condition.active {
1113 display: block;
1114 max-width: 50%;
1115 margin-top: 10px;
1116 padding-top: 10px;
1117 border-top: 1px solid #eee;
1118 font-weight: 500;
1119 }
1120
1121 .db-wizard-results {
1122 width: calc(100% - 350px);
1123 }
1124
1125 #db-wizard-form {
1126 padding: 25px;
1127 }
1128
1129 .db-wizard-query label {
1130 display: block;
1131 min-width: 150px;
1132 padding: 20px 0 5px;
1133 color: rgba(0,0,0,0.85);
1134 font-size: 18px;
1135 font-weight: 500;
1136 }
1137
1138 .db-wizard-query .db-wizard-where label,
1139 .db-wizard-query .db-wizard-from label {
1140 padding-top: 0;
1141 }
1142
1143 .db-wizard-query > div:not(:last-child) {
1144 margin-bottom: 15px;
1145 }
1146
1147 .db-wizard-query .select-condition > div {
1148 display: block;
1149 }
1150
1151 .db-wizard-query .chosen-container {
1152 width: auto;
1153 }
1154
1155 .db-wizard-query .chosen-container-single .chosen-single {
1156 border: 1px solid #ccc;
1157 background: #fff;
1158 box-shadow: none;
1159 font-size: 13px;
1160 font-weight: 500;
1161 }
1162
1163 .db-wizard-templates,
1164 .db-wizard-templates > div {
1165 display: block;
1166 }
1167
1168 .db-wizard-templates > div {
1169 box-sizing: border-box;
1170 width: 50%;
1171 margin-top: 20px;
1172 padding: 20px;
1173 border: 1px solid #efefef;
1174 }
1175
1176 .db-wizard-templates > div:first-child {
1177 margin-top: 0;
1178 }
1179
1180 .db-wizard-query .chosen-container-multi .chosen-choices {
1181 padding: 5px;
1182 border-color: #ccc;
1183 background: #fff;
1184 box-shadow: none;
1185 }
1186
1187 .db-wizard-results .dataTables_wrapper .dataTables_filter input,
1188 .db-wizard-query .select-condition-operand input,
1189 .db-wizard-limit input {
1190 width: 50%;
1191 padding-left: 7px;
1192 border: 1px solid #ccc;
1193 border-radius: 6px;
1194 background: #fff;
1195 box-shadow: none;
1196 font-size: 13px;
1197 }
1198
1199 .db-wizard-limit input {
1200 display: inline;
1201 width: 150px;
1202 margin: 0 0 20px 20px;
1203 }
1204
1205 .db-wizard-limit label {
1206 display: inline;
1207 }
1208
1209 .db-wizard-query .select-condition-operand input::-webkit-input-placeholder {
1210 color: #cdcdcd;
1211 }
1212
1213 .db-wizard-query .select-condition-operand input:-ms-input-placeholder {
1214 color: #cdcdcd;
1215 }
1216
1217 .db-wizard-query .select-condition-operand input::placeholder {
1218 color: #cdcdcd;
1219 }
1220
1221 .db-wizard-query .chosen-container-multi .chosen-choices li.search-choice {
1222 padding: 5px 30px 5px 5px;
1223 border-color: #ccc;
1224 background: #fff;
1225 box-shadow: none;
1226 font-weight: 600;
1227 }
1228
1229 .db-wizard-results table > thead > tr > th {
1230 padding: 15px 8px;
1231 border: none;
1232 color: #252422;
1233 background: #fff;
1234 font-size: 18px;
1235 font-weight: 500;
1236 text-align: left;
1237 }
1238
1239 .db-wizard-results table > tbody > tr > td,
1240 .dataTables_info {
1241 padding: 15px 8px;
1242 border-top: 1px solid #a2a2a2;
1243 color: #252422;
1244 font-size: 14px;
1245 font-weight: 300;
1246 }
1247
1248 .db-wizard-results table > tbody > tr.odd {
1249 background-color: #f7f7f7;
1250 }
1251
1252 .db-wizard-results table.dataTable.no-footer {
1253 border: none;
1254 }
1255
1256 .db-wizard-results .dataTables_wrapper .dataTables_info {
1257 border-top: 1px solid #ccc5b9;
1258 color: #a2a2a2;
1259 font-size: 12px;
1260 font-weight: 500;
1261 }
1262
1263 .db-wizard-results .dataTables_filter label {
1264 font-size: 18px;
1265 font-weight: 500;
1266 }
1267
1268 .db-wizard-where-template-remove,
1269 .db-wizard-where-template-add {
1270 width: auto;
1271 height: 25px;
1272 margin-top: 10px;
1273 border: none;
1274 border-radius: 3px;
1275 color: #fff;
1276 font-size: 12px;
1277 cursor: pointer;
1278 transition: 0.3s ease;
1279 }
1280
1281 .db-wizard-where-template-remove:hover,
1282 .db-wizard-where-template-add:hover {
1283 opacity: 0.8;
1284 }
1285
1286 .db-wizard-results .dataTables_wrapper .dataTables_filter {
1287 float: none;
1288 text-align: left;
1289 }
1290
1291 .db-wizard-where-template-add {
1292 background-color: #34a85e;
1293 }
1294
1295 .db-wizard-where-template-remove {
1296 background-color: #ff0d00;
1297 }
1298
1299 #db-query-form .CodeMirror-scroll {
1300 overflow: hidden !important;
1301 height: 50%;
1302 margin: 0;
1303 padding: 0;
1304 }
1305
1306 #db-query-form .CodeMirror-wrap {
1307 height: 200px;
1308 padding: 15px;
1309 color: #fff;
1310 background: #282923;
1311 font-size: 15px;
1312 }
1313
1314 #db-query-form .CodeMirror-wrap .CodeMirror-cursor {
1315 border-left: 1px solid #fff !important;
1316 }
1317
1318 #db-query-form .CodeMirror-wrap .CodeMirror-placeholder {
1319 color: #fff;
1320 }
1321
1322 #db-query-form .CodeMirror-wrap pre {
1323 color: #fff !important;
1324 }
1325
1326 #db-query-form .CodeMirror-wrap pre .cm-keyword {
1327 color: #f92472 !important;
1328 }
1329
1330 #db-query-form .CodeMirror-wrap pre .cm-comment {
1331 color: #74705d !important;
1332 }
1333
1334 #db-query-form .CodeMirror-wrap pre .cm-number,
1335 #db-query-form .CodeMirror-wrap pre .cm-string {
1336 color: #fff !important;
1337 }
1338
1339 .visualizer-db-query-form > div {
1340 display: block;
1341 width: 15%;
1342 vertical-align: middle;
1343 }
1344
1345 #visualizer-db-query {
1346 padding: 20px;
1347 }
1348
1349 .visualizer-db-query-form > div:first-child {
1350 width: 100%;
1351 margin-bottom: 20px;
1352 }
1353
1354 .db-wizard-error {
1355 color: #f00;
1356 }
1357
1358 .db-wizard-hints,
1359 .json-wizard-hints,
1360 .html-table-editor-hints {
1361 margin-bottom: 30px;
1362 color: #0085ba;
1363 }
1364
1365 .db-wizard-hints .visualizer-emboss,
1366 .db-wizard-hints a,
1367 .html-table-editor-hints a,
1368 .json-wizard-hints .visualizer-emboss,
1369 .json-wizard-hints a {
1370 color: #f92472;
1371 }
1372
1373 .db-wizard-hints ul,
1374 .html-table-editor-hints ul,
1375 .json-wizard-hints ul {
1376 list-style: square;
1377 }
1378
1379 .db-wizard-results .dataTables_wrapper .dataTables_info {
1380 width: calc(100% - 17px);
1381 }
1382
1383
1384 /******************************************************************************/
1385 /******************************** data tables *******************************/
1386 /******************************************************************************/
1387 .db-wizard-results .dt-button {
1388 display: none !important;
1389 }
1390
1391 .dt-button.buttons-print {
1392 display: none;
1393 }
1394
1395 /******************************************************************************/
1396 /******************************** json table *********************************/
1397 /******************************************************************************/
1398 #json-conclude-form .results {
1399 min-width: 10px !important;
1400 }
1401
1402 #json-conclude-form .json-table {
1403 width: 85%;
1404 }
1405
1406 #vz-import-json-url,
1407 #vz-import-json-root,
1408 #vz-import-json-paging {
1409 width: 75%;
1410 }
1411
1412 #json-conclude-form .json-table,
1413 #json-conclude-form button#visualizer-json-conclude {
1414 display: inline-block;
1415 vertical-align: middle;
1416 }
1417
1418 .viz-editor-table tbody tr:first-child {
1419 background-color: #ececec !important;
1420 }
1421
1422 .viz-editor-table tr th {
1423 background-color: #cccccc;
1424 }
1425
1426 .viz-editor-table thead tr th:nth-child(n+1) {
1427 cursor: move !important;
1428 }
1429
1430 #json-conclude-form .json-wizard-hints .info,
1431 .html-table-editor-hints .info {
1432 margin: 1% 0px;
1433 }
1434
1435 .viz-step.ui-state-active {
1436 border-color: #0085BA !important;
1437 background: #0085BA !important;
1438 color: #ffffff;
1439 }
1440
1441 .viz-substep {
1442 outline: 0 !important;
1443 border: 0 !important;
1444 background: none !important;
1445 text-transform: uppercase;
1446 }
1447
1448 .viz-substep.ui-state-active {
1449 }
1450
1451 .viz-substep ~ .ui-accordion-content {
1452 outline: 0 !important;
1453 border: 0 !important;
1454 font-size: smaller;
1455 }
1456
1457 .viz-substep ~ div {
1458 display: table;
1459 }
1460
1461 .viz-substep ~ div > div {
1462 display: table-row;
1463 }
1464
1465 .viz-substep ~ div > div div {
1466 display: table-cell;
1467 padding: 5px;
1468 }
1469
1470 .json-wizard-header .field-title {
1471 position: absolute;
1472 left: 30px;
1473 }
1474 /******************************************************************************/
1475 /******************************** html table editor **************************/
1476 /******************************************************************************/
1477 .viz-simple-editor-type,
1478 .viz-simple-editor {
1479 display: none;
1480 }
1481
1482 .viz-table-editor {
1483 width: 75%;
1484 margin-left: 2%;
1485 }
1486
1487 .viz-html-table,
1488 button#visualizer-save-html-table {
1489 display: inline-block;
1490 vertical-align: middle;
1491 }
1492
1493
1494 /******************************************************************************/
1495 /******************************** text area editor **************************/
1496 /******************************************************************************/
1497 .viz-text-editor {
1498 padding: 20px;
1499 z-index: 9999;
1500 box-sizing: border-box;
1501 padding-right: 320px;
1502 }
1503
1504 .viz-text-editor textarea {
1505 width: 85%;
1506 overflow: auto;
1507 background: #282923;
1508 color: #ffffff;
1509 padding: 15px;
1510 height: 400px;
1511 font-size: 15px;
1512 }
1513
1514 .viz-text-editor textarea,
1515 button#viz-text-editor-button {
1516 display: inline-block;
1517 vertical-align: middle;
1518 }
1519
1520 /******************************************************************************/
1521 /******************************** chartjs ***********************************/
1522 /******************************************************************************/
1523
1524 canvas.chartjs-render-monitor {
1525 height: 500px !important;
1526 }
1527
1528 /******************************************************************************/
1529 /******************************** Frontend Actions ***********************************/
1530 /******************************************************************************/
1531 #vz-frontend-actions .only-pro-inner {
1532 text-align: center;
1533 }