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