woo-vipps / payment / css / vipps.css

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

564 lines 13.6 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
36	/* Vipps Checkout Widgets */
37	.vipps_checkout_widget_wrapper {
38	width: 100%;
39	display:flex;
40	flex-direction:column;
41	align-items:center;
42	font-family: "Vipps Text", Arial, sans-serif;
43	margin-bottom: 1rem;
44	color: black;
45	}
46	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_title {
47	font-size:18px;
48	line-height:24px;
49	font-weight:500;
50	color: black;
51	}
52	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_title.accordion {
53	cursor: pointer;
54	transition: 0.4s,
55	}
56	.vipps_checkout_widget_title.active .vipps_checkout_widget_icon::before {
57	content: "\2212";
58	}
59	.vipps_checkout_widget_title .vipps_checkout_widget_icon::before {
60	content: "\002B";
61	}
62	.vipps_checkout_widget_title .vipps_checkout_widget_icon {
63	font-size: 1.5rem;
64	}
65	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_title .vipps_checkout_widget_icon{
66	float: right;
67	width: 24px;
68	text-align: center;
69	}
70	.vipps_checkout_widget_wrapper .vipps_checkout_widget {
71	width: 100%;
72	font-weight:400;
73	border-bottom: 1px solid lightgrey;
74	}
75	@media (min-width: 590px) {
76	.vipps_checkout_widget_wrapper .vipps_checkout_widget {
77	width: 586px;
78	}
79	}
80
81	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_body {
82	display: none;
83	}
84	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_input {
85	height: 56px;
86	width: 100%;
87	padding: 12px 15px;
88	font-size: 16px;
89	border: 1px solid #ddd;
90	border-radius: 6px;
91	box-sizing: border-box;
92	outline: none;
93	margin: 0px;
94	}
95	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_button {
96	min-width: 5.5em;
97	padding: 7.5px 16px;
98	font-size: 14px;
99	line-height:20px;
100	text-transform: none;
101	border-radius: 24px;
102	color: white;
103	margin-top: 0.5em;
104	margin-bottom: 0.5em;
105	font-family: "Vipps Text", Arial, sans-serif;
106	font-weight: bold;
107	cursor: pointer;
108	border: none;
109	}
110	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_small {
111	font-size: 14px;
112	font-weight: bold;
113	}
114	.vipps_checkout_widget_wrapper .vipps_checkout_widget:not(:last-child) {
115	margin: 1rem;
116	}
117	.vipps_checkout_widget_wrapper .vipps_checkout_widget {
118	padding-bottom: .8rem;
119	}
120	#vipps_checkout_widget_coupon_active_codes_container_codes {
121	display: flex;
122	flex-wrap: wrap;
123	gap: 1em;
124	}
125	.vipps_checkout_widget_coupon_active_code_box {
126	display: flex;
127	align-items: center;
128	background-color: #f0f0f2;
129	padding: 8px 12px;
130	margin-top: 0.2em;
131	max-width: fit-content;
132	border-radius: 4px;
133	gap: 0.5em;
134	}
135	.vipps_checkout_widget_coupon_delete {
136	display: flex;
137	justify-content: center;
138	align-items: center;
139	width: 20px;
140	height: 20px;
141	border-radius: 50%;
142	background-color: #000;
143	color: white;
144	font-size: 12px;
145	cursor: pointer;
146	text-decoration: none;
147	}
148	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_input.error {
149	border-color: #C60000;
150	}
151	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_input.success {
152	border-color: #048a1a;
153	}
154	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_error {
155	color: #C60000;
156	}
157	.vipps_checkout_widget_wrapper .vipps_checkout_widget .vipps_checkout_widget_success {
158	color: #048a1a;
159	}
160	@media (min-width: 720px) {
161	.vipps_checkout_widget_wrapper .vipps_checkout_widget {
162	width: 624px;
163	}
164	}
165
166
167	form#vippsdata {
168	margin:0;
169	}
170	h2.confirmVippsExpressCheckoutHeader {
171	margin-top: 0;
172	}
173
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	li.wc_payment_method.payment_method_vipps img {
192	max-width: 145px;
193	}
194
195	.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_vipps img {
196	margin-top:.5rem;
197	float: right;
198	}
199	.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_vipps_card img {
200	height: 3.5rem;
201	float:right;
202	}
203
204	a.button.vipps-buy-now:focus {
205	outline: none;
206	}
207	.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 {
208	color: #fff;
209	background-color:transparent;
210	}
211	.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	opacity: 0.9;
213	}
214
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	body .widget_shopping_cart a.button.vipps-express-checkout, body .widget_shopping_cart a.button.vipps-express-checkout:hover {
242	color:transparent;
243	border:0;
244	background-color: transparent;
245	float: none;
246	margin-top: .5em;
247	margin-bottom: 0;
248	margin-left: auto;
249	margin-right: auto;
250	clear: both;
251	}
252
253	/* This is for a plugin I'm doing testing with. */
254	.woocommerce-cart-tab-container .widget_shopping_cart a.button.vipps-express-checkout {
255	min-width: 190px;
256	}
257
258	.vippslogincontainer {
259	width: 100%;
260	text-align: center;
261	}
262
263	a.button.vipps-login {
264	vertical-align: bottom;
265	max-width: 250px;
266	color:transparent;
267	background-color: #fff;
268	margin: 1em auto;
269	min-width: 190px;
270	clear: both;
271	padding:0;
272	}
273
274	/* Displays a 'vipps' information banner */
275	.woocommerce-info.vipps-info {
276	background-color: #fe5b24;
277	border-color: #fe5b24;
278	color: white;
279	}
280	.woocommerce-info.vipps-info a {
281	color: white;
282	}
283	.woocommerce-info.vipps-info::before {
284	color: white;
285	background-color: #fe5b24;
286	border-color: #fe5b24;
287	}
288	.woocommerce-info.vipps-info img.express-banner-logo {
289	height:2ex;
290	max-height:2ex;
291	width:auto;
292	}
293	.woocommerce-info.mobilepay-info img.express-banner-logo {
294	height:2ex;
295	max-height:2ex;
296	width:auto;
297	}
298	.woocommerce-info.mobilepay-info {
299	background-color: #5a78ff;
300	border-color: #5a78ff;
301	color: white;
302	}
303	.woocommerce-info.mobilepay-info::before {
304	color: white;
305	background-color: #5a78ff;
306	border-color: #5a78ff;
307	}
308	.woocommerce-info.mobilepay-info a{
309	color: white;
310	}
311
312
313	.express-banner-logo {
314	margin-left: 1ex;
315	margin-right: 1ex;
316	vertical-align: middle;
317	}
318	img.inline {
319	height: 2ex;
320	display:inline;
321	}
322
323	.vippsorange {
324	background-color: #fe5b24;
325	}
326	.vippsorange-light {
327	background-color: #fff4ec;
328	}
329	.vippspurple {
330	background-color: #551488;
331	}
332	.vippspurple2 {
333	background-color: #5E3DC2;
334	}
335	.vippspurple-light {
336	background-color: #8851F6;
337	}
338	.vippsdarkgray {
339	background-color: #161225;
340	}
341
342	/* New express section for woo legacy (shortcode) checkout. LP 2026-03-23 */
343	.legacy-checkout.vipps-express-checkout {
344	max-width: 20rem;
345	position: relative;
346	border: 1px solid lightgrey;
347	border-radius: 4px;
348	padding: 1.4rem 1.8rem 1rem;
349	margin: 1rem auto;
350	text-align: center;
351	}
352	.legacy-checkout.vipps-express-checkout .express-header {
353	position: absolute;
354	top: 0;
355	left: 50%;
356	transform: translate(-50%, -50%);
357	padding: 0 0.75rem;
358	background: #fff;
359	line-height: 1;
360	font-size: var(--wp--preset--font-size--small);
361	}
362
363	.vipps_checkout_button_wrapper {
364	margin-top: 1rem;
365	margin-bottom: 1rem;
366	}
367
368	.vippsspinner {
369	width:125px;
370	height:125px;
371	display: none;
372	position:absolute;
373	top:50%;
374	left:50%;
375	margin-left: -62px;
376	margin-top: -62px;
377	transform:scale(0.6);
378	-o-transform:scale(0.6);
379	-ms-transform:scale(0.6);
380	-webkit-transform:scale(0.6);
381	-moz-transform:scale(0.6);
382	}
383
384	.vippsoverlay {
385	background: #e9e9e9;
386	position:fixed;
387	display: none;
388	top: 0;
389	right: 0;
390	bottom: 0;
391	left: 0;
392	max-width:100%;
393	width:100%;
394	opacity: 0.5;
395	z-index: 1000;
396	}
397	body.processing {
398	cursor: progress;
399	}
400	.processing .vippsoverlay {
401	display:block;
402	}
403	.processing .vippsspinner {
404	display:block;
405	}
406
407	.vippsspinner {
408	--oncolor: rgba(254,90,36,0.97);
409	}
410	.vippsspinner.mobilepay {
411	--oncolor: rgba(90, 120, 255, 0.97);
412	}
413
414	.f_circleG{
415	position:absolute;
416	background-color:rgb(255,255,255);
417	height:22px;
418	width:22px;
419	border-radius:12px;
420	-o-border-radius:12px;
421	-ms-border-radius:12px;
422	-webkit-border-radius:12px;
423	-moz-border-radius:12px;
424	animation-name:f_fadeG;
425	-o-animation-name:f_fadeG;
426	-ms-animation-name:f_fadeG;
427	-webkit-animation-name:f_fadeG;
428	-moz-animation-name:f_fadeG;
429	animation-duration:1.2s;
430	-o-animation-duration:1.2s;
431	-ms-animation-duration:1.2s;
432	-webkit-animation-duration:1.2s;
433	-moz-animation-duration:1.2s;
434	animation-iteration-count:infinite;
435	-o-animation-iteration-count:infinite;
436	-ms-animation-iteration-count:infinite;
437	-webkit-animation-iteration-count:infinite;
438	-moz-animation-iteration-count:infinite;
439	animation-direction:normal;
440	-o-animation-direction:normal;
441	-ms-animation-direction:normal;
442	-webkit-animation-direction:normal;
443	-moz-animation-direction:normal;
444	}
445	#frotateG_01{
446	left:0;
447	top:51px;
448	animation-delay:0.45s;
449	-o-animation-delay:0.45s;
450	-ms-animation-delay:0.45s;
451	-webkit-animation-delay:0.45s;
452	-moz-animation-delay:0.45s;
453	}
454	#frotateG_02{
455	left:15px;
456	top:15px;
457	animation-delay:0.6s;
458	-o-animation-delay:0.6s;
459	-ms-animation-delay:0.6s;
460	-webkit-animation-delay:0.6s;
461	-moz-animation-delay:0.6s;
462	}
463	#frotateG_03{
464	left:51px;
465	top:0;
466	animation-delay:0.75s;
467	-o-animation-delay:0.75s;
468	-ms-animation-delay:0.75s;
469	-webkit-animation-delay:0.75s;
470	-moz-animation-delay:0.75s;
471	}
472	#frotateG_04{
473	right:15px;
474	top:15px;
475	animation-delay:0.9s;
476	-o-animation-delay:0.9s;
477	-ms-animation-delay:0.9s;
478	-webkit-animation-delay:0.9s;
479	-moz-animation-delay:0.9s;
480	}
481	#frotateG_05{
482	right:0;
483	top:51px;
484	animation-delay:1.05s;
485	-o-animation-delay:1.05s;
486	-ms-animation-delay:1.05s;
487	-webkit-animation-delay:1.05s;
488	-moz-animation-delay:1.05s;
489	}
490	#frotateG_06{
491	right:15px;
492	bottom:15px;
493	animation-delay:1.2s;
494	-o-animation-delay:1.2s;
495	-ms-animation-delay:1.2s;
496	-webkit-animation-delay:1.2s;
497	-moz-animation-delay:1.2s;
498	}
499	#frotateG_07{
500	left:51px;
501	bottom:0;
502	animation-delay:1.35s;
503	-o-animation-delay:1.35s;
504	-ms-animation-delay:1.35s;
505	-webkit-animation-delay:1.35s;
506	-moz-animation-delay:1.35s;
507	}
508	#frotateG_08{
509	left:15px;
510	bottom:15px;
511	animation-delay:1.5s;
512	-o-animation-delay:1.5s;
513	-ms-animation-delay:1.5s;
514	-webkit-animation-delay:1.5s;
515	-moz-animation-delay:1.5s;
516	}
517	@keyframes f_fadeG{
518	0%{
519	background-color:rgba(254,90,36,0.97);
520	background-color: var(--oncolor);
521	}
522	100%{
523	background-color:rgb(255,255,255);
524	}
525	}
526	@-o-keyframes f_fadeG{
527	0%{
528	background-color:rgba(254,90,36,0.97);
529	background-color: var(--oncolor);
530	}
531	100%{
532	background-color:rgb(255,255,255);
533	}
534	}
535	@-ms-keyframes f_fadeG{
536	0%{
537	background-color:rgba(254,90,36,0.97);
538	background-color: var(--oncolor);
539	}
540	100%{
541	background-color:rgb(255,255,255);
542	}
543	}
544	@-webkit-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	@-moz-keyframes f_fadeG{
555	0%{
556	background-color:rgba(254,90,36,0.97);
557	background-color: var(--oncolor);
558	}
559
560	100%{
561	background-color:rgb(255,255,255);
562	}
563	}
564