| @@ -37,8 +37,23 @@ | ||
| 37 | 37 | vipps-mobilepay-button:focus-visible { |
| 38 | 38 | outline: none; |
| 39 | 39 | } |
| 40 | 40 | |
| 41 | +/* Make the express button in checkout match other buttons; aiming for 48px IOK 2026-09-24 | |
| 42 | +* (https://developer.woocommerce.com/docs/features/payments/ux-guidelines/payment-button-size/?utm_source=chatgpt.com#layout-and-spacing) */ | |
| 43 | +.wc-block-components-express-payment--checkout #express-payment-method-vippsexpress div.vipps-express-container { | |
| 44 | + scale: calc(48 / 44); | |
| 45 | + transform-origin: top left; | |
| 46 | + width: calc(100%*44/48); | |
| 47 | +} | |
| 48 | +/* And in the cart. */ | |
| 49 | +.wc-block-components-express-payment--cart #express-payment-method-vippsexpress div.vipps-express-container { | |
| 50 | + scale: calc(48 / 44); | |
| 51 | + transform-origin: top left; | |
| 52 | + width: calc(100%*44/48); | |
| 53 | +} | |
| 54 | + | |
| 55 | + | |
| 41 | 56 | /* Vipps Checkout Widgets */ |
| 42 | 57 | .vipps_checkout_widget_wrapper { |
| 43 | 58 | width: 100%; |
| 44 | 59 | display:flex; |
| @@ -531,4 +546,127 @@ | ||
| 531 | 546 | 100%{ |
| 532 | 547 | background-color:rgb(255,255,255); |
| 533 | 548 | } |
| 534 | 549 | } |
| 550 | + | |
| 551 | + | |
| 552 | +.vipps-mobilepay-dialog { | |
| 553 | + position: fixed; | |
| 554 | + inset: 0; | |
| 555 | + margin: auto; | |
| 556 | + width: min(90vw, 600px); | |
| 557 | + max-height: 90vh; | |
| 558 | + padding: 2.25rem 1.5rem 1.5rem; | |
| 559 | + border: 0; | |
| 560 | + border-radius: 12px; | |
| 561 | + box-sizing: border-box; | |
| 562 | + overflow: auto; | |
| 563 | +} | |
| 564 | + | |
| 565 | +.vipps-mobilepay-dialog::backdrop { | |
| 566 | + background: rgba(0, 0, 0, 0.5); | |
| 567 | +} | |
| 568 | + | |
| 569 | +.vipps-mobilepay-dialog .vipps-form-message { | |
| 570 | + color: #b32d2e; | |
| 571 | + font-weight: 600; | |
| 572 | +} | |
| 573 | + | |
| 574 | +.vipps-mobilepay-dialog form { | |
| 575 | + display: grid; | |
| 576 | + gap: 1rem; | |
| 577 | +} | |
| 578 | + | |
| 579 | +.vipps-mobilepay-dialog button { | |
| 580 | + font-size: 1.25rem; | |
| 581 | + border-width: 2px; | |
| 582 | + padding: 0.5rem 1rem; | |
| 583 | +} | |
| 584 | + | |
| 585 | +.vipps-mobilepay-dialog .dialog-close { | |
| 586 | + position: absolute; | |
| 587 | + top: 0.5rem; | |
| 588 | + right: 0.5rem; | |
| 589 | + width: 2rem; | |
| 590 | + height: 2rem; | |
| 591 | + padding: 0; | |
| 592 | + border: 0; | |
| 593 | + background: transparent; | |
| 594 | + font-size: 1.5rem; | |
| 595 | + line-height: 1; | |
| 596 | + cursor: pointer; | |
| 597 | +} | |
| 598 | + | |
| 599 | +.vipps-mobilepay-dialog .dialog-actions { | |
| 600 | + display: flex; | |
| 601 | + justify-content: center; | |
| 602 | + gap: 1rem; | |
| 603 | + margin-top: 1rem; | |
| 604 | +} | |
| 605 | + | |
| 606 | +@media (max-width: 600px) { | |
| 607 | + .vipps-mobilepay-dialog { | |
| 608 | + width: calc(100vw - 2rem); | |
| 609 | + max-height: calc(100vh - 2rem); | |
| 610 | + padding: 3rem 1rem 1rem; | |
| 611 | + } | |
| 612 | +} | |
| 613 | + | |
| 614 | +/* This button will replace the normal pay for order and confirm order button in classic checkout scenarios */ | |
| 615 | +/* Try to make it look ok for most themes IOK 2026-09-16 */ | |
| 616 | +.woocommerce-order-pay #vipps-classic-checkout-submit.vipps-submit-wrapper { | |
| 617 | + float:right; | |
| 618 | +} | |
| 619 | +#vipps-classic-checkout-submit.vipps-submit-wrapper { | |
| 620 | + border:0;padding:0;margin:0;background-color:transparent; | |
| 621 | +} | |
| 622 | +#vipps-classic-checkout-submit.vipps-submit-wrapper.hidden { | |
| 623 | + display:none !important; | |
| 624 | +} | |
| 625 | +#place_order.hidden { | |
| 626 | + display:none !important; | |
| 627 | +} | |
| 628 | +.vipps-classic-checkout-container { | |
| 629 | + width:100%; | |
| 630 | + text-align: center; | |
| 631 | +} | |
| 632 | + | |
| 633 | +body.processing .vippsoverlay.vipps-redirecting { | |
| 634 | + display: flex; | |
| 635 | + flex-direction: column; | |
| 636 | + align-items: center; | |
| 637 | + justify-content: center; | |
| 638 | + gap: 1.5rem; | |
| 639 | + opacity: 1; | |
| 640 | +} | |
| 641 | + | |
| 642 | +.vippsoverlay.vipps-redirecting .vipps-redirect-status { | |
| 643 | + box-sizing: border-box; | |
| 644 | + max-width: min(90vw, 28rem); | |
| 645 | + margin: 0; | |
| 646 | + padding: 1rem 1.5rem; | |
| 647 | + border: 1px solid #d8d8d8; | |
| 648 | + border-radius: 0.75rem; | |
| 649 | + background: #fff; | |
| 650 | + color: #222; | |
| 651 | + box-shadow: 0 4px 20px rgb(0 0 0 / 18%); | |
| 652 | + font-size: 1.125rem; | |
| 653 | + font-weight: 700; | |
| 654 | + line-height: 1.4; | |
| 655 | + text-align: center; | |
| 656 | +} | |
| 657 | + | |
| 658 | +body.processing .vippsoverlay.vipps-redirecting #floatingCirclesG { | |
| 659 | + position: relative; | |
| 660 | + inset: auto; | |
| 661 | + margin: 0; | |
| 662 | + transform: none; | |
| 663 | +} | |
| 664 | + | |
| 665 | +/* Sometimes Vipps adds a space in the buttons */ | |
| 666 | +div.vipps-cart-purchase a.vipps-express-checkout { | |
| 667 | + text-decoration: none !important; | |
| 668 | +} | |
| 669 | +div.vipps-qr-purchase a.single-product.vipps-buy-now { | |
| 670 | + text-decoration: none !important; | |
| 671 | +} | |
| 672 | + | |
