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

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