← All changes | payment/css/vipps.css +158 -15 6.1.0 → 6.3.1 View file →

		@@ -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;
		@@ -307,24 +327,24 @@
307	327	background-color: #161225;
308	328	}
309	329
310	330	/* New express section for woo legacy (shortcode) checkout. LP 2026-03-23 */
311		-.legacy-checkout.vipps-express-checkout {
312		- max-width: 20rem;
313		- box-sizing: border-box;
314		- border: 1px solid lightgrey;
315		- border-radius: 4px;
316		- min-inline-size: 0;
317		- padding: 1.1rem 1.7rem;
318		- margin: 1rem auto;
319		- text-align: center;
	331	+.legacy-checkout.express {
	332	+ max-width: 20rem !important;
	333	+ box-sizing: border-box !important;
	334	+ border: 1px solid lightgrey !important;
	335	+ border-radius: 4px !important;
	336	+ min-inline-size: 0 !important;
	337	+ padding: 1.1rem 1.7rem !important;
	338	+ margin: 1rem auto !important;
	339	+ text-align: center !important;
320	340	}
321		-.legacy-checkout.vipps-express-checkout .express-header {
322		- display: table;
323		- margin: 0 auto;
324		- padding: 0 0.75rem;
325		- line-height: 1;
326		- font-size: var(--wp--preset--font-size--small);
	341	+.legacy-checkout.express .express-header {
	342	+ display: table !important;
	343	+ margin: 0 auto !important;
	344	+ padding: 0 0.75rem !important;
	345	+ line-height: 1 !important;
	346	+ font-size: var(--wp--preset--font-size--small) !important;
327	347	}
328	348
329	349	.vipps_checkout_button_wrapper {
330	350	margin-top: 1rem;
		@@ -526,4 +546,127 @@
526	546	100%{
527	547	background-color:rgb(255,255,255);
528	548	}
529	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	+