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

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