| @@ -394,8 +394,39 @@ | ||
| 394 | 394 | |
| 395 | 395 | #viz-tabs .wp-color-picker { |
| 396 | 396 | width: 4rem !important; |
| 397 | 397 | } |
| 398 | + | |
| 399 | +.viz-info-panel { | |
| 400 | + display: flex; | |
| 401 | + flex-direction: column; | |
| 402 | + padding: 10px; | |
| 403 | + gap: 10px; | |
| 404 | +} | |
| 405 | + | |
| 406 | +.viz-info-panel label { | |
| 407 | + margin: 0; | |
| 408 | + padding: 0; | |
| 409 | + font-weight: bold; | |
| 410 | +} | |
| 411 | + | |
| 412 | +.viz-info-panel input { | |
| 413 | + flex: 1; | |
| 414 | +} | |
| 415 | + | |
| 416 | +.viz-info-panel .viz-info-item { | |
| 417 | + display: flex; | |
| 418 | + flex-direction: column; | |
| 419 | + flex: 1; | |
| 420 | + gap: 3px; | |
| 421 | +} | |
| 422 | + | |
| 423 | +.viz-info-panel .viz-info-row { | |
| 424 | + display: flex; | |
| 425 | + flex-direction: row; | |
| 426 | + gap: 5px; | |
| 427 | +} | |
| 428 | + | |
| 398 | 429 | /******************************************************************************/ |
| 399 | 430 | /******************************** TOOLBAR ***********************************/ |
| 400 | 431 | /******************************************************************************/ |
| 401 | 432 | |
| @@ -432,8 +463,20 @@ | ||
| 432 | 463 | width: 30%; |
| 433 | 464 | vertical-align: top; |
| 434 | 465 | } |
| 435 | 466 | |
| 467 | +#chart-select { | |
| 468 | + display: flex; | |
| 469 | + padding: 12px 8px; | |
| 470 | + justify-content: center; | |
| 471 | + align-items: center; | |
| 472 | + gap: 12px; | |
| 473 | +} | |
| 474 | + | |
| 475 | +#chart-select label { | |
| 476 | + font-weight: bold; | |
| 477 | +} | |
| 478 | + | |
| 436 | 479 | /******************************************************************************/ |
| 437 | 480 | /******************************** TYPE PICKER ******************************/ |
| 438 | 481 | /******************************************************************************/ |
| 439 | 482 | |
| @@ -470,9 +513,17 @@ | ||
| 470 | 513 | background-color: #efefef; |
| 471 | 514 | box-shadow: 0 0 8px #ddd; |
| 472 | 515 | } |
| 473 | 516 | |
| 474 | -.type-box:nth-child(3n+3) { | |
| 517 | +.type-box.viz-hidden { | |
| 518 | + display: none; | |
| 519 | +} | |
| 520 | + | |
| 521 | +.type-box.viz-hidden { | |
| 522 | + display: none; | |
| 523 | +} | |
| 524 | + | |
| 525 | +.type-box:nth-child(3n+1) { | |
| 475 | 526 | margin-right: 0; |
| 476 | 527 | } |
| 477 | 528 | |
| 478 | 529 | .type-box .pro-upsell .visualizder-pro-label { |
| @@ -483,9 +534,9 @@ | ||
| 483 | 534 | height: 10px; |
| 484 | 535 | height: 17px; |
| 485 | 536 | border: none; |
| 486 | 537 | color: #fff; |
| 487 | - z-index: 1; | |
| 538 | + z-index: 4; | |
| 488 | 539 | background: #c55555; |
| 489 | 540 | } |
| 490 | 541 | |
| 491 | 542 | .type-label { |
| @@ -499,10 +550,19 @@ | ||
| 499 | 550 | background-repeat: no-repeat; |
| 500 | 551 | background-position: center center; |
| 501 | 552 | background-size: 900px 1150px; |
| 502 | 553 | filter: grayscale(100%); |
| 554 | + cursor: pointer; | |
| 503 | 555 | } |
| 504 | 556 | |
| 557 | +#type-picker.lib-ChartJS .type-label { | |
| 558 | + background-image: url(../images/chart_types_chartjs.png); | |
| 559 | +} | |
| 560 | + | |
| 561 | +#type-picker.lib-DataTable .type-label { | |
| 562 | + background-image: url(../images/chart_types_datatable.png); | |
| 563 | +} | |
| 564 | + | |
| 505 | 565 | .type-label-selected, |
| 506 | 566 | .type-box .type-label:hover { |
| 507 | 567 | /* background-image: url(../images/chart_types_v340.png);*/ |
| 508 | 568 | filter: grayscale(0); |
| @@ -831,9 +891,9 @@ | ||
| 831 | 891 | |
| 832 | 892 | .viz-select-library { |
| 833 | 893 | color: #0085ba; |
| 834 | 894 | } |
| 835 | -.viz-select-library.viz-hide-libary { | |
| 895 | +.viz-select-library.viz-hide-library { | |
| 836 | 896 | display: none; |
| 837 | 897 | } |
| 838 | 898 | |
| 839 | 899 | .viz-select-library option:first-child { |
| @@ -1061,16 +1121,20 @@ | ||
| 1061 | 1121 | opacity: 1; |
| 1062 | 1122 | } |
| 1063 | 1123 | |
| 1064 | 1124 | .only-pro-container { |
| 1065 | - display: table; | |
| 1125 | + display: flex; | |
| 1126 | + align-items: center; | |
| 1127 | + justify-content: center; | |
| 1066 | 1128 | width: 100%; |
| 1067 | 1129 | height: 100%; |
| 1068 | 1130 | } |
| 1069 | 1131 | |
| 1070 | 1132 | .only-pro-inner { |
| 1071 | - display: table-cell; | |
| 1072 | - vertical-align: middle; | |
| 1133 | + display: flex; | |
| 1134 | + flex-direction: column; | |
| 1135 | + align-items: center; | |
| 1136 | + justify-content: center; | |
| 1073 | 1137 | } |
| 1074 | 1138 | |
| 1075 | 1139 | .only-pro-content p { |
| 1076 | 1140 | margin: 0 0 15px; |
| @@ -1081,19 +1145,28 @@ | ||
| 1081 | 1145 | .only-pro-content a { |
| 1082 | 1146 | display: inline-block; |
| 1083 | 1147 | padding: 7px 12px; |
| 1084 | 1148 | color: #fff; |
| 1085 | - background: #ff595e; | |
| 1149 | + background: #3F57E1; | |
| 1086 | 1150 | font-weight: 600; |
| 1087 | 1151 | text-decoration: none; |
| 1088 | - text-transform: uppercase; | |
| 1089 | 1152 | transition: 0.1s ease; |
| 1153 | + border-width: 1px; | |
| 1154 | + border-style: solid; | |
| 1155 | + border-radius: 3px; | |
| 1090 | 1156 | } |
| 1157 | +.only-pro-content .only-pro-container a { | |
| 1158 | + color: #fff !important; | |
| 1159 | +} | |
| 1091 | 1160 | |
| 1092 | 1161 | .only-pro-content a:hover { |
| 1093 | - background: #ce484c; | |
| 1162 | + background: #2D419B; | |
| 1094 | 1163 | } |
| 1095 | 1164 | |
| 1165 | +.only-pro-anchor { | |
| 1166 | + position: relative; | |
| 1167 | +} | |
| 1168 | + | |
| 1096 | 1169 | #sidebar::-webkit-scrollbar { |
| 1097 | 1170 | width: 4px; |
| 1098 | 1171 | } |
| 1099 | 1172 | |
| @@ -1321,15 +1394,8 @@ | ||
| 1321 | 1394 | .db-wizard-where-template-remove { |
| 1322 | 1395 | background-color: #ff0d00; |
| 1323 | 1396 | } |
| 1324 | 1397 | |
| 1325 | -#db-query-form .CodeMirror-scroll { | |
| 1326 | - overflow: hidden !important; | |
| 1327 | - height: 50%; | |
| 1328 | - margin: 0; | |
| 1329 | - padding: 0; | |
| 1330 | -} | |
| 1331 | - | |
| 1332 | 1398 | #db-query-form .CodeMirror-wrap { |
| 1333 | 1399 | height: 200px; |
| 1334 | 1400 | padding: 15px; |
| 1335 | 1401 | color: #fff; |
| @@ -1349,11 +1415,15 @@ | ||
| 1349 | 1415 | color: #fff !important; |
| 1350 | 1416 | } |
| 1351 | 1417 | |
| 1352 | 1418 | #db-query-form .CodeMirror-wrap pre .cm-keyword { |
| 1353 | - color: #f92472 !important; | |
| 1419 | + color: #FF6188 !important; | |
| 1354 | 1420 | } |
| 1355 | 1421 | |
| 1422 | +#db-query-form .CodeMirror-wrap pre .cm-builtin { | |
| 1423 | + color: #78DCE8 !important; | |
| 1424 | +} | |
| 1425 | + | |
| 1356 | 1426 | #db-query-form .CodeMirror-wrap pre .cm-comment { |
| 1357 | 1427 | color: #74705d !important; |
| 1358 | 1428 | } |
| 1359 | 1429 | |
| @@ -1358,9 +1428,9 @@ | ||
| 1358 | 1428 | } |
| 1359 | 1429 | |
| 1360 | 1430 | #db-query-form .CodeMirror-wrap pre .cm-number, |
| 1361 | 1431 | #db-query-form .CodeMirror-wrap pre .cm-string { |
| 1362 | - color: #fff !important; | |
| 1432 | + color: #A9DC76 !important; | |
| 1363 | 1433 | } |
| 1364 | 1434 | |
| 1365 | 1435 | .visualizer-db-query-form > div { |
| 1366 | 1436 | display: block; |
| @@ -1378,8 +1448,9 @@ | ||
| 1378 | 1448 | } |
| 1379 | 1449 | |
| 1380 | 1450 | .db-wizard-error { |
| 1381 | 1451 | color: #f00; |
| 1452 | + padding: 16px 0; | |
| 1382 | 1453 | } |
| 1383 | 1454 | |
| 1384 | 1455 | .db-wizard-hints, |
| 1385 | 1456 | .json-wizard-hints, |
| @@ -1399,8 +1470,9 @@ | ||
| 1399 | 1470 | .db-wizard-hints ul, |
| 1400 | 1471 | .html-table-editor-hints ul, |
| 1401 | 1472 | .json-wizard-hints ul { |
| 1402 | 1473 | list-style: square; |
| 1474 | + padding: 0 16px; | |
| 1403 | 1475 | } |
| 1404 | 1476 | |
| 1405 | 1477 | .db-wizard-results .dataTables_wrapper .dataTables_info { |
| 1406 | 1478 | width: calc(100% - 17px); |
| @@ -1558,6 +1630,53 @@ | ||
| 1558 | 1630 | /******************************************************************************/ |
| 1559 | 1631 | /******************************** Frontend Actions ***********************************/ |
| 1560 | 1632 | /******************************************************************************/ |
| 1561 | 1633 | #vz-frontend-actions .only-pro-inner, #vz-data-controls .only-pro-inner { |
| 1634 | + text-align: center; | |
| 1635 | +} | |
| 1636 | + | |
| 1637 | +/******************************************************************************/ | |
| 1638 | +/******************************** chart type box upsell ***********************/ | |
| 1639 | +/******************************************************************************/ | |
| 1640 | + | |
| 1641 | +.pro-upsell .pro-upsell-overlay { | |
| 1642 | + position: absolute; | |
| 1643 | + width: 100%; | |
| 1644 | + height: 100%; | |
| 1645 | + left: 0; | |
| 1646 | + top: 0; | |
| 1647 | + display: grid; | |
| 1648 | + place-items: center; | |
| 1649 | + background-color: rgba(255, 255, 255, 0.7); | |
| 1650 | + z-index: 1; | |
| 1651 | + opacity: 0; | |
| 1652 | + visibility: hidden; | |
| 1653 | + transition: all .3s ease-in-out; | |
| 1654 | +} | |
| 1655 | +.pro-upsell:hover .pro-upsell-overlay{ | |
| 1656 | + opacity: 1; | |
| 1657 | + visibility: visible; | |
| 1658 | +} | |
| 1659 | + | |
| 1660 | +.pro-upsell .pro-upsell-overlay .button { | |
| 1661 | + width: 155px; | |
| 1662 | + height: 39px; | |
| 1663 | + background: #007CBA; | |
| 1664 | + border-radius: 4px; | |
| 1665 | + display: flex; | |
| 1666 | + align-items: center; | |
| 1667 | + text-align: center; | |
| 1668 | + color: #FFFFFF; | |
| 1669 | + justify-content: center; | |
| 1670 | +} | |
| 1671 | +.pro-upsell .pro-upsell-overlay .button.button-secondary{ | |
| 1672 | + background: #ffffff; | |
| 1673 | + color: #007CBA; | |
| 1674 | +} | |
| 1675 | +.pro-upsell .pro-upsell-overlay .pro-upsell-action { | |
| 1676 | + display: flex; | |
| 1677 | + gap: 20px; | |
| 1678 | +} | |
| 1679 | +.pro-upsell .pro-upsell-overlay .pro-upsell-action .button{ | |
| 1680 | + width: 100%; | |
| 1562 | 1681 | text-align: center; |
| 1563 | 1682 | } |
