PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.7.9
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.7.9
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 +498 -23 3.0.53.7.9 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,19 @@
767 802 .hidden-setting {
768 803 display: none;
769 804 }
770 805
806 +.viz-select-library {
807 + color: #0085ba;
808 +}
809 +.viz-select-library.viz-hide-libary {
810 + display: none;
811 +}
812 +
813 +.viz-select-library option:first-child {
814 + font-weight: bold;
815 +}
816 +
771 817 /* ====== RESPONSIVE ====== */
772 818
773 819 @media (max-width: 1366px) {
774 820 #rate-stars {
@@ -930,8 +976,9 @@
930 976
931 977 #vz-csv-file-form,
932 978 #vz-one-time-import,
933 979 #vz-schedule-import,
980 +#vz-permissions .only-pro-content,
934 981 .edit-data-content {
935 982 text-align: center;
936 983 }
937 984
@@ -980,9 +1027,8 @@
980 1027 left: 0;
981 1028 width: 100%;
982 1029 opacity: 0;
983 1030 background: rgba(253,253,253,0.9);
984 - -webkit-transition: 0.5s ease;
985 1031 transition: 0.5s ease;
986 1032 }
987 1033
988 1034 .only-pro-feature:hover .only-pro-content {
@@ -1013,9 +1059,8 @@
1013 1059 background: #ff595e;
1014 1060 font-weight: 600;
1015 1061 text-decoration: none;
1016 1062 text-transform: uppercase;
1017 - -webkit-transition: 0.1s ease;
1018 1063 transition: 0.1s ease;
1019 1064 }
1020 1065
1021 1066 .only-pro-content a:hover {
@@ -1055,4 +1100,434 @@
1055 1100 #permissions-form .only-pro-feature > ul {
1056 1101 position: relative;
1057 1102 text-align: center;
1058 1103 }
1104 +
1105 +/******************************************************************************/
1106 +/******************************** DB WIZARD ***********************************/
1107 +/******************************************************************************/
1108 +.db-wizard-condition .select-condition {
1109 + display: none;
1110 +}
1111 +
1112 +.db-wizard-condition .select-condition.active {
1113 + display: block;
1114 + max-width: 50%;
1115 + margin-top: 10px;
1116 + padding-top: 10px;
1117 + border-top: 1px solid #eee;
1118 + font-weight: 500;
1119 +}
1120 +
1121 +.db-wizard-results {
1122 + width: calc(100% - 350px);
1123 +}
1124 +
1125 +#db-wizard-form {
1126 + padding: 25px;
1127 +}
1128 +
1129 +.db-wizard-query label {
1130 + display: block;
1131 + min-width: 150px;
1132 + padding: 20px 0 5px;
1133 + color: rgba(0,0,0,0.85);
1134 + font-size: 18px;
1135 + font-weight: 500;
1136 +}
1137 +
1138 +.db-wizard-query .db-wizard-where label,
1139 +.db-wizard-query .db-wizard-from label {
1140 + padding-top: 0;
1141 +}
1142 +
1143 +.db-wizard-query > div:not(:last-child) {
1144 + margin-bottom: 15px;
1145 +}
1146 +
1147 +.db-wizard-query .select-condition > div {
1148 + display: block;
1149 +}
1150 +
1151 +.db-wizard-query .chosen-container {
1152 + width: auto;
1153 +}
1154 +
1155 +.db-wizard-query .chosen-container-single .chosen-single {
1156 + border: 1px solid #ccc;
1157 + background: #fff;
1158 + box-shadow: none;
1159 + font-size: 13px;
1160 + font-weight: 500;
1161 +}
1162 +
1163 +.db-wizard-templates,
1164 +.db-wizard-templates > div {
1165 + display: block;
1166 +}
1167 +
1168 +.db-wizard-templates > div {
1169 + box-sizing: border-box;
1170 + width: 50%;
1171 + margin-top: 20px;
1172 + padding: 20px;
1173 + border: 1px solid #efefef;
1174 +}
1175 +
1176 +.db-wizard-templates > div:first-child {
1177 + margin-top: 0;
1178 +}
1179 +
1180 +.db-wizard-query .chosen-container-multi .chosen-choices {
1181 + padding: 5px;
1182 + border-color: #ccc;
1183 + background: #fff;
1184 + box-shadow: none;
1185 +}
1186 +
1187 +.db-wizard-results .dataTables_wrapper .dataTables_filter input,
1188 +.db-wizard-query .select-condition-operand input,
1189 +.db-wizard-limit input {
1190 + width: 50%;
1191 + padding-left: 7px;
1192 + border: 1px solid #ccc;
1193 + border-radius: 6px;
1194 + background: #fff;
1195 + box-shadow: none;
1196 + font-size: 13px;
1197 +}
1198 +
1199 +.db-wizard-limit input {
1200 + display: inline;
1201 + width: 150px;
1202 + margin: 0 0 20px 20px;
1203 +}
1204 +
1205 +.db-wizard-limit label {
1206 + display: inline;
1207 +}
1208 +
1209 +.db-wizard-query .select-condition-operand input::-webkit-input-placeholder {
1210 + color: #cdcdcd;
1211 +}
1212 +
1213 +.db-wizard-query .select-condition-operand input:-ms-input-placeholder {
1214 + color: #cdcdcd;
1215 +}
1216 +
1217 +.db-wizard-query .select-condition-operand input::placeholder {
1218 + color: #cdcdcd;
1219 +}
1220 +
1221 +.db-wizard-query .chosen-container-multi .chosen-choices li.search-choice {
1222 + padding: 5px 30px 5px 5px;
1223 + border-color: #ccc;
1224 + background: #fff;
1225 + box-shadow: none;
1226 + font-weight: 600;
1227 +}
1228 +
1229 +.db-wizard-results table > thead > tr > th {
1230 + padding: 15px 8px;
1231 + border: none;
1232 + color: #252422;
1233 + background: #fff;
1234 + font-size: 18px;
1235 + font-weight: 500;
1236 + text-align: left;
1237 +}
1238 +
1239 +.db-wizard-results table > tbody > tr > td,
1240 +.dataTables_info {
1241 + padding: 15px 8px;
1242 + border-top: 1px solid #a2a2a2;
1243 + color: #252422;
1244 + font-size: 14px;
1245 + font-weight: 300;
1246 +}
1247 +
1248 +.db-wizard-results table > tbody > tr.odd {
1249 + background-color: #f7f7f7;
1250 +}
1251 +
1252 +.db-wizard-results table.dataTable.no-footer {
1253 + border: none;
1254 +}
1255 +
1256 +.db-wizard-results .dataTables_wrapper .dataTables_info {
1257 + border-top: 1px solid #ccc5b9;
1258 + color: #a2a2a2;
1259 + font-size: 12px;
1260 + font-weight: 500;
1261 +}
1262 +
1263 +.db-wizard-results .dataTables_filter label {
1264 + font-size: 18px;
1265 + font-weight: 500;
1266 +}
1267 +
1268 +.db-wizard-where-template-remove,
1269 +.db-wizard-where-template-add {
1270 + width: auto;
1271 + height: 25px;
1272 + margin-top: 10px;
1273 + border: none;
1274 + border-radius: 3px;
1275 + color: #fff;
1276 + font-size: 12px;
1277 + cursor: pointer;
1278 + transition: 0.3s ease;
1279 +}
1280 +
1281 +.db-wizard-where-template-remove:hover,
1282 +.db-wizard-where-template-add:hover {
1283 + opacity: 0.8;
1284 +}
1285 +
1286 +.db-wizard-results .dataTables_wrapper .dataTables_filter {
1287 + float: none;
1288 + text-align: left;
1289 +}
1290 +
1291 +.db-wizard-where-template-add {
1292 + background-color: #34a85e;
1293 +}
1294 +
1295 +.db-wizard-where-template-remove {
1296 + background-color: #ff0d00;
1297 +}
1298 +
1299 +#db-query-form .CodeMirror-scroll {
1300 + overflow: hidden !important;
1301 + height: 50%;
1302 + margin: 0;
1303 + padding: 0;
1304 +}
1305 +
1306 +#db-query-form .CodeMirror-wrap {
1307 + height: 200px;
1308 + padding: 15px;
1309 + color: #fff;
1310 + background: #282923;
1311 + font-size: 15px;
1312 +}
1313 +
1314 +#db-query-form .CodeMirror-wrap .CodeMirror-cursor {
1315 + border-left: 1px solid #fff !important;
1316 +}
1317 +
1318 +#db-query-form .CodeMirror-wrap .CodeMirror-placeholder {
1319 + color: #fff;
1320 +}
1321 +
1322 +#db-query-form .CodeMirror-wrap pre {
1323 + color: #fff !important;
1324 +}
1325 +
1326 +#db-query-form .CodeMirror-wrap pre .cm-keyword {
1327 + color: #f92472 !important;
1328 +}
1329 +
1330 +#db-query-form .CodeMirror-wrap pre .cm-comment {
1331 + color: #74705d !important;
1332 +}
1333 +
1334 +#db-query-form .CodeMirror-wrap pre .cm-number,
1335 +#db-query-form .CodeMirror-wrap pre .cm-string {
1336 + color: #fff !important;
1337 +}
1338 +
1339 +.visualizer-db-query-form > div {
1340 + display: block;
1341 + width: 15%;
1342 + vertical-align: middle;
1343 +}
1344 +
1345 +#visualizer-db-query {
1346 + padding: 20px;
1347 +}
1348 +
1349 +.visualizer-db-query-form > div:first-child {
1350 + width: 100%;
1351 + margin-bottom: 20px;
1352 +}
1353 +
1354 +.db-wizard-error {
1355 + color: #f00;
1356 +}
1357 +
1358 +.db-wizard-hints,
1359 +.json-wizard-hints,
1360 +.html-table-editor-hints {
1361 + margin-bottom: 30px;
1362 + color: #0085ba;
1363 +}
1364 +
1365 +.db-wizard-hints .visualizer-emboss,
1366 +.db-wizard-hints a,
1367 +.html-table-editor-hints a,
1368 +.json-wizard-hints .visualizer-emboss,
1369 +.json-wizard-hints a {
1370 + color: #f92472;
1371 +}
1372 +
1373 +.db-wizard-hints ul,
1374 +.html-table-editor-hints ul,
1375 +.json-wizard-hints ul {
1376 + list-style: square;
1377 +}
1378 +
1379 +.db-wizard-results .dataTables_wrapper .dataTables_info {
1380 + width: calc(100% - 17px);
1381 +}
1382 +
1383 +
1384 +/******************************************************************************/
1385 +/******************************** data tables *******************************/
1386 +/******************************************************************************/
1387 +.db-wizard-results .dt-button {
1388 + display: none !important;
1389 +}
1390 +
1391 +.dt-button.buttons-print {
1392 + display: none;
1393 +}
1394 +
1395 +/******************************************************************************/
1396 +/******************************** json table *********************************/
1397 +/******************************************************************************/
1398 +#json-conclude-form .results {
1399 + min-width: 10px !important;
1400 +}
1401 +
1402 +#json-conclude-form .json-table {
1403 + width: 85%;
1404 +}
1405 +
1406 +#vz-import-json-url,
1407 +#vz-import-json-root,
1408 +#vz-import-json-paging {
1409 + width: 75%;
1410 +}
1411 +
1412 +#json-conclude-form .json-table,
1413 +#json-conclude-form button#visualizer-json-conclude {
1414 + display: inline-block;
1415 + vertical-align: middle;
1416 +}
1417 +
1418 +.viz-editor-table tbody tr:first-child {
1419 + background-color: #ececec !important;
1420 +}
1421 +
1422 +.viz-editor-table tr th {
1423 + background-color: #cccccc;
1424 +}
1425 +
1426 +.viz-editor-table thead tr th:nth-child(n+1) {
1427 + cursor: move !important;
1428 +}
1429 +
1430 +#json-conclude-form .json-wizard-hints .info,
1431 +.html-table-editor-hints .info {
1432 + margin: 1% 0px;
1433 +}
1434 +
1435 +.viz-step.ui-state-active {
1436 + border-color: #0085BA !important;
1437 + background: #0085BA !important;
1438 + color: #ffffff;
1439 +}
1440 +
1441 +.viz-substep {
1442 + outline: 0 !important;
1443 + border: 0 !important;
1444 + background: none !important;
1445 + text-transform: uppercase;
1446 +}
1447 +
1448 +.viz-substep.ui-state-active {
1449 +}
1450 +
1451 +.viz-substep ~ .ui-accordion-content {
1452 + outline: 0 !important;
1453 + border: 0 !important;
1454 + font-size: smaller;
1455 +}
1456 +
1457 +.viz-substep ~ div {
1458 + display: table;
1459 +}
1460 +
1461 +.viz-substep ~ div > div {
1462 + display: table-row;
1463 +}
1464 +
1465 +.viz-substep ~ div > div div {
1466 + display: table-cell;
1467 + padding: 5px;
1468 +}
1469 +
1470 +.json-wizard-header .field-title {
1471 + position: absolute;
1472 + left: 30px;
1473 +}
1474 +/******************************************************************************/
1475 +/******************************** html table editor **************************/
1476 +/******************************************************************************/
1477 +.viz-simple-editor-type,
1478 +.viz-simple-editor {
1479 + display: none;
1480 +}
1481 +
1482 +.viz-table-editor {
1483 + width: 75%;
1484 + margin-left: 2%;
1485 +}
1486 +
1487 +.viz-html-table,
1488 +button#visualizer-save-html-table {
1489 + display: inline-block;
1490 + vertical-align: middle;
1491 +}
1492 +
1493 +
1494 +/******************************************************************************/
1495 +/******************************** text area editor **************************/
1496 +/******************************************************************************/
1497 +.viz-text-editor {
1498 + padding: 20px;
1499 + z-index: 9999;
1500 + box-sizing: border-box;
1501 + padding-right: 320px;
1502 +}
1503 +
1504 +.viz-text-editor textarea {
1505 + width: 85%;
1506 + overflow: auto;
1507 + background: #282923;
1508 + color: #ffffff;
1509 + padding: 15px;
1510 + height: 400px;
1511 + font-size: 15px;
1512 +}
1513 +
1514 +.viz-text-editor textarea,
1515 +button#viz-text-editor-button {
1516 + display: inline-block;
1517 + vertical-align: middle;
1518 +}
1519 +
1520 +/******************************************************************************/
1521 +/******************************** chartjs ***********************************/
1522 +/******************************************************************************/
1523 +
1524 +canvas.chartjs-render-monitor {
1525 + height: 500px !important;
1526 +}
1527 +
1528 +/******************************************************************************/
1529 +/******************************** Frontend Actions ***********************************/
1530 +/******************************************************************************/
1531 +#vz-frontend-actions .only-pro-inner {
1532 + text-align: center;
1533 +}