| @@ -33,8 +33,13 @@ | ||
| 33 | 33 | } |
| 34 | 34 | #visualizer-content-wrapper { |
| 35 | 35 | padding: 0; |
| 36 | 36 | } |
| 37 | + | |
| 38 | +.visualizer-banner { | |
| 39 | + margin: 40px 0; | |
| 40 | +} | |
| 41 | + | |
| 37 | 42 | #visualizer-library { |
| 38 | 43 | width: auto; |
| 39 | 44 | margin: 20px -10px; |
| 40 | 45 | display: flex; |
| @@ -137,10 +142,10 @@ | ||
| 137 | 142 | } |
| 138 | 143 | .visualizer-chart-action .tooltip-text::before { |
| 139 | 144 | content: ''; |
| 140 | 145 | position: absolute; |
| 141 | - display: block; | |
| 142 | - width: 0px; | |
| 146 | + display: block; | |
| 147 | + width: 0px; | |
| 143 | 148 | left: 50%; |
| 144 | 149 | top: 0; |
| 145 | 150 | border: 10px solid transparent; |
| 146 | 151 | border-top: 0; |
| @@ -251,11 +256,15 @@ | ||
| 251 | 256 | text-align: center; |
| 252 | 257 | color: #FFFFFF; |
| 253 | 258 | justify-content: center; |
| 254 | 259 | } |
| 260 | +.visualizer-sidebar-box .button.button-secondary{ | |
| 261 | + background: #ffffff; | |
| 262 | + color: #007CBA; | |
| 263 | +} | |
| 255 | 264 | .visualizer-sidebar-box .we-offer{ |
| 256 | - background-color: transparent; | |
| 257 | - color: #007CBA; | |
| 265 | + background-color: transparent; | |
| 266 | + color: #007CBA; | |
| 258 | 267 | font-weight: 400; |
| 259 | 268 | padding: 0px; |
| 260 | 269 | font-size: 14px; |
| 261 | 270 | font-style: italic; |
| @@ -381,8 +390,17 @@ | ||
| 381 | 390 | } |
| 382 | 391 | #visualizer-sidebar .visualizer-sidebar-box p { |
| 383 | 392 | margin-bottom: 0; |
| 384 | 393 | } |
| 394 | +#visualizer-sidebar .visualizer-sidebar-box p.vz-sidebar-box-action { | |
| 395 | + display: flex; | |
| 396 | + gap: 20px; | |
| 397 | + margin-top: 25px; | |
| 398 | +} | |
| 399 | +#visualizer-sidebar .visualizer-sidebar-box p.vz-sidebar-box-action .button{ | |
| 400 | + width: 100%; | |
| 401 | + text-align: center; | |
| 402 | +} | |
| 385 | 403 | #visualizer-sidebar.one-columns { |
| 386 | 404 | border-top: 5px solid #007CBA; |
| 387 | 405 | } |
| 388 | 406 | |
| @@ -516,5 +534,96 @@ | ||
| 516 | 534 | } |
| 517 | 535 | .visualizer-chart{ |
| 518 | 536 | height: calc(100% - 24px); |
| 519 | 537 | } |
| 538 | +} | |
| 539 | + | |
| 540 | + | |
| 541 | + | |
| 542 | +.vizualizer-renew-notice-overlay { | |
| 543 | + display: none; | |
| 544 | + position: fixed; | |
| 545 | + top: 0; | |
| 546 | + left: 0; | |
| 547 | + width: 100%; | |
| 548 | + height: 100%; | |
| 549 | + background-color: rgba(0, 0, 0, 0.5); | |
| 550 | + z-index: 999; | |
| 551 | +} | |
| 552 | + | |
| 553 | +.vizualizer-renew-notice-popup { | |
| 554 | + display: none; | |
| 555 | + position: fixed; | |
| 556 | + top: 50%; | |
| 557 | + left: 50%; | |
| 558 | + transform: translate(-50%, -50%); | |
| 559 | + background-color: #fff; | |
| 560 | + z-index: 1000; | |
| 561 | + padding: 20px; | |
| 562 | + border: 1px solid #ccc; | |
| 563 | + border-radius: 8px; | |
| 564 | + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| 565 | + max-width: 400px; | |
| 566 | + font-weight: bold; | |
| 567 | + margin-bottom: 20px; | |
| 568 | +} | |
| 569 | + | |
| 570 | +.vizualizer-renew-notice-heading { | |
| 571 | + color: #d32f2f; | |
| 572 | + text-align: left; | |
| 573 | + margin-bottom: 10px; | |
| 574 | +} | |
| 575 | + | |
| 576 | +.vizualizer-renew-notice-message { | |
| 577 | + word-wrap: break-word; | |
| 578 | + width: 250px; | |
| 579 | +} | |
| 580 | + | |
| 581 | +.vizualizer-renew-notice-buttons-container { | |
| 582 | + display: grid; | |
| 583 | + grid-template-columns: 1fr; | |
| 584 | + gap: 10px; | |
| 585 | + text-align: center; | |
| 586 | + margin-top: 20px; | |
| 587 | +} | |
| 588 | + | |
| 589 | +.vizualizer-renew-notice-button { | |
| 590 | + padding: 10px 20px; | |
| 591 | + cursor: pointer; | |
| 592 | + color: white; | |
| 593 | + border: none; | |
| 594 | + text-align: center; | |
| 595 | + text-decoration: none; | |
| 596 | + display: inline-block; | |
| 597 | + font-size: 16px; | |
| 598 | + width: 200px; | |
| 599 | + height: 50px; | |
| 600 | + border-radius: 4px; | |
| 601 | + transition: background-color 0.3s; | |
| 602 | + font-weight: bold; | |
| 603 | + margin-top: 10px; | |
| 604 | +} | |
| 605 | + | |
| 606 | +.vizualizer-renew-notice-renew-button { | |
| 607 | + background-color: #008CBA; | |
| 608 | +} | |
| 609 | + | |
| 610 | +.vizualizer-renew-notice-activate-button { | |
| 611 | + background-color: #4CAF50; | |
| 612 | +} | |
| 613 | + | |
| 614 | +.vizualizer-renew-notice-close-icon { | |
| 615 | + position: absolute; | |
| 616 | + top: -10px; | |
| 617 | + right: -70px; | |
| 618 | + cursor: pointer; | |
| 619 | + color: #333; | |
| 620 | + background: none; | |
| 621 | + border: none; | |
| 622 | + padding: 0; | |
| 623 | + outline: none; | |
| 624 | + /* Reset button styles */ | |
| 625 | + display: inline-block; | |
| 626 | + font: inherit; | |
| 627 | + text-align: inherit; | |
| 628 | + text-decoration: none; | |
| 520 | 629 | } |
