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

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