PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.2.0
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.2.0
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 +393 -17 3.0.83.2.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,9 +85,8 @@
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 92 .viz-group-wrapper .viz-group .viz-group:hover .viz-group-title,
@@ -123,9 +123,8 @@
123 123 border-left: 4px solid #fff;
124 124 background: #fff;
125 125 box-shadow: none;
126 126 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 127 transition: color 0.15s ease-in-out,border-color 0.15s ease-in-out,background 0.15s ease-in-out;
129 128 }
130 129
131 130 .viz-group-wrapper .viz-group .customize-section-back:hover {
@@ -365,8 +364,12 @@
365 364 #toolbar .push-right {
366 365 float: right;
367 366 }
368 367
368 +#toolbar .push-left {
369 + float: left;
370 +}
371 +
369 372 .toolbar-div a {
370 373 float: left;
371 374 }
372 375
@@ -483,8 +486,12 @@
483 486 .type-box-column .type-label {
484 487 background-position: -600px -225px;
485 488 }
486 489
490 +.type-box-dataTable .type-label {
491 + background-position: -301px -670px;
492 +}
493 +
487 494 .type-box-table .type-label {
488 495 background-position: -301px -670px;
489 496 }
490 497
@@ -577,9 +584,8 @@
577 584 box-shadow: none !important;
578 585 text-shadow: none!important;
579 586 font-family: "Open Sans",sans-serif;
580 587 font-weight: 700;
581 - -webkit-transition: all 0.3s ease 0s;
582 588 transition: all 0.3s ease 0s;
583 589 }
584 590
585 591 .computer-btn:hover {
@@ -588,10 +594,8 @@
588 594 color: white !important;
589 595 background: #2f8cea url("../images/computer.png") no-repeat scroll 7px -36px !important;
590 596 box-shadow: 0 1px 0 rgba(171, 171, 171, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15) !important;
591 597 box-shadow: none !important;
592 - -webkit-transition: all 0.3s ease 0s;
593 - -webkit-transition: all 0.3s ease;
594 598 transition: all 0.3s ease 0s;
595 599 transition: all 0.3s ease;
596 600 }
597 601
@@ -608,9 +612,8 @@
608 612 background: #e6e6e6 url("../images/web.png") no-repeat scroll 7px 1px !important;
609 613 box-shadow: none !important;
610 614 font-family: "Open Sans",sans-serif;
611 615 font-weight: 700;
612 - -webkit-transition: all 0.3s ease 0s;
613 616 transition: all 0.3s ease 0s;
614 617 /*margin-left: 2px !important;*/
615 618 }
616 619
@@ -620,10 +623,8 @@
620 623 border: 1px solid #89b158 !important;
621 624 color: white !important;
622 625 background: #89b158 url("../images/web.png") no-repeat scroll 7px -38px !important;
623 626 box-shadow: none !important;
624 - -webkit-transition: all 0.3s ease 0s;
625 - -webkit-transition: all 0.3s ease;
626 627 transition: all 0.3s ease 0s;
627 628 transition: all 0.3s ease;
628 629 }
629 630
@@ -643,9 +644,8 @@
643 644 background: #e6e6e6 url("../images/from_chart.png") no-repeat scroll 7px 1px !important;
644 645 box-shadow: none !important;
645 646 font-family: "Open Sans",sans-serif;
646 647 font-weight: 700;
647 - -webkit-transition: all 0.3s ease 0s;
648 648 transition: all 0.3s ease 0s;
649 649 /*margin-left: 2px !important;
650 650 margin-top: 2px !important;*/
651 651 }
@@ -656,10 +656,8 @@
656 656 border: 1px solid #10aecb !important;
657 657 color: white !important;
658 658 background: #10aecb url("../images/from_chart.png") no-repeat scroll 7px -36px !important;
659 659 box-shadow: none !important;
660 - -webkit-transition: all 0.3s ease 0s;
661 - -webkit-transition: all 0.3s ease;
662 660 transition: all 0.3s ease 0s;
663 661 transition: all 0.3s ease;
664 662 /*margin-top: 2px !important;*/
665 663 }
@@ -683,9 +681,8 @@
683 681 color: white !important;
684 682 background-color: #2f8cea !important;
685 683 box-shadow: none !important;
686 684 text-shadow: none;
687 - -webkit-transition: all 0.3s ease;
688 685 transition: all 0.3s ease;
689 686 }
690 687
691 688 .preview-btn {
@@ -694,9 +691,8 @@
694 691 background-color: #2f8cea !important;
695 692 box-shadow: none !important;
696 693 font-family: "Open Sans",sans-serif;
697 694 font-weight: 700;
698 - -webkit-transition: all 0.3s ease;
699 695 transition: all 0.3s ease;
700 696 }
701 697
702 698 .preview-btn:hover {
@@ -705,9 +701,8 @@
705 701 background-color: #2c80d6 !important;
706 702 box-shadow: none !important;
707 703 font-family: "Open Sans",sans-serif;
708 704 font-weight: 700;
709 - -webkit-transition: all 0.3s ease;
710 705 transition: all 0.3s ease;
711 706 }
712 707
713 708 .show-live-btn {
@@ -727,9 +722,8 @@
727 722 background-color: #ea8c00 !important;
728 723 box-shadow: none !important;
729 724 font-family: "Open Sans",sans-serif;
730 725 font-weight: 700;
731 - -webkit-transition: all 0.3s ease;
732 726 transition: all 0.3s ease;
733 727 }
734 728
735 729 .check-pro-btn {
@@ -980,9 +974,8 @@
980 974 left: 0;
981 975 width: 100%;
982 976 opacity: 0;
983 977 background: rgba(253,253,253,0.9);
984 - -webkit-transition: 0.5s ease;
985 978 transition: 0.5s ease;
986 979 }
987 980
988 981 .only-pro-feature:hover .only-pro-content {
@@ -1013,9 +1006,8 @@
1013 1006 background: #ff595e;
1014 1007 font-weight: 600;
1015 1008 text-decoration: none;
1016 1009 text-transform: uppercase;
1017 - -webkit-transition: 0.1s ease;
1018 1010 transition: 0.1s ease;
1019 1011 }
1020 1012
1021 1013 .only-pro-content a:hover {
@@ -1054,5 +1046,389 @@
1054 1046
1055 1047 #permissions-form .only-pro-feature > ul {
1056 1048 position: relative;
1057 1049 text-align: center;
1050 +}
1051 +
1052 +/******************************************************************************/
1053 +/******************************** DB WIZARD ***********************************/
1054 +/******************************************************************************/
1055 +.db-wizard-condition .select-condition {
1056 + display: none;
1057 +}
1058 +
1059 +.db-wizard-condition .select-condition.active {
1060 + display: block;
1061 + max-width: 50%;
1062 + margin-top: 10px;
1063 + padding-top: 10px;
1064 + border-top: 1px solid #eee;
1065 + font-weight: 500;
1066 +}
1067 +
1068 +.db-wizard-results {
1069 + width: calc(100% - 350px);
1070 +}
1071 +
1072 +#db-wizard-form {
1073 + padding: 25px;
1074 +}
1075 +
1076 +.db-wizard-query label {
1077 + display: block;
1078 + min-width: 150px;
1079 + padding: 20px 0 5px;
1080 + color: rgba(0,0,0,0.85);
1081 + font-size: 18px;
1082 + font-weight: 500;
1083 +}
1084 +
1085 +.db-wizard-query .db-wizard-where label,
1086 +.db-wizard-query .db-wizard-from label {
1087 + padding-top: 0;
1088 +}
1089 +
1090 +.db-wizard-query > div:not(:last-child) {
1091 + margin-bottom: 15px;
1092 +}
1093 +
1094 +.db-wizard-query .select-condition > div {
1095 + display: block;
1096 +}
1097 +
1098 +.db-wizard-query .chosen-container {
1099 + width: auto;
1100 +}
1101 +
1102 +.db-wizard-query .chosen-container-single .chosen-single {
1103 + border: 1px solid #ccc;
1104 + background: #fff;
1105 + box-shadow: none;
1106 + font-size: 13px;
1107 + font-weight: 500;
1108 +}
1109 +
1110 +.db-wizard-templates,
1111 +.db-wizard-templates > div {
1112 + display: block;
1113 +}
1114 +
1115 +.db-wizard-templates > div {
1116 + box-sizing: border-box;
1117 + width: 50%;
1118 + margin-top: 20px;
1119 + padding: 20px;
1120 + border: 1px solid #efefef;
1121 +}
1122 +
1123 +.db-wizard-templates > div:first-child {
1124 + margin-top: 0;
1125 +}
1126 +
1127 +.db-wizard-query .chosen-container-multi .chosen-choices {
1128 + padding: 5px;
1129 + border-color: #ccc;
1130 + background: #fff;
1131 + box-shadow: none;
1132 +}
1133 +
1134 +.db-wizard-results .dataTables_wrapper .dataTables_filter input,
1135 +.db-wizard-query .select-condition-operand input,
1136 +.db-wizard-limit input {
1137 + width: 50%;
1138 + padding-left: 7px;
1139 + border: 1px solid #ccc;
1140 + border-radius: 6px;
1141 + background: #fff;
1142 + box-shadow: none;
1143 + font-size: 13px;
1144 +}
1145 +
1146 +.db-wizard-limit input {
1147 + display: inline;
1148 + width: 150px;
1149 + margin: 0 0 20px 20px;
1150 +}
1151 +
1152 +.db-wizard-limit label {
1153 + display: inline;
1154 +}
1155 +
1156 +.db-wizard-query .select-condition-operand input::-webkit-input-placeholder {
1157 + color: #cdcdcd;
1158 +}
1159 +
1160 +.db-wizard-query .select-condition-operand input:-ms-input-placeholder {
1161 + color: #cdcdcd;
1162 +}
1163 +
1164 +.db-wizard-query .select-condition-operand input::placeholder {
1165 + color: #cdcdcd;
1166 +}
1167 +
1168 +.db-wizard-query .chosen-container-multi .chosen-choices li.search-choice {
1169 + padding: 5px 30px 5px 5px;
1170 + border-color: #ccc;
1171 + background: #fff;
1172 + box-shadow: none;
1173 + font-weight: 600;
1174 +}
1175 +
1176 +.db-wizard-results table > thead > tr > th {
1177 + padding: 15px 8px;
1178 + border: none;
1179 + color: #252422;
1180 + background: #fff;
1181 + font-size: 18px;
1182 + font-weight: 500;
1183 + text-align: left;
1184 +}
1185 +
1186 +.db-wizard-results table > tbody > tr > td,
1187 +.dataTables_info {
1188 + padding: 15px 8px;
1189 + border-top: 1px solid #a2a2a2;
1190 + color: #252422;
1191 + font-size: 14px;
1192 + font-weight: 300;
1193 +}
1194 +
1195 +.db-wizard-results table > tbody > tr.odd {
1196 + background-color: #f7f7f7;
1197 +}
1198 +
1199 +.db-wizard-results table.dataTable.no-footer {
1200 + border: none;
1201 +}
1202 +
1203 +.db-wizard-results .dataTables_wrapper .dataTables_info {
1204 + border-top: 1px solid #ccc5b9;
1205 + color: #a2a2a2;
1206 + font-size: 12px;
1207 + font-weight: 500;
1208 +}
1209 +
1210 +.db-wizard-results .dataTables_filter label {
1211 + font-size: 18px;
1212 + font-weight: 500;
1213 +}
1214 +
1215 +.db-wizard-where-template-remove,
1216 +.db-wizard-where-template-add {
1217 + width: auto;
1218 + height: 25px;
1219 + margin-top: 10px;
1220 + border: none;
1221 + border-radius: 3px;
1222 + color: #fff;
1223 + font-size: 12px;
1224 + cursor: pointer;
1225 + transition: 0.3s ease;
1226 +}
1227 +
1228 +.db-wizard-where-template-remove:hover,
1229 +.db-wizard-where-template-add:hover {
1230 + opacity: 0.8;
1231 +}
1232 +
1233 +.db-wizard-results .dataTables_wrapper .dataTables_filter {
1234 + float: none;
1235 + text-align: left;
1236 +}
1237 +
1238 +.db-wizard-where-template-add {
1239 + background-color: #34a85e;
1240 +}
1241 +
1242 +.db-wizard-where-template-remove {
1243 + background-color: #ff0d00;
1244 +}
1245 +
1246 +#db-query-form .CodeMirror-scroll {
1247 + overflow: hidden !important;
1248 + height: 50%;
1249 + margin: 0;
1250 + padding: 0;
1251 +}
1252 +
1253 +#db-query-form .CodeMirror-wrap {
1254 + height: 200px;
1255 + padding: 15px;
1256 + color: #fff;
1257 + background: #282923;
1258 + font-size: 15px;
1259 +}
1260 +
1261 +#db-query-form .CodeMirror-wrap .CodeMirror-cursor {
1262 + border-left: 1px solid #fff !important;
1263 +}
1264 +
1265 +#db-query-form .CodeMirror-wrap .CodeMirror-placeholder {
1266 + color: #fff;
1267 +}
1268 +
1269 +#db-query-form .CodeMirror-wrap pre {
1270 + color: #fff !important;
1271 +}
1272 +
1273 +#db-query-form .CodeMirror-wrap pre .cm-keyword {
1274 + color: #f92472 !important;
1275 +}
1276 +
1277 +#db-query-form .CodeMirror-wrap pre .cm-comment {
1278 + color: #74705d !important;
1279 +}
1280 +
1281 +#db-query-form .CodeMirror-wrap pre .cm-number,
1282 +#db-query-form .CodeMirror-wrap pre .cm-string {
1283 + color: #fff !important;
1284 +}
1285 +
1286 +.visualizer-db-query-form > div {
1287 + display: block;
1288 + width: 15%;
1289 + vertical-align: middle;
1290 +}
1291 +
1292 +#visualizer-db-query {
1293 + padding: 20px;
1294 +}
1295 +
1296 +.visualizer-db-query-form > div:first-child {
1297 + width: 100%;
1298 + margin-bottom: 20px;
1299 +}
1300 +
1301 +.db-wizard-error {
1302 + color: #f00;
1303 +}
1304 +
1305 +.db-wizard-hints,
1306 +.json-wizard-hints,
1307 +.html-table-editor-hints {
1308 + margin-bottom: 30px;
1309 + color: #0085ba;
1310 +}
1311 +
1312 +.db-wizard-hints .visualizer-emboss,
1313 +.db-wizard-hints a,
1314 +.html-table-editor-hints a,
1315 +.json-wizard-hints .visualizer-emboss,
1316 +.json-wizard-hints a {
1317 + color: #f92472;
1318 +}
1319 +
1320 +.db-wizard-hints ul,
1321 +.html-table-editor-hints ul,
1322 +.json-wizard-hints ul {
1323 + list-style: square;
1324 +}
1325 +
1326 +.db-wizard-results .dataTables_wrapper .dataTables_info {
1327 + width: calc(100% - 17px);
1328 +}
1329 +
1330 +#vz-chart-docs {
1331 + right: 85px;
1332 + bottom: 40px;
1333 + width: 35%;
1334 +}
1335 +
1336 +#vz-chart-docs a {
1337 + text-decoration: none;
1338 +}
1339 +
1340 +/******************************************************************************/
1341 +/******************************** data tables *******************************/
1342 +/******************************************************************************/
1343 +.db-wizard-results .dt-button {
1344 + display: none !important;
1345 +}
1346 +
1347 +/******************************************************************************/
1348 +/******************************** json table *********************************/
1349 +/******************************************************************************/
1350 +#json-conclude-form .results {
1351 + min-width: 10px !important;
1352 +}
1353 +
1354 +#json-conclude-form .json-table,
1355 +#vz-import-json-url,
1356 +#vz-import-json-root,
1357 +#vz-import-json-paging {
1358 + width: 85%;
1359 +}
1360 +
1361 +#json-conclude-form .json-table,
1362 +#json-conclude-form button#visualizer-json-conclude {
1363 + display: inline-block;
1364 + vertical-align: middle;
1365 +}
1366 +
1367 +.viz-editor-table tbody tr:first-child {
1368 + background-color: #ececec !important;
1369 +}
1370 +
1371 +.viz-editor-table tr th {
1372 + background-color: #cccccc;
1373 +}
1374 +
1375 +.viz-editor-table thead tr th:nth-child(n+1) {
1376 + cursor: move !important;
1377 +}
1378 +
1379 +#json-conclude-form .json-wizard-hints .info,
1380 +.html-table-editor-hints .info {
1381 + margin: 1% 0px;
1382 +}
1383 +
1384 +.viz-step.ui-state-active {
1385 + border-color: #0085BA !important;
1386 + background: #0085BA !important;
1387 + color: #ffffff;
1388 +}
1389 +
1390 +/******************************************************************************/
1391 +/******************************** html table editor **************************/
1392 +/******************************************************************************/
1393 +.viz-simple-editor-type,
1394 +.viz-simple-editor {
1395 + display: none;
1396 +}
1397 +
1398 +.viz-table-editor {
1399 + width: 75%;
1400 + margin-left: 2%;
1401 +}
1402 +
1403 +.viz-html-table,
1404 +button#visualizer-save-html-table {
1405 + display: inline-block;
1406 + vertical-align: middle;
1407 +}
1408 +
1409 +
1410 +/******************************************************************************/
1411 +/******************************** text area editor **************************/
1412 +/******************************************************************************/
1413 +.viz-text-editor {
1414 + padding: 20px;
1415 + z-index: 9999;
1416 + box-sizing: border-box;
1417 + padding-right: 320px;
1418 +}
1419 +
1420 +.viz-text-editor textarea {
1421 + width: 85%;
1422 + overflow: auto;
1423 + background: #282923;
1424 + color: #ffffff;
1425 + padding: 15px;
1426 + height: 400px;
1427 + font-size: 15px;
1428 +}
1429 +
1430 +.viz-text-editor textarea,
1431 +button#viz-text-editor-button {
1432 + display: inline-block;
1433 + vertical-align: middle;
1058 1434 }