PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.3.2
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.3.2
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 +438 -19 3.0.53.3.2 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 {
@@ -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;
@@ -365,8 +379,12 @@
365 379 #toolbar .push-right {
366 380 float: right;
367 381 }
368 382
383 +#toolbar .push-left {
384 + float: left;
385 +}
386 +
369 387 .toolbar-div a {
370 388 float: left;
371 389 }
372 390
@@ -437,9 +455,9 @@
437 455 height: 205px;
438 456 padding: 15px;
439 457 border: 1px solid #e0e0e0;
440 458 background-color: white;
441 - background-image: url(../images/chart_types_g.png);
459 + background-image: url(../images/chart_types_june2019_g.png);
442 460 background-repeat: no-repeat;
443 461 background-position: center center;
444 462 }
445 463
@@ -444,9 +462,9 @@
444 462 }
445 463
446 464 .type-label-selected,
447 465 .type-box > .type-label:hover {
448 - background-image: url(../images/chart_types.png);
466 + background-image: url(../images/chart_types_june2019.png);
449 467 }
450 468
451 469 .type-box-area .type-label {
452 470 background-position: 0 -225px;
@@ -483,8 +501,12 @@
483 501 .type-box-column .type-label {
484 502 background-position: -600px -225px;
485 503 }
486 504
505 +.type-box-dataTable .type-label {
506 + background-position: -301px -670px;
507 +}
508 +
487 509 .type-box-table .type-label {
488 510 background-position: -301px -670px;
489 511 }
490 512
@@ -495,8 +517,16 @@
495 517 .type-box-combo .type-label {
496 518 background-position: -597px -670px;
497 519 }
498 520
521 +.type-box-polarArea .type-label {
522 + background-position: -2px -912px;
523 +}
524 +
525 +.type-box-radar .type-label {
526 + background-position: -301px -899px;
527 +}
528 +
499 529 /******************************************************************************/
500 530 /******************************** OTHER STYLES ******************************/
501 531 /******************************************************************************/
502 532
@@ -577,9 +607,8 @@
577 607 box-shadow: none !important;
578 608 text-shadow: none!important;
579 609 font-family: "Open Sans",sans-serif;
580 610 font-weight: 700;
581 - -webkit-transition: all 0.3s ease 0s;
582 611 transition: all 0.3s ease 0s;
583 612 }
584 613
585 614 .computer-btn:hover {
@@ -588,10 +617,8 @@
588 617 color: white !important;
589 618 background: #2f8cea url("../images/computer.png") no-repeat scroll 7px -36px !important;
590 619 box-shadow: 0 1px 0 rgba(171, 171, 171, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15) !important;
591 620 box-shadow: none !important;
592 - -webkit-transition: all 0.3s ease 0s;
593 - -webkit-transition: all 0.3s ease;
594 621 transition: all 0.3s ease 0s;
595 622 transition: all 0.3s ease;
596 623 }
597 624
@@ -608,9 +635,8 @@
608 635 background: #e6e6e6 url("../images/web.png") no-repeat scroll 7px 1px !important;
609 636 box-shadow: none !important;
610 637 font-family: "Open Sans",sans-serif;
611 638 font-weight: 700;
612 - -webkit-transition: all 0.3s ease 0s;
613 639 transition: all 0.3s ease 0s;
614 640 /*margin-left: 2px !important;*/
615 641 }
616 642
@@ -620,10 +646,8 @@
620 646 border: 1px solid #89b158 !important;
621 647 color: white !important;
622 648 background: #89b158 url("../images/web.png") no-repeat scroll 7px -38px !important;
623 649 box-shadow: none !important;
624 - -webkit-transition: all 0.3s ease 0s;
625 - -webkit-transition: all 0.3s ease;
626 650 transition: all 0.3s ease 0s;
627 651 transition: all 0.3s ease;
628 652 }
629 653
@@ -643,9 +667,8 @@
643 667 background: #e6e6e6 url("../images/from_chart.png") no-repeat scroll 7px 1px !important;
644 668 box-shadow: none !important;
645 669 font-family: "Open Sans",sans-serif;
646 670 font-weight: 700;
647 - -webkit-transition: all 0.3s ease 0s;
648 671 transition: all 0.3s ease 0s;
649 672 /*margin-left: 2px !important;
650 673 margin-top: 2px !important;*/
651 674 }
@@ -656,10 +679,8 @@
656 679 border: 1px solid #10aecb !important;
657 680 color: white !important;
658 681 background: #10aecb url("../images/from_chart.png") no-repeat scroll 7px -36px !important;
659 682 box-shadow: none !important;
660 - -webkit-transition: all 0.3s ease 0s;
661 - -webkit-transition: all 0.3s ease;
662 683 transition: all 0.3s ease 0s;
663 684 transition: all 0.3s ease;
664 685 /*margin-top: 2px !important;*/
665 686 }
@@ -683,9 +704,8 @@
683 704 color: white !important;
684 705 background-color: #2f8cea !important;
685 706 box-shadow: none !important;
686 707 text-shadow: none;
687 - -webkit-transition: all 0.3s ease;
688 708 transition: all 0.3s ease;
689 709 }
690 710
691 711 .preview-btn {
@@ -694,9 +714,8 @@
694 714 background-color: #2f8cea !important;
695 715 box-shadow: none !important;
696 716 font-family: "Open Sans",sans-serif;
697 717 font-weight: 700;
698 - -webkit-transition: all 0.3s ease;
699 718 transition: all 0.3s ease;
700 719 }
701 720
702 721 .preview-btn:hover {
@@ -705,9 +724,8 @@
705 724 background-color: #2c80d6 !important;
706 725 box-shadow: none !important;
707 726 font-family: "Open Sans",sans-serif;
708 727 font-weight: 700;
709 - -webkit-transition: all 0.3s ease;
710 728 transition: all 0.3s ease;
711 729 }
712 730
713 731 .show-live-btn {
@@ -727,9 +745,8 @@
727 745 background-color: #ea8c00 !important;
728 746 box-shadow: none !important;
729 747 font-family: "Open Sans",sans-serif;
730 748 font-weight: 700;
731 - -webkit-transition: all 0.3s ease;
732 749 transition: all 0.3s ease;
733 750 }
734 751
735 752 .check-pro-btn {
@@ -767,8 +784,16 @@
767 784 .hidden-setting {
768 785 display: none;
769 786 }
770 787
788 +.viz-select-library {
789 + color: #0085ba;
790 +}
791 +
792 +.viz-select-library option:first-child {
793 + font-weight: bold;
794 +}
795 +
771 796 /* ====== RESPONSIVE ====== */
772 797
773 798 @media (max-width: 1366px) {
774 799 #rate-stars {
@@ -980,9 +1005,8 @@
980 1005 left: 0;
981 1006 width: 100%;
982 1007 opacity: 0;
983 1008 background: rgba(253,253,253,0.9);
984 - -webkit-transition: 0.5s ease;
985 1009 transition: 0.5s ease;
986 1010 }
987 1011
988 1012 .only-pro-feature:hover .only-pro-content {
@@ -1013,9 +1037,8 @@
1013 1037 background: #ff595e;
1014 1038 font-weight: 600;
1015 1039 text-decoration: none;
1016 1040 text-transform: uppercase;
1017 - -webkit-transition: 0.1s ease;
1018 1041 transition: 0.1s ease;
1019 1042 }
1020 1043
1021 1044 .only-pro-content a:hover {
@@ -1055,4 +1078,400 @@
1055 1078 #permissions-form .only-pro-feature > ul {
1056 1079 position: relative;
1057 1080 text-align: center;
1058 1081 }
1082 +
1083 +/******************************************************************************/
1084 +/******************************** DB WIZARD ***********************************/
1085 +/******************************************************************************/
1086 +.db-wizard-condition .select-condition {
1087 + display: none;
1088 +}
1089 +
1090 +.db-wizard-condition .select-condition.active {
1091 + display: block;
1092 + max-width: 50%;
1093 + margin-top: 10px;
1094 + padding-top: 10px;
1095 + border-top: 1px solid #eee;
1096 + font-weight: 500;
1097 +}
1098 +
1099 +.db-wizard-results {
1100 + width: calc(100% - 350px);
1101 +}
1102 +
1103 +#db-wizard-form {
1104 + padding: 25px;
1105 +}
1106 +
1107 +.db-wizard-query label {
1108 + display: block;
1109 + min-width: 150px;
1110 + padding: 20px 0 5px;
1111 + color: rgba(0,0,0,0.85);
1112 + font-size: 18px;
1113 + font-weight: 500;
1114 +}
1115 +
1116 +.db-wizard-query .db-wizard-where label,
1117 +.db-wizard-query .db-wizard-from label {
1118 + padding-top: 0;
1119 +}
1120 +
1121 +.db-wizard-query > div:not(:last-child) {
1122 + margin-bottom: 15px;
1123 +}
1124 +
1125 +.db-wizard-query .select-condition > div {
1126 + display: block;
1127 +}
1128 +
1129 +.db-wizard-query .chosen-container {
1130 + width: auto;
1131 +}
1132 +
1133 +.db-wizard-query .chosen-container-single .chosen-single {
1134 + border: 1px solid #ccc;
1135 + background: #fff;
1136 + box-shadow: none;
1137 + font-size: 13px;
1138 + font-weight: 500;
1139 +}
1140 +
1141 +.db-wizard-templates,
1142 +.db-wizard-templates > div {
1143 + display: block;
1144 +}
1145 +
1146 +.db-wizard-templates > div {
1147 + box-sizing: border-box;
1148 + width: 50%;
1149 + margin-top: 20px;
1150 + padding: 20px;
1151 + border: 1px solid #efefef;
1152 +}
1153 +
1154 +.db-wizard-templates > div:first-child {
1155 + margin-top: 0;
1156 +}
1157 +
1158 +.db-wizard-query .chosen-container-multi .chosen-choices {
1159 + padding: 5px;
1160 + border-color: #ccc;
1161 + background: #fff;
1162 + box-shadow: none;
1163 +}
1164 +
1165 +.db-wizard-results .dataTables_wrapper .dataTables_filter input,
1166 +.db-wizard-query .select-condition-operand input,
1167 +.db-wizard-limit input {
1168 + width: 50%;
1169 + padding-left: 7px;
1170 + border: 1px solid #ccc;
1171 + border-radius: 6px;
1172 + background: #fff;
1173 + box-shadow: none;
1174 + font-size: 13px;
1175 +}
1176 +
1177 +.db-wizard-limit input {
1178 + display: inline;
1179 + width: 150px;
1180 + margin: 0 0 20px 20px;
1181 +}
1182 +
1183 +.db-wizard-limit label {
1184 + display: inline;
1185 +}
1186 +
1187 +.db-wizard-query .select-condition-operand input::-webkit-input-placeholder {
1188 + color: #cdcdcd;
1189 +}
1190 +
1191 +.db-wizard-query .select-condition-operand input:-ms-input-placeholder {
1192 + color: #cdcdcd;
1193 +}
1194 +
1195 +.db-wizard-query .select-condition-operand input::placeholder {
1196 + color: #cdcdcd;
1197 +}
1198 +
1199 +.db-wizard-query .chosen-container-multi .chosen-choices li.search-choice {
1200 + padding: 5px 30px 5px 5px;
1201 + border-color: #ccc;
1202 + background: #fff;
1203 + box-shadow: none;
1204 + font-weight: 600;
1205 +}
1206 +
1207 +.db-wizard-results table > thead > tr > th {
1208 + padding: 15px 8px;
1209 + border: none;
1210 + color: #252422;
1211 + background: #fff;
1212 + font-size: 18px;
1213 + font-weight: 500;
1214 + text-align: left;
1215 +}
1216 +
1217 +.db-wizard-results table > tbody > tr > td,
1218 +.dataTables_info {
1219 + padding: 15px 8px;
1220 + border-top: 1px solid #a2a2a2;
1221 + color: #252422;
1222 + font-size: 14px;
1223 + font-weight: 300;
1224 +}
1225 +
1226 +.db-wizard-results table > tbody > tr.odd {
1227 + background-color: #f7f7f7;
1228 +}
1229 +
1230 +.db-wizard-results table.dataTable.no-footer {
1231 + border: none;
1232 +}
1233 +
1234 +.db-wizard-results .dataTables_wrapper .dataTables_info {
1235 + border-top: 1px solid #ccc5b9;
1236 + color: #a2a2a2;
1237 + font-size: 12px;
1238 + font-weight: 500;
1239 +}
1240 +
1241 +.db-wizard-results .dataTables_filter label {
1242 + font-size: 18px;
1243 + font-weight: 500;
1244 +}
1245 +
1246 +.db-wizard-where-template-remove,
1247 +.db-wizard-where-template-add {
1248 + width: auto;
1249 + height: 25px;
1250 + margin-top: 10px;
1251 + border: none;
1252 + border-radius: 3px;
1253 + color: #fff;
1254 + font-size: 12px;
1255 + cursor: pointer;
1256 + transition: 0.3s ease;
1257 +}
1258 +
1259 +.db-wizard-where-template-remove:hover,
1260 +.db-wizard-where-template-add:hover {
1261 + opacity: 0.8;
1262 +}
1263 +
1264 +.db-wizard-results .dataTables_wrapper .dataTables_filter {
1265 + float: none;
1266 + text-align: left;
1267 +}
1268 +
1269 +.db-wizard-where-template-add {
1270 + background-color: #34a85e;
1271 +}
1272 +
1273 +.db-wizard-where-template-remove {
1274 + background-color: #ff0d00;
1275 +}
1276 +
1277 +#db-query-form .CodeMirror-scroll {
1278 + overflow: hidden !important;
1279 + height: 50%;
1280 + margin: 0;
1281 + padding: 0;
1282 +}
1283 +
1284 +#db-query-form .CodeMirror-wrap {
1285 + height: 200px;
1286 + padding: 15px;
1287 + color: #fff;
1288 + background: #282923;
1289 + font-size: 15px;
1290 +}
1291 +
1292 +#db-query-form .CodeMirror-wrap .CodeMirror-cursor {
1293 + border-left: 1px solid #fff !important;
1294 +}
1295 +
1296 +#db-query-form .CodeMirror-wrap .CodeMirror-placeholder {
1297 + color: #fff;
1298 +}
1299 +
1300 +#db-query-form .CodeMirror-wrap pre {
1301 + color: #fff !important;
1302 +}
1303 +
1304 +#db-query-form .CodeMirror-wrap pre .cm-keyword {
1305 + color: #f92472 !important;
1306 +}
1307 +
1308 +#db-query-form .CodeMirror-wrap pre .cm-comment {
1309 + color: #74705d !important;
1310 +}
1311 +
1312 +#db-query-form .CodeMirror-wrap pre .cm-number,
1313 +#db-query-form .CodeMirror-wrap pre .cm-string {
1314 + color: #fff !important;
1315 +}
1316 +
1317 +.visualizer-db-query-form > div {
1318 + display: block;
1319 + width: 15%;
1320 + vertical-align: middle;
1321 +}
1322 +
1323 +#visualizer-db-query {
1324 + padding: 20px;
1325 +}
1326 +
1327 +.visualizer-db-query-form > div:first-child {
1328 + width: 100%;
1329 + margin-bottom: 20px;
1330 +}
1331 +
1332 +.db-wizard-error {
1333 + color: #f00;
1334 +}
1335 +
1336 +.db-wizard-hints,
1337 +.json-wizard-hints,
1338 +.html-table-editor-hints {
1339 + margin-bottom: 30px;
1340 + color: #0085ba;
1341 +}
1342 +
1343 +.db-wizard-hints .visualizer-emboss,
1344 +.db-wizard-hints a,
1345 +.html-table-editor-hints a,
1346 +.json-wizard-hints .visualizer-emboss,
1347 +.json-wizard-hints a {
1348 + color: #f92472;
1349 +}
1350 +
1351 +.db-wizard-hints ul,
1352 +.html-table-editor-hints ul,
1353 +.json-wizard-hints ul {
1354 + list-style: square;
1355 +}
1356 +
1357 +.db-wizard-results .dataTables_wrapper .dataTables_info {
1358 + width: calc(100% - 17px);
1359 +}
1360 +
1361 +#vz-chart-docs {
1362 + right: 85px;
1363 + bottom: 40px;
1364 + width: 35%;
1365 +}
1366 +
1367 +#vz-chart-docs a {
1368 + text-decoration: none;
1369 +}
1370 +
1371 +/******************************************************************************/
1372 +/******************************** data tables *******************************/
1373 +/******************************************************************************/
1374 +.db-wizard-results .dt-button {
1375 + display: none !important;
1376 +}
1377 +
1378 +.dt-button.buttons-print {
1379 + display: none;
1380 +}
1381 +
1382 +/******************************************************************************/
1383 +/******************************** json table *********************************/
1384 +/******************************************************************************/
1385 +#json-conclude-form .results {
1386 + min-width: 10px !important;
1387 +}
1388 +
1389 +#json-conclude-form .json-table,
1390 +#vz-import-json-url,
1391 +#vz-import-json-root,
1392 +#vz-import-json-paging {
1393 + width: 85%;
1394 +}
1395 +
1396 +#json-conclude-form .json-table,
1397 +#json-conclude-form button#visualizer-json-conclude {
1398 + display: inline-block;
1399 + vertical-align: middle;
1400 +}
1401 +
1402 +.viz-editor-table tbody tr:first-child {
1403 + background-color: #ececec !important;
1404 +}
1405 +
1406 +.viz-editor-table tr th {
1407 + background-color: #cccccc;
1408 +}
1409 +
1410 +.viz-editor-table thead tr th:nth-child(n+1) {
1411 + cursor: move !important;
1412 +}
1413 +
1414 +#json-conclude-form .json-wizard-hints .info,
1415 +.html-table-editor-hints .info {
1416 + margin: 1% 0px;
1417 +}
1418 +
1419 +.viz-step.ui-state-active {
1420 + border-color: #0085BA !important;
1421 + background: #0085BA !important;
1422 + color: #ffffff;
1423 +}
1424 +
1425 +/******************************************************************************/
1426 +/******************************** html table editor **************************/
1427 +/******************************************************************************/
1428 +.viz-simple-editor-type,
1429 +.viz-simple-editor {
1430 + display: none;
1431 +}
1432 +
1433 +.viz-table-editor {
1434 + width: 75%;
1435 + margin-left: 2%;
1436 +}
1437 +
1438 +.viz-html-table,
1439 +button#visualizer-save-html-table {
1440 + display: inline-block;
1441 + vertical-align: middle;
1442 +}
1443 +
1444 +
1445 +/******************************************************************************/
1446 +/******************************** text area editor **************************/
1447 +/******************************************************************************/
1448 +.viz-text-editor {
1449 + padding: 20px;
1450 + z-index: 9999;
1451 + box-sizing: border-box;
1452 + padding-right: 320px;
1453 +}
1454 +
1455 +.viz-text-editor textarea {
1456 + width: 85%;
1457 + overflow: auto;
1458 + background: #282923;
1459 + color: #ffffff;
1460 + padding: 15px;
1461 + height: 400px;
1462 + font-size: 15px;
1463 +}
1464 +
1465 +.viz-text-editor textarea,
1466 +button#viz-text-editor-button {
1467 + display: inline-block;
1468 + vertical-align: middle;
1469 +}
1470 +
1471 +/******************************************************************************/
1472 +/******************************** chartjs ***********************************/
1473 +/******************************************************************************/
1474 +
1475 +canvas.chartjs-render-monitor {
1476 + height: 500px !important;
1477 +}