woo-vipps / payment / css / vipps.css

vipps.css in Pay with Vipps and MobilePay for WooCommerce 5.4.1, at payment/css/vipps.css

554 lines 13.3 KB

Raw Download Zip

1	/*
2
3	This file is part of the plugin Pay with Vipps and MobilePay for WooCommerce
4	Copyright (c) 2019 WP-Hosting AS
5
6	MIT License
7
8	Copyright (c) 2019 WP-Hosting AS
9
10	Permission is hereby granted, free of charge, to any person obtaining a copy
11	of this software and associated documentation files (the "Software"), to deal
12	in the Software without restriction, including without limitation the rights
13	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
14	copies of the Software, and to permit persons to whom the Software is
15	furnished to do so, subject to the following conditions:
16
17	The above copyright notice and this permission notice shall be included in all
18	copies or substantial portions of the Software.
19
20	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
21	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
22	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
23	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
24	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
25	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
26	SOFTWARE.
27	*/
28
29	/* An unfortunate interaction with Woos product image gallery can make the normal 100% width badges break on smaller screens. This adds
30	a small failsafe. IOK 2026-03-25 */
31	vipps-mobilepay-badge {
32	width: 90vw;
33	}
34
35	/* Vipps Checkout Widgets */
36	.vipps_checkout_widget_wrapper {
37	width: 100%;
38	display:flex;
39	flex-direction:column;
40	align-items:center;
41	font-family: "Vipps Text", Arial, sans-serif;
42	margin-bottom: 1rem;
43	color: black;
44	}
45	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_title {
46	font-size:18px;
47	line-height:24px;
48	font-weight:500;
49	color: black;
50	}
51	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_title.accordion {
52	cursor: pointer;
53	transition: 0.4s,
54	}
55	.vipps_checkout_widget_title.active .vipps_checkout_widget_icon::before {
56	content: "\2212";
57	}
58	.vipps_checkout_widget_title .vipps_checkout_widget_icon::before {
59	content: "\002B";
60	}
61	.vipps_checkout_widget_title .vipps_checkout_widget_icon {
62	font-size: 1.5rem;
63	}
64	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_title .vipps_checkout_widget_icon{
65	float: right;
66	width: 24px;
67	text-align: center;
68	}
69	.vipps_checkout_widget_wrapper .vipps_checkout_widget {
70	width: 100%;
71	font-weight:400;
72	border-bottom: 1px solid lightgrey;
73	}
74	@media (min-width: 590px) {
75	.vipps_checkout_widget_wrapper .vipps_checkout_widget {
76	width: 586px;
77	}
78	}
79
80	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_body {
81	display: none;
82	}
83	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_input {
84	height: 56px;
85	width: 100%;
86	padding: 12px 15px;
87	font-size: 16px;
88	border: 1px solid #ddd;
89	border-radius: 6px;
90	box-sizing: border-box;
91	outline: none;
92	margin: 0px;
93	}
94	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_button {
95	min-width: 5.5em;
96	padding: 7.5px 16px;
97	font-size: 14px;
98	line-height:20px;
99	text-transform: none;
100	border-radius: 24px;
101	color: white;
102	margin-top: 0.5em;
103	margin-bottom: 0.5em;
104	font-family: "Vipps Text", Arial, sans-serif;
105	font-weight: bold;
106	cursor: pointer;
107	border: none;
108	}
109	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_small {
110	font-size: 14px;
111	font-weight: bold;
112	}
113	.vipps_checkout_widget_wrapper .vipps_checkout_widget:not(:last-child) {
114	margin: 1rem;
115	}
116	.vipps_checkout_widget_wrapper .vipps_checkout_widget {
117	padding-bottom: .8rem;
118	}
119	#vipps_checkout_widget_coupon_active_codes_container_codes {
120	display: flex;
121	flex-wrap: wrap;
122	gap: 1em;
123	}
124	.vipps_checkout_widget_coupon_active_code_box {
125	display: flex;
126	align-items: center;
127	background-color: #f0f0f2;
128	padding: 8px 12px;
129	margin-top: 0.2em;
130	max-width: fit-content;
131	border-radius: 4px;
132	gap: 0.5em;
133	}
134	.vipps_checkout_widget_coupon_delete {
135	display: flex;
136	justify-content: center;
137	align-items: center;
138	width: 20px;
139	height: 20px;
140	border-radius: 50%;
141	background-color: #000;
142	color: white;
143	font-size: 12px;
144	cursor: pointer;
145	text-decoration: none;
146	}
147	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_input.error {
148	border-color: #C60000;
149	}
150	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_input.success {
151	border-color: #048a1a;
152	}
153	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_error {
154	color: #C60000;
155	}
156	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_success {
157	color: #048a1a;
158	}
159	@media (min-width: 720px) {
160	.vipps_checkout_widget_wrapper .vipps_checkout_widget {
161	width: 624px;
162	}
163	}
164
165
166	form#vippsdata {
167	margin:0;
168	}
169	h2.confirmVippsExpressCheckoutHeader {
170	margin-top: 0;
171	}
172
173
174	a.button.vipps-express-checkout img {
175	max-width: 100%;
176	width: 13.5rem;
177	max-height: 100%;
178	filter: drop-shadow( 0px 1px 2px #d7d7d7);
179	}
180	a.button.vipps-express-checkout.short img {
181	width:initial;
182	}
183	a.button.vipps-express-checkout:hover img {
184	opacity: 0.9;
185	}
186	a.button.vipps-express-checkout.disabled img {
187	opacity: 0.7;
188	}
189
190	li.wc_payment_method.payment_method_vipps img {
191	max-width: 145px;
192	}
193
194	a.button.vipps-buy-now:focus {
195	outline: none;
196	}
197	.wc-block-grid__products .wc-block-grid__product .wp-block-button__link.vipps-buy-now, .woocommerce ul.products li.product .button.vipps-buy-now, a.button.vipps-buy-now {
198	color: #fff;
199	background-color:transparent;
200	}
201	.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 {
202	opacity: 0.9;
203	}
204
205	ul.products li.product a.button.vipps-buy-now img {
206	margin:0px;
207	display:inline;
208	}
209
210	a.button.vipps-express-checkout {
211	background-color: #fff;
212	color: transparent;
213	vertical-align: bottom;
214	padding: 0;
215	margin-left:.5em;
216	}
217	a.button.vipps-express-checkout:active, a.button.vipps-buy-now:active {
218	border: 0;
219	}
220	a.button.vipps-express-checkout:hover, a.button.vipps-buy-now:hover {
221	border: 0;
222	}
223
224	/* New-style button for Vipps and Mobile Pay is 100% svg */
225	a.single-product.button.vipps-buy-now {
226	padding-left:0;
227	padding-right:0;
228	padding-bottom:0;
229	}
230
231	body .widget_shopping_cart a.button.vipps-express-checkout, body .widget_shopping_cart a.button.vipps-express-checkout:hover {
232	color:transparent;
233	border:0;
234	background-color: transparent;
235	float: none;
236	margin-top: .5em;
237	margin-bottom: 0;
238	margin-left: auto;
239	margin-right: auto;
240	clear: both;
241	}
242
243	/* This is for a plugin I'm doing testing with. */
244	.woocommerce-cart-tab-container .widget_shopping_cart a.button.vipps-express-checkout {
245	min-width: 190px;
246	}
247
248	.vippslogincontainer {
249	width: 100%;
250	text-align: center;
251	}
252
253	a.button.vipps-login {
254	vertical-align: bottom;
255	max-width: 250px;
256	color:transparent;
257	background-color: #fff;
258	margin: 1em auto;
259	min-width: 190px;
260	clear: both;
261	padding:0;
262	}
263
264	/* Displays a 'vipps' information banner */
265	.woocommerce-info.vipps-info {
266	background-color: #fe5b24;
267	border-color: #fe5b24;
268	color: white;
269	}
270	.woocommerce-info.vipps-info a {
271	color: white;
272	}
273	.woocommerce-info.vipps-info::before {
274	color: white;
275	background-color: #fe5b24;
276	border-color: #fe5b24;
277	}
278	.woocommerce-info.vipps-info img.express-banner-logo {
279	height:2ex;
280	max-height:2ex;
281	width:auto;
282	}
283	.woocommerce-info.mobilepay-info img.express-banner-logo {
284	height:2ex;
285	max-height:2ex;
286	width:auto;
287	}
288	.woocommerce-info.mobilepay-info {
289	background-color: #5a78ff;
290	border-color: #5a78ff;
291	color: white;
292	}
293	.woocommerce-info.mobilepay-info::before {
294	color: white;
295	background-color: #5a78ff;
296	border-color: #5a78ff;
297	}
298	.woocommerce-info.mobilepay-info a{
299	color: white;
300	}
301
302
303	.express-banner-logo {
304	margin-left: 1ex;
305	margin-right: 1ex;
306	vertical-align: middle;
307	}
308	img.inline {
309	height: 2ex;
310	display:inline;
311	}
312
313	.vippsorange {
314	background-color: #fe5b24;
315	}
316	.vippsorange-light {
317	background-color: #fff4ec;
318	}
319	.vippspurple {
320	background-color: #551488;
321	}
322	.vippspurple2 {
323	background-color: #5E3DC2;
324	}
325	.vippspurple-light {
326	background-color: #8851F6;
327	}
328	.vippsdarkgray {
329	background-color: #161225;
330	}
331
332	/* New express section for woo legacy (shortcode) checkout. LP 2026-03-23 */
333	.legacy-checkout.vipps-express-checkout {
334	max-width: 20rem;
335	position: relative;
336	border: 1px solid lightgrey;
337	border-radius: 4px;
338	padding: 1.4rem 1.8rem 1rem;
339	margin: 1rem auto;
340	text-align: center;
341	}
342	.legacy-checkout.vipps-express-checkout .express-header {
343	position: absolute;
344	top: 0;
345	left: 50%;
346	transform: translate(-50%, -50%);
347	padding: 0 0.75rem;
348	background: #fff;
349	line-height: 1;
350	font-size: var(--wp--preset--font-size--small);
351	}
352
353	.vipps_checkout_button_wrapper {
354	margin-top: 1rem;
355	margin-bottom: 1rem;
356	}
357
358	.vippsspinner {
359	width:125px;
360	height:125px;
361	display: none;
362	position:absolute;
363	top:50%;
364	left:50%;
365	margin-left: -62px;
366	margin-top: -62px;
367	transform:scale(0.6);
368	-o-transform:scale(0.6);
369	-ms-transform:scale(0.6);
370	-webkit-transform:scale(0.6);
371	-moz-transform:scale(0.6);
372	}
373
374	.vippsoverlay {
375	background: #e9e9e9;
376	position:fixed;
377	display: none;
378	top: 0;
379	right: 0;
380	bottom: 0;
381	left: 0;
382	max-width:100%;
383	width:100%;
384	opacity: 0.5;
385	z-index: 1000;
386	}
387	body.processing {
388	cursor: progress;
389	}
390	.processing .vippsoverlay {
391	display:block;
392	}
393	.processing .vippsspinner {
394	display:block;
395	}
396
397	.vippsspinner {
398	--oncolor: rgba(254,90,36,0.97);
399	}
400	.vippsspinner.mobilepay {
401	--oncolor: rgba(90, 120, 255, 0.97);
402	}
403
404	.f_circleG{
405	position:absolute;
406	background-color:rgb(255,255,255);
407	height:22px;
408	width:22px;
409	border-radius:12px;
410	-o-border-radius:12px;
411	-ms-border-radius:12px;
412	-webkit-border-radius:12px;
413	-moz-border-radius:12px;
414	animation-name:f_fadeG;
415	-o-animation-name:f_fadeG;
416	-ms-animation-name:f_fadeG;
417	-webkit-animation-name:f_fadeG;
418	-moz-animation-name:f_fadeG;
419	animation-duration:1.2s;
420	-o-animation-duration:1.2s;
421	-ms-animation-duration:1.2s;
422	-webkit-animation-duration:1.2s;
423	-moz-animation-duration:1.2s;
424	animation-iteration-count:infinite;
425	-o-animation-iteration-count:infinite;
426	-ms-animation-iteration-count:infinite;
427	-webkit-animation-iteration-count:infinite;
428	-moz-animation-iteration-count:infinite;
429	animation-direction:normal;
430	-o-animation-direction:normal;
431	-ms-animation-direction:normal;
432	-webkit-animation-direction:normal;
433	-moz-animation-direction:normal;
434	}
435	#frotateG_01{
436	left:0;
437	top:51px;
438	animation-delay:0.45s;
439	-o-animation-delay:0.45s;
440	-ms-animation-delay:0.45s;
441	-webkit-animation-delay:0.45s;
442	-moz-animation-delay:0.45s;
443	}
444	#frotateG_02{
445	left:15px;
446	top:15px;
447	animation-delay:0.6s;
448	-o-animation-delay:0.6s;
449	-ms-animation-delay:0.6s;
450	-webkit-animation-delay:0.6s;
451	-moz-animation-delay:0.6s;
452	}
453	#frotateG_03{
454	left:51px;
455	top:0;
456	animation-delay:0.75s;
457	-o-animation-delay:0.75s;
458	-ms-animation-delay:0.75s;
459	-webkit-animation-delay:0.75s;
460	-moz-animation-delay:0.75s;
461	}
462	#frotateG_04{
463	right:15px;
464	top:15px;
465	animation-delay:0.9s;
466	-o-animation-delay:0.9s;
467	-ms-animation-delay:0.9s;
468	-webkit-animation-delay:0.9s;
469	-moz-animation-delay:0.9s;
470	}
471	#frotateG_05{
472	right:0;
473	top:51px;
474	animation-delay:1.05s;
475	-o-animation-delay:1.05s;
476	-ms-animation-delay:1.05s;
477	-webkit-animation-delay:1.05s;
478	-moz-animation-delay:1.05s;
479	}
480	#frotateG_06{
481	right:15px;
482	bottom:15px;
483	animation-delay:1.2s;
484	-o-animation-delay:1.2s;
485	-ms-animation-delay:1.2s;
486	-webkit-animation-delay:1.2s;
487	-moz-animation-delay:1.2s;
488	}
489	#frotateG_07{
490	left:51px;
491	bottom:0;
492	animation-delay:1.35s;
493	-o-animation-delay:1.35s;
494	-ms-animation-delay:1.35s;
495	-webkit-animation-delay:1.35s;
496	-moz-animation-delay:1.35s;
497	}
498	#frotateG_08{
499	left:15px;
500	bottom:15px;
501	animation-delay:1.5s;
502	-o-animation-delay:1.5s;
503	-ms-animation-delay:1.5s;
504	-webkit-animation-delay:1.5s;
505	-moz-animation-delay:1.5s;
506	}
507	@keyframes f_fadeG{
508	0%{
509	background-color:rgba(254,90,36,0.97);
510	background-color: var(--oncolor);
511	}
512	100%{
513	background-color:rgb(255,255,255);
514	}
515	}
516	@-o-keyframes f_fadeG{
517	0%{
518	background-color:rgba(254,90,36,0.97);
519	background-color: var(--oncolor);
520	}
521	100%{
522	background-color:rgb(255,255,255);
523	}
524	}
525	@-ms-keyframes f_fadeG{
526	0%{
527	background-color:rgba(254,90,36,0.97);
528	background-color: var(--oncolor);
529	}
530	100%{
531	background-color:rgb(255,255,255);
532	}
533	}
534	@-webkit-keyframes f_fadeG{
535	0%{
536	background-color:rgba(254,90,36,0.97);
537	background-color: var(--oncolor);
538	}
539
540	100%{
541	background-color:rgb(255,255,255);
542	}
543	}
544	@-moz-keyframes f_fadeG{
545	0%{
546	background-color:rgba(254,90,36,0.97);
547	background-color: var(--oncolor);
548	}
549
550	100%{
551	background-color:rgb(255,255,255);
552	}
553	}
554