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