| @@ -52,19 +52,19 @@ | ||
| 52 | 52 | /******************************** SIDEBAR ***********************************/ |
| 53 | 53 | /******************************************************************************/ |
| 54 | 54 | |
| 55 | 55 | #sidebar { |
| 56 | - overflow: auto; | |
| 56 | + overflow-x: hidden; | |
| 57 | + overflow-y: auto; | |
| 57 | 58 | position: absolute; |
| 58 | - z-index: 75; | |
| 59 | + z-index: 80; | |
| 59 | 60 | top: 0; |
| 60 | 61 | right: 0; |
| 61 | 62 | bottom: 60px; |
| 62 | 63 | width: 350px; |
| 63 | - border-left: 1px solid #dfdfdf; | |
| 64 | - background: whitesmoke; | |
| 65 | - | |
| 66 | - -webkit-overflow-scrolling: touch; | |
| 64 | + border-left: 1px solid #ddd; | |
| 65 | + background: #f8f9fa; | |
| 66 | + overscroll-behavior: contain; | |
| 67 | 67 | } |
| 68 | 68 | |
| 69 | 69 | .viz-group { |
| 70 | 70 | margin: 0; |
| @@ -82,13 +82,13 @@ | ||
| 82 | 82 | background: #fff; |
| 83 | 83 | } |
| 84 | 84 | |
| 85 | 85 | .viz-group-wrapper ul .viz-group-title { |
| 86 | - border-top: 1px solid #ddd; | |
| 86 | + border-top: 1px solid #e5e5e5; | |
| 87 | 87 | } |
| 88 | 88 | |
| 89 | 89 | .viz-group-wrapper ul li { |
| 90 | - border-top: 1px solid #ddd; | |
| 90 | + border-top: 1px solid #e5e5e5; | |
| 91 | 91 | } |
| 92 | 92 | |
| 93 | 93 | .viz-group-wrapper ul ul li.viz-subsection { |
| 94 | 94 | margin: 5px; |
| @@ -97,19 +97,19 @@ | ||
| 97 | 97 | |
| 98 | 98 | .viz-group-wrapper .viz-group .viz-group .viz-group-title { |
| 99 | 99 | position: relative; |
| 100 | 100 | margin: 0; |
| 101 | - padding: 10px 10px 11px 14px; | |
| 101 | + padding: 12px 36px 12px 16px; | |
| 102 | 102 | border-top: none; |
| 103 | 103 | border-bottom: none; |
| 104 | - border-left: 4px solid #fff; | |
| 104 | + border-left: 4px solid transparent; | |
| 105 | 105 | color: #555d66; |
| 106 | 106 | background-color: #fff; |
| 107 | - font-size: 14px; | |
| 107 | + font-size: 13px; | |
| 108 | 108 | font-weight: 600; |
| 109 | - line-height: 21px; | |
| 109 | + line-height: 1.4; | |
| 110 | 110 | cursor: pointer; |
| 111 | - transition: 0.15s color ease-in-out,0.15s background-color ease-in-out,0.15s border-color ease-in-out; | |
| 111 | + transition: 0.15s color ease-in-out, 0.15s background-color ease-in-out, 0.15s border-color ease-in-out; | |
| 112 | 112 | } |
| 113 | 113 | |
| 114 | 114 | .viz-title-small { |
| 115 | 115 | font-size: smaller; |
| @@ -124,13 +124,15 @@ | ||
| 124 | 124 | |
| 125 | 125 | .viz-group-wrapper .viz-group .viz-group .viz-group-title:after { |
| 126 | 126 | position: absolute; |
| 127 | 127 | z-index: 1; |
| 128 | - top: 11px; | |
| 129 | - right: 10px; | |
| 130 | - color: #a0a5aa; | |
| 131 | - font: 400 20px/1 dashicons; | |
| 128 | + top: 50%; | |
| 129 | + right: 12px; | |
| 130 | + transform: translateY(-50%); | |
| 131 | + color: inherit; | |
| 132 | + font: 400 18px/1 dashicons; | |
| 132 | 133 | content: "\f345"; |
| 134 | + opacity: 0.6; | |
| 133 | 135 | } |
| 134 | 136 | |
| 135 | 137 | .viz-group-wrapper .viz-group .viz-group.open .viz-group-title:after { |
| 136 | 138 | content: "\f347"; |
| @@ -173,15 +175,17 @@ | ||
| 173 | 175 | position: relative; |
| 174 | 176 | width: 100%; |
| 175 | 177 | height: 100%; |
| 176 | 178 | margin: 0; |
| 179 | + padding-bottom: 60px; | |
| 177 | 180 | } |
| 178 | 181 | |
| 179 | -.viz-group.bottom-fixed { | |
| 182 | +.viz-group.bottom-fixed { | |
| 180 | 183 | display: block; |
| 181 | - position: absolute; | |
| 182 | - bottom: 0; | |
| 183 | - width: 100%; | |
| 184 | + position: fixed; | |
| 185 | + width: 350px; | |
| 186 | + padding: 12px; | |
| 187 | + margin: 0 auto; | |
| 184 | 188 | } |
| 185 | 189 | |
| 186 | 190 | .viz-group ul li h2, |
| 187 | 191 | .viz-group ul li h3 { |
| @@ -197,9 +201,9 @@ | ||
| 197 | 201 | .viz-group-content { |
| 198 | 202 | display: none; |
| 199 | 203 | margin: 0; |
| 200 | 204 | padding: 0; |
| 201 | - background-color: #fdfdfd; | |
| 205 | + background-color: #fff; | |
| 202 | 206 | } |
| 203 | 207 | |
| 204 | 208 | div.viz-group-content { |
| 205 | 209 | padding: 15px; |
| @@ -232,39 +236,46 @@ | ||
| 232 | 236 | |
| 233 | 237 | .viz-section-title { |
| 234 | 238 | display: block; |
| 235 | 239 | position: relative; |
| 236 | - margin-bottom: 5px; | |
| 237 | - padding: 4px 20px; | |
| 238 | - border-top: 1px solid #eee; | |
| 239 | - border-bottom: 1px solid #eee; | |
| 240 | - background-color: rgba(0, 0, 0, 0.02); | |
| 241 | - box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1); | |
| 242 | - font-weight: bold; | |
| 240 | + margin-bottom: 0; | |
| 241 | + padding: 10px 36px 10px 16px; | |
| 242 | + border-top: 1px solid #e5e5e5; | |
| 243 | + border-left: 3px solid transparent; | |
| 244 | + background-color: #f8f9fa; | |
| 245 | + font-size: 12px; | |
| 246 | + font-weight: 600; | |
| 247 | + color: #555d66; | |
| 248 | + text-transform: uppercase; | |
| 249 | + letter-spacing: 0.4px; | |
| 243 | 250 | cursor: pointer; |
| 251 | + transition: border-left-color 0.15s ease-in-out, color 0.15s ease-in-out, background-color 0.15s ease-in-out; | |
| 244 | 252 | } |
| 245 | 253 | |
| 254 | +.viz-section-title:hover, | |
| 255 | +.viz-section-title.open { | |
| 256 | + border-left-color: #0073aa; | |
| 257 | + color: #0073aa; | |
| 258 | + background-color: #f0f6fb; | |
| 259 | +} | |
| 260 | + | |
| 246 | 261 | .viz-group-wrapper ul ul li .viz-section-title { |
| 247 | - margin-bottom: 0; | |
| 248 | - border: none; | |
| 249 | - box-shadow: none; | |
| 262 | + border-left: 3px solid transparent; | |
| 250 | 263 | } |
| 251 | 264 | |
| 252 | 265 | .viz-section-title::after { |
| 253 | 266 | position: absolute; |
| 254 | - z-index: 1; | |
| 255 | - top: 13px; | |
| 256 | - right: 20px; | |
| 257 | - width: 0; | |
| 258 | - height: 0; | |
| 259 | - border-width: 4px 4px 0; | |
| 260 | - border-style: solid; | |
| 261 | - border-color: #ccc transparent; | |
| 262 | - content: ""; | |
| 267 | + top: 50%; | |
| 268 | + right: 10px; | |
| 269 | + transform: translateY(-50%); | |
| 270 | + color: inherit; | |
| 271 | + font: 400 16px/1 dashicons; | |
| 272 | + content: "\f345"; | |
| 273 | + opacity: 0.6; | |
| 263 | 274 | } |
| 264 | 275 | |
| 265 | 276 | .viz-section-title.open::after { |
| 266 | - border-width: 0 4px 4px; | |
| 277 | + content: "\f347"; | |
| 267 | 278 | } |
| 268 | 279 | |
| 269 | 280 | .section-items, |
| 270 | 281 | .viz-section-items { |
| @@ -310,9 +321,9 @@ | ||
| 310 | 321 | |
| 311 | 322 | .section-delimiter, |
| 312 | 323 | .viz-section-delimiter { |
| 313 | 324 | margin: 15px 0; |
| 314 | - border-top: 1px dashed #ccc; | |
| 325 | + border-top: 1px solid #e5e5e5; | |
| 315 | 326 | } |
| 316 | 327 | |
| 317 | 328 | .viz-section-table-column { |
| 318 | 329 | width: 50%; |
| @@ -350,9 +361,9 @@ | ||
| 350 | 361 | |
| 351 | 362 | #rate-the-plugin { |
| 352 | 363 | margin-top: 40px; |
| 353 | 364 | padding: 20px; |
| 354 | - border-top: 1px dashed #ddd; | |
| 365 | + border-top: 1px solid #e5e5e5; | |
| 355 | 366 | text-align: center; |
| 356 | 367 | } |
| 357 | 368 | |
| 358 | 369 | .rate-the-plugin { |
| @@ -392,10 +403,98 @@ | ||
| 392 | 403 | padding: 0; |
| 393 | 404 | } |
| 394 | 405 | |
| 395 | 406 | #viz-tabs .wp-color-picker { |
| 396 | - width: 4rem !important; | |
| 407 | + width: 4rem !important; | |
| 397 | 408 | } |
| 409 | + | |
| 410 | +/* Modern flat tab nav */ | |
| 411 | +#viz-tabs .ui-tabs-nav { | |
| 412 | + display: flex; | |
| 413 | + padding: 0; | |
| 414 | + margin: 0; | |
| 415 | + background: #fff; | |
| 416 | + border: none; | |
| 417 | + border-bottom: 2px solid #e5e5e5; | |
| 418 | + border-radius: 0; | |
| 419 | + box-shadow: none; | |
| 420 | +} | |
| 421 | + | |
| 422 | +#viz-tabs .ui-tabs-nav li { | |
| 423 | + flex: 1; | |
| 424 | + margin: 0; | |
| 425 | + border: none; | |
| 426 | + border-bottom: 2px solid transparent; | |
| 427 | + border-radius: 0; | |
| 428 | + background: transparent; | |
| 429 | + top: 2px; | |
| 430 | + transition: border-color 0.15s ease-in-out; | |
| 431 | +} | |
| 432 | + | |
| 433 | +#viz-tabs .ui-tabs-nav li a { | |
| 434 | + display: block; | |
| 435 | + width: 100%; | |
| 436 | + padding: 10px 0; | |
| 437 | + color: #555d66; | |
| 438 | + font-size: 13px; | |
| 439 | + font-weight: 500; | |
| 440 | + text-align: center; | |
| 441 | + box-sizing: border-box; | |
| 442 | +} | |
| 443 | + | |
| 444 | +#viz-tabs .ui-tabs-nav li:hover a { | |
| 445 | + color: #0073aa; | |
| 446 | +} | |
| 447 | + | |
| 448 | +#viz-tabs .ui-tabs-nav .ui-state-active { | |
| 449 | + border-bottom-color: #0073aa; | |
| 450 | + background: transparent; | |
| 451 | +} | |
| 452 | + | |
| 453 | +#viz-tabs .ui-tabs-nav .ui-state-active a { | |
| 454 | + color: #0073aa; | |
| 455 | + font-weight: 600; | |
| 456 | +} | |
| 457 | + | |
| 458 | +#viz-tabs .ui-tabs-nav li a:focus, | |
| 459 | +#viz-tabs .ui-tabs-nav li.ui-state-focus a { | |
| 460 | + outline: none; | |
| 461 | + box-shadow: none; | |
| 462 | + border-radius: 2px; | |
| 463 | +} | |
| 464 | + | |
| 465 | +.viz-info-panel { | |
| 466 | + display: flex; | |
| 467 | + flex-direction: column; | |
| 468 | + padding: 16px; | |
| 469 | + gap: 14px; | |
| 470 | + background: #fff; | |
| 471 | + border-bottom: 1px solid #e5e5e5; | |
| 472 | +} | |
| 473 | + | |
| 474 | +.viz-info-panel label { | |
| 475 | + margin: 0; | |
| 476 | + padding: 0; | |
| 477 | + font-weight: bold; | |
| 478 | +} | |
| 479 | + | |
| 480 | +.viz-info-panel input { | |
| 481 | + flex: 1; | |
| 482 | +} | |
| 483 | + | |
| 484 | +.viz-info-panel .viz-info-item { | |
| 485 | + display: flex; | |
| 486 | + flex-direction: column; | |
| 487 | + flex: 1; | |
| 488 | + gap: 3px; | |
| 489 | +} | |
| 490 | + | |
| 491 | +.viz-info-panel .viz-info-row { | |
| 492 | + display: flex; | |
| 493 | + flex-direction: row; | |
| 494 | + gap: 5px; | |
| 495 | +} | |
| 496 | + | |
| 398 | 497 | /******************************************************************************/ |
| 399 | 498 | /******************************** TOOLBAR ***********************************/ |
| 400 | 499 | /******************************************************************************/ |
| 401 | 500 | |
| @@ -432,8 +531,20 @@ | ||
| 432 | 531 | width: 30%; |
| 433 | 532 | vertical-align: top; |
| 434 | 533 | } |
| 435 | 534 | |
| 535 | +#chart-select { | |
| 536 | + display: flex; | |
| 537 | + padding: 12px 8px; | |
| 538 | + justify-content: center; | |
| 539 | + align-items: center; | |
| 540 | + gap: 12px; | |
| 541 | +} | |
| 542 | + | |
| 543 | +#chart-select label { | |
| 544 | + font-weight: bold; | |
| 545 | +} | |
| 546 | + | |
| 436 | 547 | /******************************************************************************/ |
| 437 | 548 | /******************************** TYPE PICKER ******************************/ |
| 438 | 549 | /******************************************************************************/ |
| 439 | 550 | |
| @@ -440,53 +551,68 @@ | ||
| 440 | 551 | .type-box span { |
| 441 | 552 | display: block; |
| 442 | 553 | position: absolute; |
| 443 | 554 | right: 0; |
| 444 | - bottom: -6px; | |
| 555 | + bottom: 0; | |
| 445 | 556 | width: 100%; |
| 446 | - padding: 4px 0; | |
| 447 | - border-top: 1px dashed #ddd; | |
| 448 | - border-bottom: 1px dashed #ddd; | |
| 449 | - background: #e0e0e0; | |
| 450 | - background-color: #efefef; | |
| 451 | - box-shadow: 0 0 8px #ddd; | |
| 452 | - font-weight: bold; | |
| 557 | + padding: 6px 0; | |
| 558 | + border-top: 1px solid #e5e5e5; | |
| 559 | + background-color: #fff; | |
| 560 | + font-weight: 600; | |
| 561 | + font-size: 12px; | |
| 453 | 562 | text-align: center; |
| 563 | + color: #555d66; | |
| 454 | 564 | } |
| 455 | 565 | |
| 456 | 566 | .type-box .pro-upsell { |
| 457 | - color: #c55555; | |
| 567 | + color: #d63638; | |
| 458 | 568 | } |
| 459 | 569 | |
| 460 | 570 | #type-picker { |
| 461 | - width: 954px; | |
| 462 | - margin: 50px auto; | |
| 571 | + max-width: 960px; | |
| 572 | + margin: 30px auto; | |
| 573 | + padding: 0 16px; | |
| 574 | + display: flex; | |
| 575 | + flex-wrap: wrap; | |
| 576 | + gap: 16px; | |
| 463 | 577 | } |
| 464 | 578 | |
| 465 | 579 | .type-box { |
| 466 | - float: left; | |
| 467 | 580 | position: relative; |
| 468 | - margin: 0 20px 20px 0; | |
| 469 | - border: 1px dashed #ddd; | |
| 470 | - background-color: #efefef; | |
| 471 | - box-shadow: 0 0 8px #ddd; | |
| 581 | + border: 1px solid #ddd; | |
| 582 | + border-left: 3px solid transparent; | |
| 583 | + background-color: #fff; | |
| 584 | + box-shadow: 0 1px 3px rgba(0,0,0,0.08); | |
| 585 | + border-radius: 2px; | |
| 586 | + overflow: hidden; | |
| 587 | + transition: border-left-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; | |
| 472 | 588 | } |
| 473 | 589 | |
| 474 | -.type-box:nth-child(3n+3) { | |
| 475 | - margin-right: 0; | |
| 590 | +.type-box:hover, | |
| 591 | +.type-box:has(.type-label-selected) { | |
| 592 | + border-left-color: #0073aa; | |
| 593 | + box-shadow: 0 2px 6px rgba(0,114,170,0.15); | |
| 476 | 594 | } |
| 477 | 595 | |
| 596 | +.type-box.viz-hidden { | |
| 597 | + display: none; | |
| 598 | +} | |
| 599 | + | |
| 478 | 600 | .type-box .pro-upsell .visualizder-pro-label { |
| 479 | 601 | display: inline; |
| 480 | 602 | position: absolute; |
| 481 | 603 | top: 0; |
| 482 | 604 | width: 74px; |
| 483 | - height: 10px; | |
| 484 | 605 | height: 17px; |
| 485 | 606 | border: none; |
| 486 | 607 | color: #fff; |
| 487 | - z-index: 1; | |
| 488 | - background: #c55555; | |
| 608 | + z-index: 4; | |
| 609 | + background: #d63638; | |
| 610 | + font-size: 10px; | |
| 611 | + font-weight: 600; | |
| 612 | + letter-spacing: 0.5px; | |
| 613 | + line-height: 17px; | |
| 614 | + text-align: center; | |
| 489 | 615 | } |
| 490 | 616 | |
| 491 | 617 | .type-label { |
| 492 | 618 | display: block; |
| @@ -492,23 +618,40 @@ | ||
| 492 | 618 | display: block; |
| 493 | 619 | width: 270px; |
| 494 | 620 | height: 205px; |
| 495 | 621 | padding: 15px; |
| 496 | - border: 1px solid #e0e0e0; | |
| 497 | - background-color: white; | |
| 622 | + border: none; | |
| 623 | + background-color: #f9f9f9; | |
| 498 | 624 | background-image: url(../images/chart_types_v395.png); |
| 499 | 625 | background-repeat: no-repeat; |
| 500 | 626 | background-position: center center; |
| 501 | 627 | background-size: 900px 1150px; |
| 502 | 628 | filter: grayscale(100%); |
| 629 | + cursor: pointer; | |
| 630 | + transition: filter 0.15s ease-in-out, background-color 0.15s ease-in-out; | |
| 503 | 631 | } |
| 504 | 632 | |
| 633 | +#type-picker.lib-ChartJS .type-label { | |
| 634 | + background-image: url(../images/chart_types_chartjs.png); | |
| 635 | +} | |
| 636 | + | |
| 637 | +#type-picker.lib-DataTable .type-label { | |
| 638 | + background-image: url(../images/chart_types_datatable.png); | |
| 639 | +} | |
| 640 | + | |
| 505 | 641 | .type-label-selected, |
| 506 | 642 | .type-box .type-label:hover { |
| 507 | -/* background-image: url(../images/chart_types_v340.png);*/ | |
| 508 | 643 | filter: grayscale(0); |
| 644 | + background-color: #f0f7fb; | |
| 509 | 645 | } |
| 510 | 646 | |
| 647 | +.type-label:focus, | |
| 648 | +.viz-group-title:focus, | |
| 649 | +.viz-section-title:focus { | |
| 650 | + outline: 2px solid #2271b1; | |
| 651 | + outline-offset: 2px; | |
| 652 | +} | |
| 653 | + | |
| 511 | 654 | .type-box-area .type-label { |
| 512 | 655 | background-position: -8px -225px; |
| 513 | 656 | } |
| 514 | 657 | |
| @@ -831,9 +974,9 @@ | ||
| 831 | 974 | |
| 832 | 975 | .viz-select-library { |
| 833 | 976 | color: #0085ba; |
| 834 | 977 | } |
| 835 | -.viz-select-library.viz-hide-libary { | |
| 978 | +.viz-select-library.viz-hide-library { | |
| 836 | 979 | display: none; |
| 837 | 980 | } |
| 838 | 981 | |
| 839 | 982 | .viz-select-library option:first-child { |
| @@ -951,12 +1094,56 @@ | ||
| 951 | 1094 | border-bottom: 1px solid #ddd; |
| 952 | 1095 | } |
| 953 | 1096 | |
| 954 | 1097 | #vz-chart-copyright { |
| 955 | - bottom: 10px; | |
| 1098 | + bottom: 60px; | |
| 956 | 1099 | text-align: center; |
| 1100 | + z-index: 999; | |
| 1101 | + background: #f3f3f3; | |
| 957 | 1102 | } |
| 958 | 1103 | |
| 1104 | +/* Import steps — stepped data-source + schedule flow */ | |
| 1105 | +.vz-import-step-btn { | |
| 1106 | + width: 100%; | |
| 1107 | + margin-bottom: 4px !important; | |
| 1108 | + text-align: left; | |
| 1109 | +} | |
| 1110 | + | |
| 1111 | +.vz-import-step-toggle { | |
| 1112 | + display: flex; | |
| 1113 | + justify-content: space-between; | |
| 1114 | + align-items: center; | |
| 1115 | + width: 100%; | |
| 1116 | + margin: 0; | |
| 1117 | + padding: 5px 10px; | |
| 1118 | + background: #f0f0f1; | |
| 1119 | + border: 1px solid #c3c4c7; | |
| 1120 | + border-radius: 2px; | |
| 1121 | + cursor: pointer; | |
| 1122 | + font-size: 13px; | |
| 1123 | + color: #50575e; | |
| 1124 | + line-height: 2; | |
| 1125 | +} | |
| 1126 | + | |
| 1127 | +.vz-import-step-toggle:hover { | |
| 1128 | + background: #e5e5e5; | |
| 1129 | + border-color: #a7aaad; | |
| 1130 | +} | |
| 1131 | + | |
| 1132 | +.vz-import-step-toggle .dashicons { | |
| 1133 | + transition: transform 0.2s ease; | |
| 1134 | + flex-shrink: 0; | |
| 1135 | +} | |
| 1136 | + | |
| 1137 | +.vz-import-step-toggle[aria-expanded="true"] .dashicons { | |
| 1138 | + transform: rotate(180deg); | |
| 1139 | +} | |
| 1140 | + | |
| 1141 | +#vz-wp-sync-options, | |
| 1142 | +#vz-db-sync-options { | |
| 1143 | + padding-top: 8px; | |
| 1144 | +} | |
| 1145 | + | |
| 959 | 1146 | #sidebar { |
| 960 | 1147 | border-left: 1px solid #ddd; |
| 961 | 1148 | background: #f3f3f3; |
| 962 | 1149 | } |
| @@ -1052,8 +1239,9 @@ | ||
| 1052 | 1239 | bottom: 0; |
| 1053 | 1240 | left: 0; |
| 1054 | 1241 | width: 100%; |
| 1055 | 1242 | opacity: 0; |
| 1243 | + pointer-events: none; | |
| 1056 | 1244 | background: rgba(253,253,253,0.9); |
| 1057 | 1245 | transition: 0.5s ease; |
| 1058 | 1246 | } |
| 1059 | 1247 | |
| @@ -1058,23 +1246,29 @@ | ||
| 1058 | 1246 | } |
| 1059 | 1247 | |
| 1060 | 1248 | .only-pro-feature:hover .only-pro-content { |
| 1061 | 1249 | opacity: 1; |
| 1250 | + pointer-events: auto; | |
| 1062 | 1251 | } |
| 1063 | 1252 | |
| 1064 | 1253 | .only-pro-container { |
| 1065 | - display: table; | |
| 1254 | + display: flex; | |
| 1255 | + align-items: center; | |
| 1256 | + justify-content: center; | |
| 1066 | 1257 | width: 100%; |
| 1067 | 1258 | height: 100%; |
| 1068 | 1259 | } |
| 1069 | 1260 | |
| 1070 | 1261 | .only-pro-inner { |
| 1071 | - display: table-cell; | |
| 1072 | - vertical-align: middle; | |
| 1262 | + display: flex; | |
| 1263 | + flex-direction: column; | |
| 1264 | + align-items: center; | |
| 1265 | + justify-content: center; | |
| 1266 | + gap: 12px; | |
| 1073 | 1267 | } |
| 1074 | 1268 | |
| 1075 | 1269 | .only-pro-content p { |
| 1076 | - margin: 0 0 15px; | |
| 1270 | + margin: 0; | |
| 1077 | 1271 | font-size: 14px; |
| 1078 | 1272 | font-weight: 700; |
| 1079 | 1273 | } |
| 1080 | 1274 | |
| @@ -1089,16 +1283,17 @@ | ||
| 1089 | 1283 | border-width: 1px; |
| 1090 | 1284 | border-style: solid; |
| 1091 | 1285 | border-radius: 3px; |
| 1092 | 1286 | } |
| 1093 | -.only-pro-content .only-pro-container a { | |
| 1094 | - color: #fff !important; | |
| 1095 | -} | |
| 1096 | 1287 | |
| 1097 | 1288 | .only-pro-content a:hover { |
| 1098 | 1289 | background: #2D419B; |
| 1099 | 1290 | } |
| 1100 | 1291 | |
| 1292 | +.only-pro-anchor { | |
| 1293 | + position: relative; | |
| 1294 | +} | |
| 1295 | + | |
| 1101 | 1296 | #sidebar::-webkit-scrollbar { |
| 1102 | 1297 | width: 4px; |
| 1103 | 1298 | } |
| 1104 | 1299 | |
| @@ -1106,9 +1301,9 @@ | ||
| 1106 | 1301 | background: #999; |
| 1107 | 1302 | } |
| 1108 | 1303 | |
| 1109 | 1304 | span.viz-section-error { |
| 1110 | - color: #ff000; | |
| 1305 | + color: #ff0000; | |
| 1111 | 1306 | } |
| 1112 | 1307 | |
| 1113 | 1308 | #visualizer-error-manual { |
| 1114 | 1309 | color: #ff595e; |
| @@ -1326,15 +1521,8 @@ | ||
| 1326 | 1521 | .db-wizard-where-template-remove { |
| 1327 | 1522 | background-color: #ff0d00; |
| 1328 | 1523 | } |
| 1329 | 1524 | |
| 1330 | -#db-query-form .CodeMirror-scroll { | |
| 1331 | - overflow: hidden !important; | |
| 1332 | - height: 50%; | |
| 1333 | - margin: 0; | |
| 1334 | - padding: 0; | |
| 1335 | -} | |
| 1336 | - | |
| 1337 | 1525 | #db-query-form .CodeMirror-wrap { |
| 1338 | 1526 | height: 200px; |
| 1339 | 1527 | padding: 15px; |
| 1340 | 1528 | color: #fff; |
| @@ -1354,11 +1542,15 @@ | ||
| 1354 | 1542 | color: #fff !important; |
| 1355 | 1543 | } |
| 1356 | 1544 | |
| 1357 | 1545 | #db-query-form .CodeMirror-wrap pre .cm-keyword { |
| 1358 | - color: #f92472 !important; | |
| 1546 | + color: #FF6188 !important; | |
| 1359 | 1547 | } |
| 1360 | 1548 | |
| 1549 | +#db-query-form .CodeMirror-wrap pre .cm-builtin { | |
| 1550 | + color: #78DCE8 !important; | |
| 1551 | +} | |
| 1552 | + | |
| 1361 | 1553 | #db-query-form .CodeMirror-wrap pre .cm-comment { |
| 1362 | 1554 | color: #74705d !important; |
| 1363 | 1555 | } |
| 1364 | 1556 | |
| @@ -1363,9 +1555,9 @@ | ||
| 1363 | 1555 | } |
| 1364 | 1556 | |
| 1365 | 1557 | #db-query-form .CodeMirror-wrap pre .cm-number, |
| 1366 | 1558 | #db-query-form .CodeMirror-wrap pre .cm-string { |
| 1367 | - color: #fff !important; | |
| 1559 | + color: #A9DC76 !important; | |
| 1368 | 1560 | } |
| 1369 | 1561 | |
| 1370 | 1562 | .visualizer-db-query-form > div { |
| 1371 | 1563 | display: block; |
| @@ -1383,8 +1575,9 @@ | ||
| 1383 | 1575 | } |
| 1384 | 1576 | |
| 1385 | 1577 | .db-wizard-error { |
| 1386 | 1578 | color: #f00; |
| 1579 | + padding: 16px 0; | |
| 1387 | 1580 | } |
| 1388 | 1581 | |
| 1389 | 1582 | .db-wizard-hints, |
| 1390 | 1583 | .json-wizard-hints, |
| @@ -1404,8 +1597,9 @@ | ||
| 1404 | 1597 | .db-wizard-hints ul, |
| 1405 | 1598 | .html-table-editor-hints ul, |
| 1406 | 1599 | .json-wizard-hints ul { |
| 1407 | 1600 | list-style: square; |
| 1601 | + padding: 0 16px; | |
| 1408 | 1602 | } |
| 1409 | 1603 | |
| 1410 | 1604 | .db-wizard-results .dataTables_wrapper .dataTables_info { |
| 1411 | 1605 | width: calc(100% - 17px); |
| @@ -1412,8 +1606,76 @@ | ||
| 1412 | 1606 | } |
| 1413 | 1607 | |
| 1414 | 1608 | |
| 1415 | 1609 | /******************************************************************************/ |
| 1610 | +/************************ manual config JSON editor *************************/ | |
| 1611 | +/******************************************************************************/ | |
| 1612 | +code.viz-manual-config-example { | |
| 1613 | + display: block; | |
| 1614 | + white-space: pre; | |
| 1615 | + background: #f5f5f5; | |
| 1616 | + border: 1px solid #e0e0e0; | |
| 1617 | + border-radius: 3px; | |
| 1618 | + padding: 6px 8px; | |
| 1619 | + margin-top: 6px; | |
| 1620 | + font-size: 11px; | |
| 1621 | + line-height: 1.5; | |
| 1622 | +} | |
| 1623 | + | |
| 1624 | + | |
| 1625 | +textarea[name="manual"] + .CodeMirror { | |
| 1626 | + background: #282923; | |
| 1627 | + color: #f8f8f2; | |
| 1628 | + border-radius: 4px; | |
| 1629 | + height: 200px; | |
| 1630 | + font-size: 13px; | |
| 1631 | +} | |
| 1632 | + | |
| 1633 | +textarea[name="manual"] + .CodeMirror .CodeMirror-scroll { | |
| 1634 | + min-height: 200px; | |
| 1635 | +} | |
| 1636 | + | |
| 1637 | +textarea[name="manual"] + .CodeMirror .CodeMirror-gutters { | |
| 1638 | + background: #1e1f1c; | |
| 1639 | + border-right: 1px solid #404040; | |
| 1640 | + color: #75715e; | |
| 1641 | +} | |
| 1642 | + | |
| 1643 | +textarea[name="manual"] + .CodeMirror .CodeMirror-linenumber { | |
| 1644 | + color: #75715e; | |
| 1645 | +} | |
| 1646 | + | |
| 1647 | +textarea[name="manual"] + .CodeMirror .CodeMirror-cursor { | |
| 1648 | + border-left: 1px solid #f8f8f0; | |
| 1649 | +} | |
| 1650 | + | |
| 1651 | +textarea[name="manual"] + .CodeMirror .CodeMirror-selected { | |
| 1652 | + background: #49483e; | |
| 1653 | +} | |
| 1654 | + | |
| 1655 | +textarea[name="manual"] + .CodeMirror pre.CodeMirror-line, | |
| 1656 | +textarea[name="manual"] + .CodeMirror pre.CodeMirror-line-like { | |
| 1657 | + color: #f8f8f2; | |
| 1658 | +} | |
| 1659 | + | |
| 1660 | +textarea[name="manual"] + .CodeMirror .cm-string { | |
| 1661 | + color: #A9DC76; | |
| 1662 | +} | |
| 1663 | + | |
| 1664 | +textarea[name="manual"] + .CodeMirror .cm-number { | |
| 1665 | + color: #AB9DF2; | |
| 1666 | +} | |
| 1667 | + | |
| 1668 | +textarea[name="manual"] + .CodeMirror .cm-atom { | |
| 1669 | + color: #78DCE8; | |
| 1670 | +} | |
| 1671 | + | |
| 1672 | +textarea[name="manual"] + .CodeMirror .cm-punctuation, | |
| 1673 | +textarea[name="manual"] + .CodeMirror .cm-bracket { | |
| 1674 | + color: #f8f8f2; | |
| 1675 | +} | |
| 1676 | + | |
| 1677 | +/******************************************************************************/ | |
| 1416 | 1678 | /******************************** data tables *******************************/ |
| 1417 | 1679 | /******************************************************************************/ |
| 1418 | 1680 | .db-wizard-results .dt-button { |
| 1419 | 1681 | display: none !important; |
| @@ -1563,6 +1825,53 @@ | ||
| 1563 | 1825 | /******************************************************************************/ |
| 1564 | 1826 | /******************************** Frontend Actions ***********************************/ |
| 1565 | 1827 | /******************************************************************************/ |
| 1566 | 1828 | #vz-frontend-actions .only-pro-inner, #vz-data-controls .only-pro-inner { |
| 1829 | + text-align: center; | |
| 1830 | +} | |
| 1831 | + | |
| 1832 | +/******************************************************************************/ | |
| 1833 | +/******************************** chart type box upsell ***********************/ | |
| 1834 | +/******************************************************************************/ | |
| 1835 | + | |
| 1836 | +.pro-upsell .pro-upsell-overlay { | |
| 1837 | + position: absolute; | |
| 1838 | + width: 100%; | |
| 1839 | + height: 100%; | |
| 1840 | + left: 0; | |
| 1841 | + top: 0; | |
| 1842 | + display: grid; | |
| 1843 | + place-items: center; | |
| 1844 | + background-color: rgba(255, 255, 255, 0.7); | |
| 1845 | + z-index: 1; | |
| 1846 | + opacity: 0; | |
| 1847 | + visibility: hidden; | |
| 1848 | + transition: all .3s ease-in-out; | |
| 1849 | +} | |
| 1850 | +.pro-upsell:hover .pro-upsell-overlay{ | |
| 1851 | + opacity: 1; | |
| 1852 | + visibility: visible; | |
| 1853 | +} | |
| 1854 | + | |
| 1855 | +.pro-upsell .pro-upsell-overlay .button { | |
| 1856 | + width: 155px; | |
| 1857 | + height: 39px; | |
| 1858 | + background: #007CBA; | |
| 1859 | + border-radius: 4px; | |
| 1860 | + display: flex; | |
| 1861 | + align-items: center; | |
| 1862 | + text-align: center; | |
| 1863 | + color: #FFFFFF; | |
| 1864 | + justify-content: center; | |
| 1865 | +} | |
| 1866 | +.pro-upsell .pro-upsell-overlay .button.button-secondary{ | |
| 1867 | + background: #ffffff; | |
| 1868 | + color: #007CBA; | |
| 1869 | +} | |
| 1870 | +.pro-upsell .pro-upsell-overlay .pro-upsell-action { | |
| 1871 | + display: flex; | |
| 1872 | + gap: 20px; | |
| 1873 | +} | |
| 1874 | +.pro-upsell .pro-upsell-overlay .pro-upsell-action .button{ | |
| 1875 | + width: 100%; | |
| 1567 | 1876 | text-align: center; |
| 1568 | 1877 | } |
