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