| @@ -31,9 +31,29 @@ | ||
| 31 | 31 | vipps-mobilepay-badge { |
| 32 | 32 | width: 90vw; |
| 33 | 33 | } |
| 34 | 34 | |
| 35 | +/* Avoid having the new web component button get outlined IOK 2026-08-07 */ | |
| 36 | +vipps-mobilepay-button:focus, | |
| 37 | +vipps-mobilepay-button:focus-visible { | |
| 38 | + outline: none; | |
| 39 | +} | |
| 35 | 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 | + | |
| 36 | 56 | /* Vipps Checkout Widgets */ |
| 37 | 57 | .vipps_checkout_widget_wrapper { |
| 38 | 58 | width: 100%; |
| 39 | 59 | display:flex; |
| @@ -170,25 +190,8 @@ | ||
| 170 | 190 | h2.confirmVippsExpressCheckoutHeader { |
| 171 | 191 | margin-top: 0; |
| 172 | 192 | } |
| 173 | 193 | |
| 174 | - | |
| 175 | -a.button.vipps-express-checkout img { | |
| 176 | - max-width: 100%; | |
| 177 | - width: 13.5rem; | |
| 178 | - max-height: 100%; | |
| 179 | - filter: drop-shadow( 0px 1px 2px #d7d7d7); | |
| 180 | -} | |
| 181 | -a.button.vipps-express-checkout.short img { | |
| 182 | - width:initial; | |
| 183 | -} | |
| 184 | -a.button.vipps-express-checkout:hover img { | |
| 185 | - opacity: 0.9; | |
| 186 | -} | |
| 187 | -a.button.vipps-express-checkout.disabled img { | |
| 188 | - opacity: 0.7; | |
| 189 | -} | |
| 190 | - | |
| 191 | 194 | li.wc_payment_method.payment_method_vipps img { |
| 192 | 195 | max-width: 145px; |
| 193 | 196 | } |
| 194 | 197 | |
| @@ -211,34 +214,8 @@ | ||
| 211 | 214 | .wc-block-grid__products .wc-block-grid__product .wp-block-button__link.vipps-buy-now:hover, .woocommerce ul.products li.product .button.vipps-buy-now:hover, a.button.vipps-buy-now:hover { |
| 212 | 215 | opacity: 0.9; |
| 213 | 216 | } |
| 214 | 217 | |
| 215 | -ul.products li.product a.button.vipps-buy-now img { | |
| 216 | - margin:0px; | |
| 217 | - display:inline; | |
| 218 | -} | |
| 219 | - | |
| 220 | -a.button.vipps-express-checkout { | |
| 221 | - background-color: #fff; | |
| 222 | - color: transparent; | |
| 223 | - vertical-align: bottom; | |
| 224 | - padding: 0; | |
| 225 | - margin-left:.5em; | |
| 226 | -} | |
| 227 | -a.button.vipps-express-checkout:active, a.button.vipps-buy-now:active { | |
| 228 | - border: 0; | |
| 229 | -} | |
| 230 | -a.button.vipps-express-checkout:hover, a.button.vipps-buy-now:hover { | |
| 231 | - border: 0; | |
| 232 | -} | |
| 233 | - | |
| 234 | -/* New-style button for Vipps and Mobile Pay is 100% svg */ | |
| 235 | -a.single-product.button.vipps-buy-now { | |
| 236 | - padding-left:0; | |
| 237 | - padding-right:0; | |
| 238 | - padding-bottom:0; | |
| 239 | -} | |
| 240 | - | |
| 241 | 218 | body .widget_shopping_cart a.button.vipps-express-checkout, body .widget_shopping_cart a.button.vipps-express-checkout:hover { |
| 242 | 219 | color:transparent; |
| 243 | 220 | border:0; |
| 244 | 221 | background-color: transparent; |
| @@ -319,8 +296,19 @@ | ||
| 319 | 296 | height: 2ex; |
| 320 | 297 | display:inline; |
| 321 | 298 | } |
| 322 | 299 | |
| 300 | +.vipps-buy-now { | |
| 301 | + padding-left: 0; | |
| 302 | + padding-right: 0; | |
| 303 | +} | |
| 304 | +.vipps_buy_now_wrapper.noloop { | |
| 305 | + margin-top: .5rem; | |
| 306 | +} | |
| 307 | +.wp-block-woo-vipps-buy-now-cart.wc-block-button-vipps { | |
| 308 | + margin-bottom: .5rem; | |
| 309 | +} | |
| 310 | + | |
| 323 | 311 | .vippsorange { |
| 324 | 312 | background-color: #fe5b24; |
| 325 | 313 | } |
| 326 | 314 | .vippsorange-light { |
| @@ -341,22 +329,20 @@ | ||
| 341 | 329 | |
| 342 | 330 | /* New express section for woo legacy (shortcode) checkout. LP 2026-03-23 */ |
| 343 | 331 | .legacy-checkout.vipps-express-checkout { |
| 344 | 332 | max-width: 20rem; |
| 345 | - position: relative; | |
| 333 | + box-sizing: border-box; | |
| 346 | 334 | border: 1px solid lightgrey; |
| 347 | 335 | border-radius: 4px; |
| 348 | - padding: 1.4rem 1.8rem 1rem; | |
| 336 | + min-inline-size: 0; | |
| 337 | + padding: 1.1rem 1.7rem; | |
| 349 | 338 | margin: 1rem auto; |
| 350 | 339 | text-align: center; |
| 351 | 340 | } |
| 352 | 341 | .legacy-checkout.vipps-express-checkout .express-header { |
| 353 | - position: absolute; | |
| 354 | - top: 0; | |
| 355 | - left: 50%; | |
| 356 | - transform: translate(-50%, -50%); | |
| 342 | + display: table; | |
| 343 | + margin: 0 auto; | |
| 357 | 344 | padding: 0 0.75rem; |
| 358 | - background: #fff; | |
| 359 | 345 | line-height: 1; |
| 360 | 346 | font-size: var(--wp--preset--font-size--small); |
| 361 | 347 | } |
| 362 | 348 | |
| @@ -560,4 +546,127 @@ | ||
| 560 | 546 | 100%{ |
| 561 | 547 | background-color:rgb(255,255,255); |
| 562 | 548 | } |
| 563 | 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 | + | |
