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

		@@ -51,8 +51,9 @@
51	51	transform-origin: top left;
52	52	width: calc(100%*44/48);
53	53	}
54	54
	55	+
55	56	/* Vipps Checkout Widgets */
56	57	.vipps_checkout_widget_wrapper {
57	58	width: 100%;
58	59	display:flex;
		@@ -326,24 +327,24 @@
326	327	background-color: #161225;
327	328	}
328	329
329	330	/* New express section for woo legacy (shortcode) checkout. LP 2026-03-23 */
330		-.legacy-checkout.vipps-express-checkout {
331		- max-width: 20rem;
332		- box-sizing: border-box;
333		- border: 1px solid lightgrey;
334		- border-radius: 4px;
335		- min-inline-size: 0;
336		- padding: 1.1rem 1.7rem;
337		- margin: 1rem auto;
338		- 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;
339	340	}
340		-.legacy-checkout.vipps-express-checkout .express-header {
341		- display: table;
342		- margin: 0 auto;
343		- padding: 0 0.75rem;
344		- line-height: 1;
345		- 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;
346	347	}
347	348
348	349	.vipps_checkout_button_wrapper {
349	350	margin-top: 1rem;
		@@ -545,4 +546,127 @@
545	546	100%{
546	547	background-color:rgb(255,255,255);
547	548	}
548	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	+