PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.11.7
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.11.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
← All changes | css/frame.css +661 -37 3.0.73.11.7 View file →
@@ -5,8 +5,9 @@
5 5 top: 0;
6 6 right: 0;
7 7 bottom: 60px;
8 8 left: 0;
9 + width: auto;
9 10 background-color: white;
10 11 }
11 12
12 13 #canvas {
@@ -15,9 +16,31 @@
15 16 right: 310px;
16 17 bottom: 10px;
17 18 left: 10px;
18 19 }
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 +}
20 43 .loader {
21 44 position: absolute;
22 45 top: 50%;
23 46 left: 50%;
@@ -35,9 +58,9 @@
35 58 z-index: 75;
36 59 top: 0;
37 60 right: 0;
38 61 bottom: 60px;
39 - width: 299px;
62 + width: 350px;
40 63 border-left: 1px solid #dfdfdf;
41 64 background: whitesmoke;
42 65
43 66 -webkit-overflow-scrolling: touch;
@@ -84,12 +107,15 @@
84 107 font-size: 14px;
85 108 font-weight: 600;
86 109 line-height: 21px;
87 110 cursor: pointer;
88 - -webkit-transition: 0.15s color ease-in-out,0.15s background-color ease-in-out,0.15s border-color ease-in-out;
89 111 transition: 0.15s color ease-in-out,0.15s background-color ease-in-out,0.15s border-color ease-in-out;
90 112 }
91 113
114 +.viz-title-small {
115 + font-size: smaller;
116 +}
117 +
92 118 .viz-group-wrapper .viz-group .viz-group:hover .viz-group-title,
93 119 .viz-group-wrapper .viz-group .viz-group.open .viz-group-title {
94 120 border-left-color: #0073aa;
95 121 color: #0073aa;
@@ -123,9 +149,8 @@
123 149 border-left: 4px solid #fff;
124 150 background: #fff;
125 151 box-shadow: none;
126 152 cursor: pointer;
127 - -webkit-transition: color 0.15s ease-in-out,border-color 0.15s ease-in-out,background 0.15s ease-in-out;
128 153 transition: color 0.15s ease-in-out,border-color 0.15s ease-in-out,background 0.15s ease-in-out;
129 154 }
130 155
131 156 .viz-group-wrapper .viz-group .customize-section-back:hover {
@@ -259,8 +284,19 @@
259 284 font-weight: normal;
260 285 text-decoration: none;
261 286 }
262 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 +
263 299 .viz-section-description {
264 300 margin: 0;
265 301 /*display: none;*/
266 302 padding: 0;
@@ -343,8 +379,54 @@
343 379 margin-top: 15px;
344 380 text-align: center;
345 381 }
346 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 +.viz-info-panel {
400 + display: flex;
401 + flex-direction: column;
402 + padding: 10px;
403 + gap: 10px;
404 +}
405 +
406 +.viz-info-panel label {
407 + margin: 0;
408 + padding: 0;
409 + font-weight: bold;
410 +}
411 +
412 +.viz-info-panel input {
413 + flex: 1;
414 +}
415 +
416 +.viz-info-panel .viz-info-item {
417 + display: flex;
418 + flex-direction: column;
419 + flex: 1;
420 + gap: 3px;
421 +}
422 +
423 +.viz-info-panel .viz-info-row {
424 + display: flex;
425 + flex-direction: row;
426 + gap: 5px;
427 +}
428 +
347 429 /******************************************************************************/
348 430 /******************************** TOOLBAR ***********************************/
349 431 /******************************************************************************/
350 432
@@ -363,10 +445,15 @@
363 445 }
364 446
365 447 #toolbar .push-right {
366 448 float: right;
449 + margin-right: 10px;
367 450 }
368 451
452 +#toolbar .push-left {
453 + float: left;
454 +}
455 +
369 456 .toolbar-div a {
370 457 float: left;
371 458 }
372 459
@@ -376,8 +463,20 @@
376 463 width: 30%;
377 464 vertical-align: top;
378 465 }
379 466
467 +#chart-select {
468 + display: flex;
469 + padding: 12px 8px;
470 + justify-content: center;
471 + align-items: center;
472 + gap: 12px;
473 +}
474 +
475 +#chart-select label {
476 + font-weight: bold;
477 +}
478 +
380 479 /******************************************************************************/
381 480 /******************************** TYPE PICKER ******************************/
382 481 /******************************************************************************/
383 482
@@ -414,9 +513,17 @@
414 513 background-color: #efefef;
415 514 box-shadow: 0 0 8px #ddd;
416 515 }
417 516
418 -.type-box:nth-child(3n+3) {
517 +.type-box.viz-hidden {
518 + display: none;
519 +}
520 +
521 +.type-box.viz-hidden {
522 + display: none;
523 +}
524 +
525 +.type-box:nth-child(3n+1) {
419 526 margin-right: 0;
420 527 }
421 528
422 529 .type-box .pro-upsell .visualizder-pro-label {
@@ -427,8 +534,9 @@
427 534 height: 10px;
428 535 height: 17px;
429 536 border: none;
430 537 color: #fff;
538 + z-index: 4;
431 539 background: #c55555;
432 540 }
433 541
434 542 .type-label {
@@ -437,20 +545,32 @@
437 545 height: 205px;
438 546 padding: 15px;
439 547 border: 1px solid #e0e0e0;
440 548 background-color: white;
441 - background-image: url(../images/chart_types_g.png);
549 + background-image: url(../images/chart_types_v395.png);
442 550 background-repeat: no-repeat;
443 551 background-position: center center;
552 + background-size: 900px 1150px;
553 + filter: grayscale(100%);
554 + cursor: pointer;
444 555 }
445 556
557 +#type-picker.lib-ChartJS .type-label {
558 + background-image: url(../images/chart_types_chartjs.png);
559 +}
560 +
561 +#type-picker.lib-DataTable .type-label {
562 + background-image: url(../images/chart_types_datatable.png);
563 +}
564 +
446 565 .type-label-selected,
447 -.type-box > .type-label:hover {
448 - background-image: url(../images/chart_types.png);
566 +.type-box .type-label:hover {
567 +/* background-image: url(../images/chart_types_v340.png);*/
568 + filter: grayscale(0);
449 569 }
450 570
451 571 .type-box-area .type-label {
452 - background-position: 0 -225px;
572 + background-position: -8px -225px;
453 573 }
454 574
455 575 .type-box-line .type-label {
456 576 background-position: -600px 0;
@@ -464,9 +584,9 @@
464 584 background-position: 0 0;
465 585 }
466 586
467 587 .type-box-gauge .type-label {
468 - background-position: 0 -450px;
588 + background-position: -7px -450px;
469 589 }
470 590
471 591 .type-box-geo .type-label {
472 592 background-position: -600px -450px;
@@ -472,9 +592,9 @@
472 592 background-position: -600px -450px;
473 593 }
474 594
475 595 .type-box-candlestick .type-label {
476 - background-position: -300px -450px;
596 + background-position: -304px -450px;
477 597 }
478 598
479 599 .type-box-bar .type-label {
480 600 background-position: -300px -225px;
@@ -479,24 +599,38 @@
479 599 .type-box-bar .type-label {
480 600 background-position: -300px -225px;
481 601 }
482 602
603 +.type-box-bubble .type-label {
604 + background-position: -604px -906px;
605 +}
606 +
483 607 .type-box-column .type-label {
484 608 background-position: -600px -225px;
485 609 }
486 610
487 -.type-box-table .type-label {
611 +.type-box-dataTable .type-label,
612 +.type-box-table .type-label,
613 +.type-box-tabular .type-label {
488 614 background-position: -301px -670px;
489 615 }
490 616
491 617 .type-box-timeline .type-label {
492 - background-position: -2px -670px;
618 + background-position: -8px -670px;
493 619 }
494 620
495 621 .type-box-combo .type-label {
496 - background-position: -597px -670px;
622 + background-position: -606px -670px;
497 623 }
498 624
625 +.type-box-polarArea .type-label {
626 + background-position: -2px -912px;
627 +}
628 +
629 +.type-box-radar .type-label {
630 + background-position: -301px -899px;
631 +}
632 +
499 633 /******************************************************************************/
500 634 /******************************** OTHER STYLES ******************************/
501 635 /******************************************************************************/
502 636
@@ -577,9 +711,8 @@
577 711 box-shadow: none !important;
578 712 text-shadow: none!important;
579 713 font-family: "Open Sans",sans-serif;
580 714 font-weight: 700;
581 - -webkit-transition: all 0.3s ease 0s;
582 715 transition: all 0.3s ease 0s;
583 716 }
584 717
585 718 .computer-btn:hover {
@@ -588,10 +721,8 @@
588 721 color: white !important;
589 722 background: #2f8cea url("../images/computer.png") no-repeat scroll 7px -36px !important;
590 723 box-shadow: 0 1px 0 rgba(171, 171, 171, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15) !important;
591 724 box-shadow: none !important;
592 - -webkit-transition: all 0.3s ease 0s;
593 - -webkit-transition: all 0.3s ease;
594 725 transition: all 0.3s ease 0s;
595 726 transition: all 0.3s ease;
596 727 }
597 728
@@ -608,9 +739,8 @@
608 739 background: #e6e6e6 url("../images/web.png") no-repeat scroll 7px 1px !important;
609 740 box-shadow: none !important;
610 741 font-family: "Open Sans",sans-serif;
611 742 font-weight: 700;
612 - -webkit-transition: all 0.3s ease 0s;
613 743 transition: all 0.3s ease 0s;
614 744 /*margin-left: 2px !important;*/
615 745 }
616 746
@@ -620,10 +750,8 @@
620 750 border: 1px solid #89b158 !important;
621 751 color: white !important;
622 752 background: #89b158 url("../images/web.png") no-repeat scroll 7px -38px !important;
623 753 box-shadow: none !important;
624 - -webkit-transition: all 0.3s ease 0s;
625 - -webkit-transition: all 0.3s ease;
626 754 transition: all 0.3s ease 0s;
627 755 transition: all 0.3s ease;
628 756 }
629 757
@@ -643,9 +771,8 @@
643 771 background: #e6e6e6 url("../images/from_chart.png") no-repeat scroll 7px 1px !important;
644 772 box-shadow: none !important;
645 773 font-family: "Open Sans",sans-serif;
646 774 font-weight: 700;
647 - -webkit-transition: all 0.3s ease 0s;
648 775 transition: all 0.3s ease 0s;
649 776 /*margin-left: 2px !important;
650 777 margin-top: 2px !important;*/
651 778 }
@@ -656,10 +783,8 @@
656 783 border: 1px solid #10aecb !important;
657 784 color: white !important;
658 785 background: #10aecb url("../images/from_chart.png") no-repeat scroll 7px -36px !important;
659 786 box-shadow: none !important;
660 - -webkit-transition: all 0.3s ease 0s;
661 - -webkit-transition: all 0.3s ease;
662 787 transition: all 0.3s ease 0s;
663 788 transition: all 0.3s ease;
664 789 /*margin-top: 2px !important;*/
665 790 }
@@ -666,10 +791,10 @@
666 791
667 792 input#existing-chart {
668 793 /*left: 18px;
669 794 width: 110px;
670 - position: relative;*/
671 -}
795 + position: relative;*/
796 + }
672 797
673 798 select#chart-id {
674 799 float: right;
675 800 width: 146px;
@@ -683,9 +808,8 @@
683 808 color: white !important;
684 809 background-color: #2f8cea !important;
685 810 box-shadow: none !important;
686 811 text-shadow: none;
687 - -webkit-transition: all 0.3s ease;
688 812 transition: all 0.3s ease;
689 813 }
690 814
691 815 .preview-btn {
@@ -694,9 +818,8 @@
694 818 background-color: #2f8cea !important;
695 819 box-shadow: none !important;
696 820 font-family: "Open Sans",sans-serif;
697 821 font-weight: 700;
698 - -webkit-transition: all 0.3s ease;
699 822 transition: all 0.3s ease;
700 823 }
701 824
702 825 .preview-btn:hover {
@@ -705,9 +828,8 @@
705 828 background-color: #2c80d6 !important;
706 829 box-shadow: none !important;
707 830 font-family: "Open Sans",sans-serif;
708 831 font-weight: 700;
709 - -webkit-transition: all 0.3s ease;
710 832 transition: all 0.3s ease;
711 833 }
712 834
713 835 .show-live-btn {
@@ -727,9 +849,8 @@
727 849 background-color: #ea8c00 !important;
728 850 box-shadow: none !important;
729 851 font-family: "Open Sans",sans-serif;
730 852 font-weight: 700;
731 - -webkit-transition: all 0.3s ease;
732 853 transition: all 0.3s ease;
733 854 }
734 855
735 856 .check-pro-btn {
@@ -767,8 +888,19 @@
767 888 .hidden-setting {
768 889 display: none;
769 890 }
770 891
892 +.viz-select-library {
893 + color: #0085ba;
894 +}
895 +.viz-select-library.viz-hide-library {
896 + display: none;
897 +}
898 +
899 +.viz-select-library option:first-child {
900 + font-weight: bold;
901 +}
902 +
771 903 /* ====== RESPONSIVE ====== */
772 904
773 905 @media (max-width: 1366px) {
774 906 #rate-stars {
@@ -930,8 +1062,9 @@
930 1062
931 1063 #vz-csv-file-form,
932 1064 #vz-one-time-import,
933 1065 #vz-schedule-import,
1066 +#vz-permissions .only-pro-content,
934 1067 .edit-data-content {
935 1068 text-align: center;
936 1069 }
937 1070
@@ -980,9 +1113,8 @@
980 1113 left: 0;
981 1114 width: 100%;
982 1115 opacity: 0;
983 1116 background: rgba(253,253,253,0.9);
984 - -webkit-transition: 0.5s ease;
985 1117 transition: 0.5s ease;
986 1118 }
987 1119
988 1120 .only-pro-feature:hover .only-pro-content {
@@ -989,16 +1121,20 @@
989 1121 opacity: 1;
990 1122 }
991 1123
992 1124 .only-pro-container {
993 - display: table;
1125 + display: flex;
1126 + align-items: center;
1127 + justify-content: center;
994 1128 width: 100%;
995 1129 height: 100%;
996 1130 }
997 1131
998 1132 .only-pro-inner {
999 - display: table-cell;
1000 - vertical-align: middle;
1133 + display: flex;
1134 + flex-direction: column;
1135 + align-items: center;
1136 + justify-content: center;
1001 1137 }
1002 1138
1003 1139 .only-pro-content p {
1004 1140 margin: 0 0 15px;
@@ -1009,20 +1145,28 @@
1009 1145 .only-pro-content a {
1010 1146 display: inline-block;
1011 1147 padding: 7px 12px;
1012 1148 color: #fff;
1013 - background: #ff595e;
1149 + background: #3F57E1;
1014 1150 font-weight: 600;
1015 1151 text-decoration: none;
1016 - text-transform: uppercase;
1017 - -webkit-transition: 0.1s ease;
1018 1152 transition: 0.1s ease;
1153 + border-width: 1px;
1154 + border-style: solid;
1155 + border-radius: 3px;
1019 1156 }
1157 +.only-pro-content .only-pro-container a {
1158 + color: #fff !important;
1159 +}
1020 1160
1021 1161 .only-pro-content a:hover {
1022 - background: #ce484c;
1162 + background: #2D419B;
1023 1163 }
1024 1164
1165 +.only-pro-anchor {
1166 + position: relative;
1167 +}
1168 +
1025 1169 #sidebar::-webkit-scrollbar {
1026 1170 width: 4px;
1027 1171 }
1028 1172
@@ -1055,4 +1199,484 @@
1055 1199 #permissions-form .only-pro-feature > ul {
1056 1200 position: relative;
1057 1201 text-align: center;
1058 1202 }
1203 +
1204 +/******************************************************************************/
1205 +/******************************** DB WIZARD ***********************************/
1206 +/******************************************************************************/
1207 +.db-wizard-condition .select-condition {
1208 + display: none;
1209 +}
1210 +
1211 +.db-wizard-condition .select-condition.active {
1212 + display: block;
1213 + max-width: 50%;
1214 + margin-top: 10px;
1215 + padding-top: 10px;
1216 + border-top: 1px solid #eee;
1217 + font-weight: 500;
1218 +}
1219 +
1220 +.db-wizard-results {
1221 + width: calc(100% - 350px);
1222 +}
1223 +
1224 +#db-wizard-form {
1225 + padding: 25px;
1226 +}
1227 +
1228 +.db-wizard-query label {
1229 + display: block;
1230 + min-width: 150px;
1231 + padding: 20px 0 5px;
1232 + color: rgba(0,0,0,0.85);
1233 + font-size: 18px;
1234 + font-weight: 500;
1235 +}
1236 +
1237 +.db-wizard-query .db-wizard-where label,
1238 +.db-wizard-query .db-wizard-from label {
1239 + padding-top: 0;
1240 +}
1241 +
1242 +.db-wizard-query > div:not(:last-child) {
1243 + margin-bottom: 15px;
1244 +}
1245 +
1246 +.db-wizard-query .select-condition > div {
1247 + display: block;
1248 +}
1249 +
1250 +.db-wizard-query .chosen-container {
1251 + width: auto;
1252 +}
1253 +
1254 +.db-wizard-query .chosen-container-single .chosen-single {
1255 + border: 1px solid #ccc;
1256 + background: #fff;
1257 + box-shadow: none;
1258 + font-size: 13px;
1259 + font-weight: 500;
1260 +}
1261 +
1262 +.db-wizard-templates,
1263 +.db-wizard-templates > div {
1264 + display: block;
1265 +}
1266 +
1267 +.db-wizard-templates > div {
1268 + box-sizing: border-box;
1269 + width: 50%;
1270 + margin-top: 20px;
1271 + padding: 20px;
1272 + border: 1px solid #efefef;
1273 +}
1274 +
1275 +.db-wizard-templates > div:first-child {
1276 + margin-top: 0;
1277 +}
1278 +
1279 +.db-wizard-query .chosen-container-multi .chosen-choices {
1280 + padding: 5px;
1281 + border-color: #ccc;
1282 + background: #fff;
1283 + box-shadow: none;
1284 +}
1285 +
1286 +.db-wizard-results .dataTables_wrapper .dataTables_filter input,
1287 +.db-wizard-query .select-condition-operand input,
1288 +.db-wizard-limit input {
1289 + width: 50%;
1290 + padding-left: 7px;
1291 + border: 1px solid #ccc;
1292 + border-radius: 6px;
1293 + background: #fff;
1294 + box-shadow: none;
1295 + font-size: 13px;
1296 +}
1297 +
1298 +.db-wizard-limit input {
1299 + display: inline;
1300 + width: 150px;
1301 + margin: 0 0 20px 20px;
1302 +}
1303 +
1304 +.db-wizard-limit label {
1305 + display: inline;
1306 +}
1307 +
1308 +.db-wizard-query .select-condition-operand input::-webkit-input-placeholder {
1309 + color: #cdcdcd;
1310 +}
1311 +
1312 +.db-wizard-query .select-condition-operand input:-ms-input-placeholder {
1313 + color: #cdcdcd;
1314 +}
1315 +
1316 +.db-wizard-query .select-condition-operand input::placeholder {
1317 + color: #cdcdcd;
1318 +}
1319 +
1320 +.db-wizard-query .chosen-container-multi .chosen-choices li.search-choice {
1321 + padding: 5px 30px 5px 5px;
1322 + border-color: #ccc;
1323 + background: #fff;
1324 + box-shadow: none;
1325 + font-weight: 600;
1326 +}
1327 +
1328 +.db-wizard-results table > thead > tr > th {
1329 + padding: 15px 8px;
1330 + border: none;
1331 + color: #252422;
1332 + background: #fff;
1333 + font-size: 18px;
1334 + font-weight: 500;
1335 + text-align: left;
1336 +}
1337 +
1338 +.db-wizard-results table > tbody > tr > td,
1339 +.dataTables_info {
1340 + padding: 15px 8px;
1341 + border-top: 1px solid #a2a2a2;
1342 + color: #252422;
1343 + font-size: 14px;
1344 + font-weight: 300;
1345 +}
1346 +
1347 +.db-wizard-results table > tbody > tr.odd {
1348 + background-color: #f7f7f7;
1349 +}
1350 +
1351 +.db-wizard-results table.dataTable.no-footer {
1352 + border: none;
1353 +}
1354 +
1355 +.db-wizard-results .dataTables_wrapper .dataTables_info {
1356 + border-top: 1px solid #ccc5b9;
1357 + color: #a2a2a2;
1358 + font-size: 12px;
1359 + font-weight: 500;
1360 +}
1361 +
1362 +.db-wizard-results .dataTables_filter label {
1363 + font-size: 18px;
1364 + font-weight: 500;
1365 +}
1366 +
1367 +.db-wizard-where-template-remove,
1368 +.db-wizard-where-template-add {
1369 + width: auto;
1370 + height: 25px;
1371 + margin-top: 10px;
1372 + border: none;
1373 + border-radius: 3px;
1374 + color: #fff;
1375 + font-size: 12px;
1376 + cursor: pointer;
1377 + transition: 0.3s ease;
1378 +}
1379 +
1380 +.db-wizard-where-template-remove:hover,
1381 +.db-wizard-where-template-add:hover {
1382 + opacity: 0.8;
1383 +}
1384 +
1385 +.db-wizard-results .dataTables_wrapper .dataTables_filter {
1386 + float: none;
1387 + text-align: left;
1388 +}
1389 +
1390 +.db-wizard-where-template-add {
1391 + background-color: #34a85e;
1392 +}
1393 +
1394 +.db-wizard-where-template-remove {
1395 + background-color: #ff0d00;
1396 +}
1397 +
1398 +#db-query-form .CodeMirror-wrap {
1399 + height: 200px;
1400 + padding: 15px;
1401 + color: #fff;
1402 + background: #282923;
1403 + font-size: 15px;
1404 +}
1405 +
1406 +#db-query-form .CodeMirror-wrap .CodeMirror-cursor {
1407 + border-left: 1px solid #fff !important;
1408 +}
1409 +
1410 +#db-query-form .CodeMirror-wrap .CodeMirror-placeholder {
1411 + color: #fff;
1412 +}
1413 +
1414 +#db-query-form .CodeMirror-wrap pre {
1415 + color: #fff !important;
1416 +}
1417 +
1418 +#db-query-form .CodeMirror-wrap pre .cm-keyword {
1419 + color: #FF6188 !important;
1420 +}
1421 +
1422 +#db-query-form .CodeMirror-wrap pre .cm-builtin {
1423 + color: #78DCE8 !important;
1424 +}
1425 +
1426 +#db-query-form .CodeMirror-wrap pre .cm-comment {
1427 + color: #74705d !important;
1428 +}
1429 +
1430 +#db-query-form .CodeMirror-wrap pre .cm-number,
1431 +#db-query-form .CodeMirror-wrap pre .cm-string {
1432 + color: #A9DC76 !important;
1433 +}
1434 +
1435 +.visualizer-db-query-form > div {
1436 + display: block;
1437 + width: 15%;
1438 + vertical-align: middle;
1439 +}
1440 +
1441 +#visualizer-db-query {
1442 + padding: 20px;
1443 +}
1444 +
1445 +.visualizer-db-query-form > div:first-child {
1446 + width: 100%;
1447 + margin-bottom: 20px;
1448 +}
1449 +
1450 +.db-wizard-error {
1451 + color: #f00;
1452 + padding: 16px 0;
1453 +}
1454 +
1455 +.db-wizard-hints,
1456 +.json-wizard-hints,
1457 +.html-table-editor-hints {
1458 + margin-bottom: 30px;
1459 + color: #0085ba;
1460 +}
1461 +
1462 +.db-wizard-hints .visualizer-emboss,
1463 +.db-wizard-hints a,
1464 +.html-table-editor-hints a,
1465 +.json-wizard-hints .visualizer-emboss,
1466 +.json-wizard-hints a {
1467 + color: #f92472;
1468 +}
1469 +
1470 +.db-wizard-hints ul,
1471 +.html-table-editor-hints ul,
1472 +.json-wizard-hints ul {
1473 + list-style: square;
1474 + padding: 0 16px;
1475 +}
1476 +
1477 +.db-wizard-results .dataTables_wrapper .dataTables_info {
1478 + width: calc(100% - 17px);
1479 +}
1480 +
1481 +
1482 +/******************************************************************************/
1483 +/******************************** data tables *******************************/
1484 +/******************************************************************************/
1485 +.db-wizard-results .dt-button {
1486 + display: none !important;
1487 +}
1488 +
1489 +.dt-button.buttons-print {
1490 + display: none;
1491 +}
1492 +
1493 +/******************************************************************************/
1494 +/******************************** json table *********************************/
1495 +/******************************************************************************/
1496 +#json-conclude-form .results {
1497 + min-width: 10px !important;
1498 +}
1499 +
1500 +#json-conclude-form .json-table {
1501 + width: 85%;
1502 +}
1503 +
1504 +#vz-import-json-url,
1505 +#vz-import-json-root,
1506 +#vz-import-json-paging {
1507 + width: 75%;
1508 +}
1509 +
1510 +#json-conclude-form .json-table,
1511 +#json-conclude-form button#visualizer-json-conclude {
1512 + display: inline-block;
1513 + vertical-align: middle;
1514 +}
1515 +
1516 +.viz-editor-table tbody tr:first-child {
1517 + background-color: #ececec !important;
1518 +}
1519 +
1520 +.viz-editor-table tr th {
1521 + background-color: #cccccc;
1522 +}
1523 +
1524 +.viz-editor-table thead tr th:nth-child(n+1) {
1525 + cursor: move !important;
1526 +}
1527 +
1528 +#json-conclude-form .json-wizard-hints .info,
1529 +.html-table-editor-hints .info {
1530 + margin: 1% 0px;
1531 +}
1532 +
1533 +.viz-step.ui-state-active {
1534 + border-color: #0085BA !important;
1535 + background: #0085BA !important;
1536 + color: #ffffff;
1537 +}
1538 +
1539 +.viz-substep {
1540 + outline: 0 !important;
1541 + border: 0 !important;
1542 + background: none !important;
1543 + text-transform: uppercase;
1544 +}
1545 +
1546 +.viz-substep.ui-state-active {
1547 +}
1548 +
1549 +.viz-substep ~ .ui-accordion-content {
1550 + outline: 0 !important;
1551 + border: 0 !important;
1552 + font-size: smaller;
1553 +}
1554 +
1555 +.viz-substep ~ div {
1556 + display: table;
1557 +}
1558 +
1559 +.viz-substep ~ div > div {
1560 + display: table-row;
1561 +}
1562 +
1563 +.viz-substep ~ div > div div {
1564 + display: table-cell;
1565 + padding: 5px;
1566 +}
1567 +
1568 +.json-wizard-header .field-title {
1569 + position: absolute;
1570 + left: 30px;
1571 +}
1572 +/******************************************************************************/
1573 +/******************************** html table editor **************************/
1574 +/******************************************************************************/
1575 +.viz-simple-editor-type,
1576 +.viz-simple-editor {
1577 + display: none;
1578 +}
1579 +
1580 +.viz-table-editor {
1581 + width: 75%;
1582 + margin-left: 2%;
1583 +}
1584 +
1585 +.viz-html-table,
1586 +button#visualizer-save-html-table {
1587 + display: inline-block;
1588 + vertical-align: middle;
1589 +}
1590 +
1591 +
1592 +/******************************************************************************/
1593 +/******************************** text area editor **************************/
1594 +/******************************************************************************/
1595 +.viz-text-editor {
1596 + padding: 20px;
1597 + z-index: 9999;
1598 + box-sizing: border-box;
1599 + padding-right: 320px;
1600 +}
1601 +
1602 +.viz-text-editor textarea {
1603 + width: 85%;
1604 + overflow: auto;
1605 + background: #282923;
1606 + color: #ffffff;
1607 + padding: 15px;
1608 + height: 400px;
1609 + font-size: 15px;
1610 +}
1611 +
1612 +.viz-text-editor textarea,
1613 +button#viz-text-editor-button {
1614 + display: inline-block;
1615 + vertical-align: middle;
1616 +}
1617 +
1618 +.viz-simple-editor .viz-html-table {
1619 + width: 95%;
1620 +}
1621 +
1622 +/******************************************************************************/
1623 +/******************************** chartjs ***********************************/
1624 +/******************************************************************************/
1625 +
1626 +canvas.chartjs-render-monitor {
1627 + height: 500px !important;
1628 +}
1629 +
1630 +/******************************************************************************/
1631 +/******************************** Frontend Actions ***********************************/
1632 +/******************************************************************************/
1633 +#vz-frontend-actions .only-pro-inner, #vz-data-controls .only-pro-inner {
1634 + text-align: center;
1635 +}
1636 +
1637 +/******************************************************************************/
1638 +/******************************** chart type box upsell ***********************/
1639 +/******************************************************************************/
1640 +
1641 +.pro-upsell .pro-upsell-overlay {
1642 + position: absolute;
1643 + width: 100%;
1644 + height: 100%;
1645 + left: 0;
1646 + top: 0;
1647 + display: grid;
1648 + place-items: center;
1649 + background-color: rgba(255, 255, 255, 0.7);
1650 + z-index: 1;
1651 + opacity: 0;
1652 + visibility: hidden;
1653 + transition: all .3s ease-in-out;
1654 +}
1655 +.pro-upsell:hover .pro-upsell-overlay{
1656 + opacity: 1;
1657 + visibility: visible;
1658 +}
1659 +
1660 +.pro-upsell .pro-upsell-overlay .button {
1661 + width: 155px;
1662 + height: 39px;
1663 + background: #007CBA;
1664 + border-radius: 4px;
1665 + display: flex;
1666 + align-items: center;
1667 + text-align: center;
1668 + color: #FFFFFF;
1669 + justify-content: center;
1670 +}
1671 +.pro-upsell .pro-upsell-overlay .button.button-secondary{
1672 + background: #ffffff;
1673 + color: #007CBA;
1674 +}
1675 +.pro-upsell .pro-upsell-overlay .pro-upsell-action {
1676 + display: flex;
1677 + gap: 20px;
1678 +}
1679 +.pro-upsell .pro-upsell-overlay .pro-upsell-action .button{
1680 + width: 100%;
1681 + text-align: center;
1682 +}