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

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