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