PluginProbe
Pay with Vipps and MobilePay for WooCommerce / 6.0.4
Pay with Vipps and MobilePay for WooCommerce v6.0.4
6.2.1 6.2.0 6.1.10 6.1.9 6.1.8 6.1.7 6.1.6 6.1.5 6.1.4 6.1.3 6.1.2 6.1.1 6.1.0 6.0.5 6.0.4 6.0.3 6.0.2 6.0.1 6.0.0 5.4.3 5.4.2 5.4.1 5.4.0 5.3.4 trunk All 183 releases
woo-vipps / payment / css / vipps.css

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

566 lines 13.7 KB
No matching file
Up and down to move Enter to open Esc to close
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 box-sizing: border-box;
346 border: 1px solid lightgrey;
347 border-radius: 4px;
348 min-inline-size: 0;
349 padding: 1.1rem 1.7rem;
350 margin: 1rem auto;
351 text-align: center;
352 }
353 .legacy-checkout.vipps-express-checkout .express-header {
354 display: table;
355 margin: 0 auto;
356 padding: 0 0.75rem;
357 line-height: 1;
358 font-size: var(--wp--preset--font-size--small);
359 }
360 .legacy-checkout.vipps-express-checkout a, .legacy-checkout.vipps-express-checkout img {
361 padding: 0 !important;
362 border: 0 !important;
363 }
364
365 .vipps_checkout_button_wrapper {
366 margin-top: 1rem;
367 margin-bottom: 1rem;
368 }
369
370 .vippsspinner {
371 width:125px;
372 height:125px;
373 display: none;
374 position:absolute;
375 top:50%;
376 left:50%;
377 margin-left: -62px;
378 margin-top: -62px;
379 transform:scale(0.6);
380 -o-transform:scale(0.6);
381 -ms-transform:scale(0.6);
382 -webkit-transform:scale(0.6);
383 -moz-transform:scale(0.6);
384 }
385
386 .vippsoverlay {
387 background: #e9e9e9;
388 position:fixed;
389 display: none;
390 top: 0;
391 right: 0;
392 bottom: 0;
393 left: 0;
394 max-width:100%;
395 width:100%;
396 opacity: 0.5;
397 z-index: 1000;
398 }
399 body.processing {
400 cursor: progress;
401 }
402 .processing .vippsoverlay {
403 display:block;
404 }
405 .processing .vippsspinner {
406 display:block;
407 }
408
409 .vippsspinner {
410 --oncolor: rgba(254,90,36,0.97);
411 }
412 .vippsspinner.mobilepay {
413 --oncolor: rgba(90, 120, 255, 0.97);
414 }
415
416 .f_circleG{
417 position:absolute;
418 background-color:rgb(255,255,255);
419 height:22px;
420 width:22px;
421 border-radius:12px;
422 -o-border-radius:12px;
423 -ms-border-radius:12px;
424 -webkit-border-radius:12px;
425 -moz-border-radius:12px;
426 animation-name:f_fadeG;
427 -o-animation-name:f_fadeG;
428 -ms-animation-name:f_fadeG;
429 -webkit-animation-name:f_fadeG;
430 -moz-animation-name:f_fadeG;
431 animation-duration:1.2s;
432 -o-animation-duration:1.2s;
433 -ms-animation-duration:1.2s;
434 -webkit-animation-duration:1.2s;
435 -moz-animation-duration:1.2s;
436 animation-iteration-count:infinite;
437 -o-animation-iteration-count:infinite;
438 -ms-animation-iteration-count:infinite;
439 -webkit-animation-iteration-count:infinite;
440 -moz-animation-iteration-count:infinite;
441 animation-direction:normal;
442 -o-animation-direction:normal;
443 -ms-animation-direction:normal;
444 -webkit-animation-direction:normal;
445 -moz-animation-direction:normal;
446 }
447 #frotateG_01{
448 left:0;
449 top:51px;
450 animation-delay:0.45s;
451 -o-animation-delay:0.45s;
452 -ms-animation-delay:0.45s;
453 -webkit-animation-delay:0.45s;
454 -moz-animation-delay:0.45s;
455 }
456 #frotateG_02{
457 left:15px;
458 top:15px;
459 animation-delay:0.6s;
460 -o-animation-delay:0.6s;
461 -ms-animation-delay:0.6s;
462 -webkit-animation-delay:0.6s;
463 -moz-animation-delay:0.6s;
464 }
465 #frotateG_03{
466 left:51px;
467 top:0;
468 animation-delay:0.75s;
469 -o-animation-delay:0.75s;
470 -ms-animation-delay:0.75s;
471 -webkit-animation-delay:0.75s;
472 -moz-animation-delay:0.75s;
473 }
474 #frotateG_04{
475 right:15px;
476 top:15px;
477 animation-delay:0.9s;
478 -o-animation-delay:0.9s;
479 -ms-animation-delay:0.9s;
480 -webkit-animation-delay:0.9s;
481 -moz-animation-delay:0.9s;
482 }
483 #frotateG_05{
484 right:0;
485 top:51px;
486 animation-delay:1.05s;
487 -o-animation-delay:1.05s;
488 -ms-animation-delay:1.05s;
489 -webkit-animation-delay:1.05s;
490 -moz-animation-delay:1.05s;
491 }
492 #frotateG_06{
493 right:15px;
494 bottom:15px;
495 animation-delay:1.2s;
496 -o-animation-delay:1.2s;
497 -ms-animation-delay:1.2s;
498 -webkit-animation-delay:1.2s;
499 -moz-animation-delay:1.2s;
500 }
501 #frotateG_07{
502 left:51px;
503 bottom:0;
504 animation-delay:1.35s;
505 -o-animation-delay:1.35s;
506 -ms-animation-delay:1.35s;
507 -webkit-animation-delay:1.35s;
508 -moz-animation-delay:1.35s;
509 }
510 #frotateG_08{
511 left:15px;
512 bottom:15px;
513 animation-delay:1.5s;
514 -o-animation-delay:1.5s;
515 -ms-animation-delay:1.5s;
516 -webkit-animation-delay:1.5s;
517 -moz-animation-delay:1.5s;
518 }
519 @keyframes f_fadeG{
520 0%{
521 background-color:rgba(254,90,36,0.97);
522 background-color: var(--oncolor);
523 }
524 100%{
525 background-color:rgb(255,255,255);
526 }
527 }
528 @-o-keyframes f_fadeG{
529 0%{
530 background-color:rgba(254,90,36,0.97);
531 background-color: var(--oncolor);
532 }
533 100%{
534 background-color:rgb(255,255,255);
535 }
536 }
537 @-ms-keyframes f_fadeG{
538 0%{
539 background-color:rgba(254,90,36,0.97);
540 background-color: var(--oncolor);
541 }
542 100%{
543 background-color:rgb(255,255,255);
544 }
545 }
546 @-webkit-keyframes f_fadeG{
547 0%{
548 background-color:rgba(254,90,36,0.97);
549 background-color: var(--oncolor);
550 }
551
552 100%{
553 background-color:rgb(255,255,255);
554 }
555 }
556 @-moz-keyframes f_fadeG{
557 0%{
558 background-color:rgba(254,90,36,0.97);
559 background-color: var(--oncolor);
560 }
561
562 100%{
563 background-color:rgb(255,255,255);
564 }
565 }
566