PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.4.8
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.4.8
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 +479 -21 3.0.73.4.8 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 {
@@ -35,9 +36,9 @@
35 36 z-index: 75;
36 37 top: 0;
37 38 right: 0;
38 39 bottom: 60px;
39 - width: 299px;
40 + width: 350px;
40 41 border-left: 1px solid #dfdfdf;
41 42 background: whitesmoke;
42 43
43 44 -webkit-overflow-scrolling: touch;
@@ -84,12 +85,15 @@
84 85 font-size: 14px;
85 86 font-weight: 600;
86 87 line-height: 21px;
87 88 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 89 transition: 0.15s color ease-in-out,0.15s background-color ease-in-out,0.15s border-color ease-in-out;
90 90 }
91 91
92 +.viz-title-small {
93 + font-size: smaller;
94 +}
95 +
92 96 .viz-group-wrapper .viz-group .viz-group:hover .viz-group-title,
93 97 .viz-group-wrapper .viz-group .viz-group.open .viz-group-title {
94 98 border-left-color: #0073aa;
95 99 color: #0073aa;
@@ -123,9 +127,8 @@
123 127 border-left: 4px solid #fff;
124 128 background: #fff;
125 129 box-shadow: none;
126 130 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 131 transition: color 0.15s ease-in-out,border-color 0.15s ease-in-out,background 0.15s ease-in-out;
129 132 }
130 133
131 134 .viz-group-wrapper .viz-group .customize-section-back:hover {
@@ -259,8 +262,19 @@
259 262 font-weight: normal;
260 263 text-decoration: none;
261 264 }
262 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 +
263 277 .viz-section-description {
264 278 margin: 0;
265 279 /*display: none;*/
266 280 padding: 0;
@@ -343,8 +357,20 @@
343 357 margin-top: 15px;
344 358 text-align: center;
345 359 }
346 360
361 +#viz-tabs {
362 + display: none;
363 +}
364 +
365 +#viz-tabs.done {
366 + display: block;
367 +}
368 +
369 +#viz-tabs .ui-tabs-panel {
370 + padding: 0;
371 +}
372 +
347 373 /******************************************************************************/
348 374 /******************************** TOOLBAR ***********************************/
349 375 /******************************************************************************/
350 376
@@ -363,10 +389,15 @@
363 389 }
364 390
365 391 #toolbar .push-right {
366 392 float: right;
393 + margin-right: 10px;
367 394 }
368 395
396 +#toolbar .push-left {
397 + float: left;
398 +}
399 +
369 400 .toolbar-div a {
370 401 float: left;
371 402 }
372 403
@@ -437,9 +468,9 @@
437 468 height: 205px;
438 469 padding: 15px;
439 470 border: 1px solid #e0e0e0;
440 471 background-color: white;
441 - background-image: url(../images/chart_types_g.png);
472 + background-image: url(../images/chart_types_v340_g.png);
442 473 background-repeat: no-repeat;
443 474 background-position: center center;
444 475 }
445 476
@@ -444,9 +475,9 @@
444 475 }
445 476
446 477 .type-label-selected,
447 478 .type-box > .type-label:hover {
448 - background-image: url(../images/chart_types.png);
479 + background-image: url(../images/chart_types_v340.png);
449 480 }
450 481
451 482 .type-box-area .type-label {
452 483 background-position: 0 -225px;
@@ -479,13 +510,19 @@
479 510 .type-box-bar .type-label {
480 511 background-position: -300px -225px;
481 512 }
482 513
514 +.type-box-bubble .type-label {
515 + background-position: -600px -906px;
516 +}
517 +
483 518 .type-box-column .type-label {
484 519 background-position: -600px -225px;
485 520 }
486 521
487 -.type-box-table .type-label {
522 +.type-box-dataTable .type-label,
523 +.type-box-table .type-label,
524 +.type-box-tabular .type-label {
488 525 background-position: -301px -670px;
489 526 }
490 527
491 528 .type-box-timeline .type-label {
@@ -495,8 +532,16 @@
495 532 .type-box-combo .type-label {
496 533 background-position: -597px -670px;
497 534 }
498 535
536 +.type-box-polarArea .type-label {
537 + background-position: -2px -912px;
538 +}
539 +
540 +.type-box-radar .type-label {
541 + background-position: -301px -899px;
542 +}
543 +
499 544 /******************************************************************************/
500 545 /******************************** OTHER STYLES ******************************/
501 546 /******************************************************************************/
502 547
@@ -577,9 +622,8 @@
577 622 box-shadow: none !important;
578 623 text-shadow: none!important;
579 624 font-family: "Open Sans",sans-serif;
580 625 font-weight: 700;
581 - -webkit-transition: all 0.3s ease 0s;
582 626 transition: all 0.3s ease 0s;
583 627 }
584 628
585 629 .computer-btn:hover {
@@ -588,10 +632,8 @@
588 632 color: white !important;
589 633 background: #2f8cea url("../images/computer.png") no-repeat scroll 7px -36px !important;
590 634 box-shadow: 0 1px 0 rgba(171, 171, 171, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15) !important;
591 635 box-shadow: none !important;
592 - -webkit-transition: all 0.3s ease 0s;
593 - -webkit-transition: all 0.3s ease;
594 636 transition: all 0.3s ease 0s;
595 637 transition: all 0.3s ease;
596 638 }
597 639
@@ -608,9 +650,8 @@
608 650 background: #e6e6e6 url("../images/web.png") no-repeat scroll 7px 1px !important;
609 651 box-shadow: none !important;
610 652 font-family: "Open Sans",sans-serif;
611 653 font-weight: 700;
612 - -webkit-transition: all 0.3s ease 0s;
613 654 transition: all 0.3s ease 0s;
614 655 /*margin-left: 2px !important;*/
615 656 }
616 657
@@ -620,10 +661,8 @@
620 661 border: 1px solid #89b158 !important;
621 662 color: white !important;
622 663 background: #89b158 url("../images/web.png") no-repeat scroll 7px -38px !important;
623 664 box-shadow: none !important;
624 - -webkit-transition: all 0.3s ease 0s;
625 - -webkit-transition: all 0.3s ease;
626 665 transition: all 0.3s ease 0s;
627 666 transition: all 0.3s ease;
628 667 }
629 668
@@ -643,9 +682,8 @@
643 682 background: #e6e6e6 url("../images/from_chart.png") no-repeat scroll 7px 1px !important;
644 683 box-shadow: none !important;
645 684 font-family: "Open Sans",sans-serif;
646 685 font-weight: 700;
647 - -webkit-transition: all 0.3s ease 0s;
648 686 transition: all 0.3s ease 0s;
649 687 /*margin-left: 2px !important;
650 688 margin-top: 2px !important;*/
651 689 }
@@ -656,10 +694,8 @@
656 694 border: 1px solid #10aecb !important;
657 695 color: white !important;
658 696 background: #10aecb url("../images/from_chart.png") no-repeat scroll 7px -36px !important;
659 697 box-shadow: none !important;
660 - -webkit-transition: all 0.3s ease 0s;
661 - -webkit-transition: all 0.3s ease;
662 698 transition: all 0.3s ease 0s;
663 699 transition: all 0.3s ease;
664 700 /*margin-top: 2px !important;*/
665 701 }
@@ -683,9 +719,8 @@
683 719 color: white !important;
684 720 background-color: #2f8cea !important;
685 721 box-shadow: none !important;
686 722 text-shadow: none;
687 - -webkit-transition: all 0.3s ease;
688 723 transition: all 0.3s ease;
689 724 }
690 725
691 726 .preview-btn {
@@ -694,9 +729,8 @@
694 729 background-color: #2f8cea !important;
695 730 box-shadow: none !important;
696 731 font-family: "Open Sans",sans-serif;
697 732 font-weight: 700;
698 - -webkit-transition: all 0.3s ease;
699 733 transition: all 0.3s ease;
700 734 }
701 735
702 736 .preview-btn:hover {
@@ -705,9 +739,8 @@
705 739 background-color: #2c80d6 !important;
706 740 box-shadow: none !important;
707 741 font-family: "Open Sans",sans-serif;
708 742 font-weight: 700;
709 - -webkit-transition: all 0.3s ease;
710 743 transition: all 0.3s ease;
711 744 }
712 745
713 746 .show-live-btn {
@@ -727,9 +760,8 @@
727 760 background-color: #ea8c00 !important;
728 761 box-shadow: none !important;
729 762 font-family: "Open Sans",sans-serif;
730 763 font-weight: 700;
731 - -webkit-transition: all 0.3s ease;
732 764 transition: all 0.3s ease;
733 765 }
734 766
735 767 .check-pro-btn {
@@ -767,8 +799,16 @@
767 799 .hidden-setting {
768 800 display: none;
769 801 }
770 802
803 +.viz-select-library {
804 + color: #0085ba;
805 +}
806 +
807 +.viz-select-library option:first-child {
808 + font-weight: bold;
809 +}
810 +
771 811 /* ====== RESPONSIVE ====== */
772 812
773 813 @media (max-width: 1366px) {
774 814 #rate-stars {
@@ -930,8 +970,9 @@
930 970
931 971 #vz-csv-file-form,
932 972 #vz-one-time-import,
933 973 #vz-schedule-import,
974 +#vz-permissions .only-pro-content,
934 975 .edit-data-content {
935 976 text-align: center;
936 977 }
937 978
@@ -980,9 +1021,8 @@
980 1021 left: 0;
981 1022 width: 100%;
982 1023 opacity: 0;
983 1024 background: rgba(253,253,253,0.9);
984 - -webkit-transition: 0.5s ease;
985 1025 transition: 0.5s ease;
986 1026 }
987 1027
988 1028 .only-pro-feature:hover .only-pro-content {
@@ -1013,9 +1053,8 @@
1013 1053 background: #ff595e;
1014 1054 font-weight: 600;
1015 1055 text-decoration: none;
1016 1056 text-transform: uppercase;
1017 - -webkit-transition: 0.1s ease;
1018 1057 transition: 0.1s ease;
1019 1058 }
1020 1059
1021 1060 .only-pro-content a:hover {
@@ -1055,4 +1094,423 @@
1055 1094 #permissions-form .only-pro-feature > ul {
1056 1095 position: relative;
1057 1096 text-align: center;
1058 1097 }
1098 +
1099 +/******************************************************************************/
1100 +/******************************** DB WIZARD ***********************************/
1101 +/******************************************************************************/
1102 +.db-wizard-condition .select-condition {
1103 + display: none;
1104 +}
1105 +
1106 +.db-wizard-condition .select-condition.active {
1107 + display: block;
1108 + max-width: 50%;
1109 + margin-top: 10px;
1110 + padding-top: 10px;
1111 + border-top: 1px solid #eee;
1112 + font-weight: 500;
1113 +}
1114 +
1115 +.db-wizard-results {
1116 + width: calc(100% - 350px);
1117 +}
1118 +
1119 +#db-wizard-form {
1120 + padding: 25px;
1121 +}
1122 +
1123 +.db-wizard-query label {
1124 + display: block;
1125 + min-width: 150px;
1126 + padding: 20px 0 5px;
1127 + color: rgba(0,0,0,0.85);
1128 + font-size: 18px;
1129 + font-weight: 500;
1130 +}
1131 +
1132 +.db-wizard-query .db-wizard-where label,
1133 +.db-wizard-query .db-wizard-from label {
1134 + padding-top: 0;
1135 +}
1136 +
1137 +.db-wizard-query > div:not(:last-child) {
1138 + margin-bottom: 15px;
1139 +}
1140 +
1141 +.db-wizard-query .select-condition > div {
1142 + display: block;
1143 +}
1144 +
1145 +.db-wizard-query .chosen-container {
1146 + width: auto;
1147 +}
1148 +
1149 +.db-wizard-query .chosen-container-single .chosen-single {
1150 + border: 1px solid #ccc;
1151 + background: #fff;
1152 + box-shadow: none;
1153 + font-size: 13px;
1154 + font-weight: 500;
1155 +}
1156 +
1157 +.db-wizard-templates,
1158 +.db-wizard-templates > div {
1159 + display: block;
1160 +}
1161 +
1162 +.db-wizard-templates > div {
1163 + box-sizing: border-box;
1164 + width: 50%;
1165 + margin-top: 20px;
1166 + padding: 20px;
1167 + border: 1px solid #efefef;
1168 +}
1169 +
1170 +.db-wizard-templates > div:first-child {
1171 + margin-top: 0;
1172 +}
1173 +
1174 +.db-wizard-query .chosen-container-multi .chosen-choices {
1175 + padding: 5px;
1176 + border-color: #ccc;
1177 + background: #fff;
1178 + box-shadow: none;
1179 +}
1180 +
1181 +.db-wizard-results .dataTables_wrapper .dataTables_filter input,
1182 +.db-wizard-query .select-condition-operand input,
1183 +.db-wizard-limit input {
1184 + width: 50%;
1185 + padding-left: 7px;
1186 + border: 1px solid #ccc;
1187 + border-radius: 6px;
1188 + background: #fff;
1189 + box-shadow: none;
1190 + font-size: 13px;
1191 +}
1192 +
1193 +.db-wizard-limit input {
1194 + display: inline;
1195 + width: 150px;
1196 + margin: 0 0 20px 20px;
1197 +}
1198 +
1199 +.db-wizard-limit label {
1200 + display: inline;
1201 +}
1202 +
1203 +.db-wizard-query .select-condition-operand input::-webkit-input-placeholder {
1204 + color: #cdcdcd;
1205 +}
1206 +
1207 +.db-wizard-query .select-condition-operand input:-ms-input-placeholder {
1208 + color: #cdcdcd;
1209 +}
1210 +
1211 +.db-wizard-query .select-condition-operand input::placeholder {
1212 + color: #cdcdcd;
1213 +}
1214 +
1215 +.db-wizard-query .chosen-container-multi .chosen-choices li.search-choice {
1216 + padding: 5px 30px 5px 5px;
1217 + border-color: #ccc;
1218 + background: #fff;
1219 + box-shadow: none;
1220 + font-weight: 600;
1221 +}
1222 +
1223 +.db-wizard-results table > thead > tr > th {
1224 + padding: 15px 8px;
1225 + border: none;
1226 + color: #252422;
1227 + background: #fff;
1228 + font-size: 18px;
1229 + font-weight: 500;
1230 + text-align: left;
1231 +}
1232 +
1233 +.db-wizard-results table > tbody > tr > td,
1234 +.dataTables_info {
1235 + padding: 15px 8px;
1236 + border-top: 1px solid #a2a2a2;
1237 + color: #252422;
1238 + font-size: 14px;
1239 + font-weight: 300;
1240 +}
1241 +
1242 +.db-wizard-results table > tbody > tr.odd {
1243 + background-color: #f7f7f7;
1244 +}
1245 +
1246 +.db-wizard-results table.dataTable.no-footer {
1247 + border: none;
1248 +}
1249 +
1250 +.db-wizard-results .dataTables_wrapper .dataTables_info {
1251 + border-top: 1px solid #ccc5b9;
1252 + color: #a2a2a2;
1253 + font-size: 12px;
1254 + font-weight: 500;
1255 +}
1256 +
1257 +.db-wizard-results .dataTables_filter label {
1258 + font-size: 18px;
1259 + font-weight: 500;
1260 +}
1261 +
1262 +.db-wizard-where-template-remove,
1263 +.db-wizard-where-template-add {
1264 + width: auto;
1265 + height: 25px;
1266 + margin-top: 10px;
1267 + border: none;
1268 + border-radius: 3px;
1269 + color: #fff;
1270 + font-size: 12px;
1271 + cursor: pointer;
1272 + transition: 0.3s ease;
1273 +}
1274 +
1275 +.db-wizard-where-template-remove:hover,
1276 +.db-wizard-where-template-add:hover {
1277 + opacity: 0.8;
1278 +}
1279 +
1280 +.db-wizard-results .dataTables_wrapper .dataTables_filter {
1281 + float: none;
1282 + text-align: left;
1283 +}
1284 +
1285 +.db-wizard-where-template-add {
1286 + background-color: #34a85e;
1287 +}
1288 +
1289 +.db-wizard-where-template-remove {
1290 + background-color: #ff0d00;
1291 +}
1292 +
1293 +#db-query-form .CodeMirror-scroll {
1294 + overflow: hidden !important;
1295 + height: 50%;
1296 + margin: 0;
1297 + padding: 0;
1298 +}
1299 +
1300 +#db-query-form .CodeMirror-wrap {
1301 + height: 200px;
1302 + padding: 15px;
1303 + color: #fff;
1304 + background: #282923;
1305 + font-size: 15px;
1306 +}
1307 +
1308 +#db-query-form .CodeMirror-wrap .CodeMirror-cursor {
1309 + border-left: 1px solid #fff !important;
1310 +}
1311 +
1312 +#db-query-form .CodeMirror-wrap .CodeMirror-placeholder {
1313 + color: #fff;
1314 +}
1315 +
1316 +#db-query-form .CodeMirror-wrap pre {
1317 + color: #fff !important;
1318 +}
1319 +
1320 +#db-query-form .CodeMirror-wrap pre .cm-keyword {
1321 + color: #f92472 !important;
1322 +}
1323 +
1324 +#db-query-form .CodeMirror-wrap pre .cm-comment {
1325 + color: #74705d !important;
1326 +}
1327 +
1328 +#db-query-form .CodeMirror-wrap pre .cm-number,
1329 +#db-query-form .CodeMirror-wrap pre .cm-string {
1330 + color: #fff !important;
1331 +}
1332 +
1333 +.visualizer-db-query-form > div {
1334 + display: block;
1335 + width: 15%;
1336 + vertical-align: middle;
1337 +}
1338 +
1339 +#visualizer-db-query {
1340 + padding: 20px;
1341 +}
1342 +
1343 +.visualizer-db-query-form > div:first-child {
1344 + width: 100%;
1345 + margin-bottom: 20px;
1346 +}
1347 +
1348 +.db-wizard-error {
1349 + color: #f00;
1350 +}
1351 +
1352 +.db-wizard-hints,
1353 +.json-wizard-hints,
1354 +.html-table-editor-hints {
1355 + margin-bottom: 30px;
1356 + color: #0085ba;
1357 +}
1358 +
1359 +.db-wizard-hints .visualizer-emboss,
1360 +.db-wizard-hints a,
1361 +.html-table-editor-hints a,
1362 +.json-wizard-hints .visualizer-emboss,
1363 +.json-wizard-hints a {
1364 + color: #f92472;
1365 +}
1366 +
1367 +.db-wizard-hints ul,
1368 +.html-table-editor-hints ul,
1369 +.json-wizard-hints ul {
1370 + list-style: square;
1371 +}
1372 +
1373 +.db-wizard-results .dataTables_wrapper .dataTables_info {
1374 + width: calc(100% - 17px);
1375 +}
1376 +
1377 +
1378 +/******************************************************************************/
1379 +/******************************** data tables *******************************/
1380 +/******************************************************************************/
1381 +.db-wizard-results .dt-button {
1382 + display: none !important;
1383 +}
1384 +
1385 +.dt-button.buttons-print {
1386 + display: none;
1387 +}
1388 +
1389 +/******************************************************************************/
1390 +/******************************** json table *********************************/
1391 +/******************************************************************************/
1392 +#json-conclude-form .results {
1393 + min-width: 10px !important;
1394 +}
1395 +
1396 +#json-conclude-form .json-table {
1397 + width: 85%;
1398 +}
1399 +
1400 +#vz-import-json-url,
1401 +#vz-import-json-root,
1402 +#vz-import-json-paging {
1403 + width: 75%;
1404 +}
1405 +
1406 +#json-conclude-form .json-table,
1407 +#json-conclude-form button#visualizer-json-conclude {
1408 + display: inline-block;
1409 + vertical-align: middle;
1410 +}
1411 +
1412 +.viz-editor-table tbody tr:first-child {
1413 + background-color: #ececec !important;
1414 +}
1415 +
1416 +.viz-editor-table tr th {
1417 + background-color: #cccccc;
1418 +}
1419 +
1420 +.viz-editor-table thead tr th:nth-child(n+1) {
1421 + cursor: move !important;
1422 +}
1423 +
1424 +#json-conclude-form .json-wizard-hints .info,
1425 +.html-table-editor-hints .info {
1426 + margin: 1% 0px;
1427 +}
1428 +
1429 +.viz-step.ui-state-active {
1430 + border-color: #0085BA !important;
1431 + background: #0085BA !important;
1432 + color: #ffffff;
1433 +}
1434 +
1435 +.viz-substep {
1436 + outline: 0 !important;
1437 + border: 0 !important;
1438 + background: none !important;
1439 + text-transform: uppercase;
1440 +}
1441 +
1442 +.viz-substep.ui-state-active {
1443 +}
1444 +
1445 +.viz-substep ~ .ui-accordion-content {
1446 + outline: 0 !important;
1447 + border: 0 !important;
1448 + font-size: smaller;
1449 +}
1450 +
1451 +.viz-substep ~ div {
1452 + display: table;
1453 +}
1454 +
1455 +.viz-substep ~ div > div {
1456 + display: table-row;
1457 +}
1458 +
1459 +.viz-substep ~ div > div div {
1460 + display: table-cell;
1461 + padding: 5px;
1462 +}
1463 +
1464 +/******************************************************************************/
1465 +/******************************** html table editor **************************/
1466 +/******************************************************************************/
1467 +.viz-simple-editor-type,
1468 +.viz-simple-editor {
1469 + display: none;
1470 +}
1471 +
1472 +.viz-table-editor {
1473 + width: 75%;
1474 + margin-left: 2%;
1475 +}
1476 +
1477 +.viz-html-table,
1478 +button#visualizer-save-html-table {
1479 + display: inline-block;
1480 + vertical-align: middle;
1481 +}
1482 +
1483 +
1484 +/******************************************************************************/
1485 +/******************************** text area editor **************************/
1486 +/******************************************************************************/
1487 +.viz-text-editor {
1488 + padding: 20px;
1489 + z-index: 9999;
1490 + box-sizing: border-box;
1491 + padding-right: 320px;
1492 +}
1493 +
1494 +.viz-text-editor textarea {
1495 + width: 85%;
1496 + overflow: auto;
1497 + background: #282923;
1498 + color: #ffffff;
1499 + padding: 15px;
1500 + height: 400px;
1501 + font-size: 15px;
1502 +}
1503 +
1504 +.viz-text-editor textarea,
1505 +button#viz-text-editor-button {
1506 + display: inline-block;
1507 + vertical-align: middle;
1508 +}
1509 +
1510 +/******************************************************************************/
1511 +/******************************** chartjs ***********************************/
1512 +/******************************************************************************/
1513 +
1514 +canvas.chartjs-render-monitor {
1515 + height: 500px !important;
1516 +}