PluginProbe
Ever Compare – Products Compare Plugin for WooCommerce / 1.2.7
Ever Compare – Products Compare Plugin for WooCommerce v1.2.7
1.3.7 1.1.7 1.1.8 1.1.9 1.2.0 1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 trunk 1.0.0 1.0.1 1.0.2 All 31 releases
ever-compare / assets / css / frontend.css

frontend.css in Ever Compare – Products Compare Plugin for WooCommerce 1.2.7, at assets/css/frontend.css

707 lines 11.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Button Style */
2 .products a.htcompare-shop-top_thumbnail {
3 position: absolute !important;
4 z-index: 9;
5 top: 0;
6 left: 8px !important;
7 }
8 .htcompare-btn {
9 position: relative !important;
10
11 display: inline-flex !important;
12 align-items: center;
13 }
14 .htcompare-btn svg {
15 width: 15px;
16 height: 15px;
17 margin-right: 5px;
18
19 transition: all 200ms ease-out;
20
21 fill: currentColor;
22 }
23
24 .htcompare-btn svg .ever-compare-check,
25 .htcompare-btn.added svg .ever-compare-refresh {
26 opacity: 0;
27 }
28 .htcompare-btn.added svg .ever-compare-check {
29 opacity: 1;
30 }
31 .htcompare-btn.added.loading svg .ever-compare-check {
32 opacity: 0;
33 }
34
35 .htcompare-btn.loading svg .ever-compare-refresh,
36 .htcompare-btn.added.loading svg .ever-compare-refresh {
37 opacity: 1;
38 transform-origin: center;
39 animation: loading 500ms 0ms infinite normal linear;
40 }
41 @keyframes loading {
42 from {
43 transform: rotate(0deg);
44 }
45 to {
46 transform: rotate(360deg);
47 }
48 }
49
50 .htcompare-btn.loading::after,
51 a.htcompare-btn.added::after,
52 .ever-compare-loader {
53 display: none;
54 }
55 .htcompare-btn.loading .ever-compare-loader {
56 display: block;
57 }
58
59 .htcompare-btn-text {
60 display: flex;
61 align-items: center;
62 }
63 .ever-compare-btn-image {
64 display: inline-block;
65
66 width: 25px;
67 margin-right: 5px;
68 }
69 .ever-compare-btn-image img {
70 width: 100% !important;
71 margin: 0 !important;
72 }
73
74 a.htcompare-btn.loading,
75 a.htcompare-cart-button.loading {
76 /*padding-right: 2.618em;*/
77 position: relative;
78
79 opacity: 0.75;
80 color: #333333;
81 }
82
83 /* Common table Style */
84 .htcompare-row {
85 display: -webkit-box;
86 display: -ms-flexbox;
87 display: flex;
88 -webkit-box-orient: horizontal;
89 -webkit-box-direction: normal;
90 -ms-flex-direction: row;
91 flex-direction: row;
92 -ms-flex-wrap: nowrap;
93 flex-wrap: nowrap;
94 }
95 .htcompare-col {
96 display: -webkit-box;
97 display: -ms-flexbox;
98 display: flex;
99 -webkit-box-orient: vertical;
100 -webkit-box-direction: normal;
101 -ms-flex-direction: column;
102 flex-direction: column;
103 -webkit-box-pack: center;
104 -ms-flex-pack: center;
105 justify-content: center;
106
107 padding: 15px;
108
109 word-break: break-word;
110 }
111 .htcompare-row:nth-child(2n) .htcompare-col {
112 background-color: #F7F7F7;
113 }
114 .htcompare-col {
115 border-right: 1px solid #DDDDDD;
116 }
117 .htcolumn-value {
118 -webkit-box-align: center;
119 align-items: center;
120 -ms-flex-align: center;
121 -webkit-box-flex: 0;
122 -ms-flex: 0 1 26%;
123 flex: 0 1 26%;
124
125 text-align: center;
126 }
127 .compare-data-primary .htcolumn-value {
128 -webkit-box-pack: start;
129 -ms-flex-pack: start;
130 justify-content: flex-start;
131
132 padding-top: 0;
133
134 border-top: 1px solid #DDDDDD;
135 }
136 .htcolumn-field-name {
137 font-size: 16px;
138 font-weight: 600;
139
140 -webkit-box-flex: 0;
141 -ms-flex: 0 0 20%;
142 flex: 0 0 20%;
143
144 text-transform: uppercase;
145
146 color: #2D2A2A;
147 }
148 .htcompare-remove {
149 position: relative;
150
151 display: inline-block;
152
153 margin-left: -5px;
154 padding: 10px;
155 }
156 .htcompare-remove:focus {
157 outline: none;
158 }
159 .htcompare-remove::after,
160 .htcompare-remove::before {
161 position: absolute;
162 top: 50%;
163 right: 0;
164
165 display: inline-block;
166
167 width: 15px;
168 height: 2px;
169
170 content: ' ';
171 -webkit-transform: rotate(45deg);
172 transform: rotate(45deg);
173
174 background-color: #2D2A2A;
175 }
176 .htcompare-remove::after {
177 -webkit-transform: rotate(-45deg);
178 transform: rotate(-45deg);
179 }
180 .htcompare-remove:hover::after,
181 .htcompare-remove:hover::before {
182 background: #EC1E1E;
183 }
184 .htcompare-product-image {
185 display: block;
186 }
187 .htcompare-return-to-shop .button {
188 display: inline-block;
189 }
190 .htcompare-empty-page-text,
191 .htcompare-return-to-shop {
192 text-align: center;
193 }
194 .htcompare-empty-page-text {
195 margin-bottom: 10px;
196 }
197
198 .htcompare-table {
199 position: relative;
200 }
201 .htcompare-table.loading:before {
202 position: absolute;
203 z-index: 1;
204 top: 0;
205 right: 0;
206 bottom: 0;
207 left: 0;
208
209 content: '';
210
211 background-color: rgba(255,255,255,0.6);
212 }
213 .htcompare-table .htcompare-table-loader {
214 position: absolute;
215 z-index: 1;
216 top: 50%;
217 left: 50%;
218
219 display: none;
220
221 width: 50px;
222 height: 50px;
223
224 transform: translate(-30px, -25px);
225 -webkit-animation: htcomspin 1s linear infinite;
226 animation: htcomspin 1s linear infinite;
227
228 border: 8px solid #F3F3F3;
229 border-top: 8px solid #3498DB;
230 border-radius: 50%;
231 }
232
233 .htcompare-table.loading .htcompare-table-loader {
234 display: block;
235 }
236
237 .compare-data-description .htcolumn-value p:last-child,
238 .compare-data-availability .htcolumn-value p:last-child,
239 .ever-compare-message-error p {
240 margin-bottom: 0;
241 }
242
243 .ever-compare-message-error {
244 margin-bottom: 10px;
245 padding: 4px 10px;
246
247 border: 1px solid #DC3545;
248 border-left-width: 4px;
249 box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
250 }
251 .compare-data-primary.htcompare-row .htcompare-col {
252 background-color: transparent !important;
253 }
254
255 /* Safari */
256 @-webkit-keyframes htcomspin {
257 0% {
258 -webkit-transform: rotate(0deg);
259 }
260 100% {
261 -webkit-transform: rotate(360deg);
262 }
263 }
264
265 @keyframes htcomspin {
266 0% {
267 transform: rotate(0deg);
268 }
269 100% {
270 transform: rotate(360deg);
271 }
272 }
273
274 /* Popup Style */
275 a.htcompare-cart-button.loading::after {
276 font-family: WooCommerce;
277 font-weight: 400;
278
279 position: absolute;
280 top: auto;
281 right: 1em;
282
283 content: '\e01c';
284 animation: spin 2s linear infinite;
285 vertical-align: top;
286
287 -webkit-font-smoothing: antialiased;
288 }
289 a.htcompare-cart-button.added::after {
290 font-family: WooCommerce;
291
292 margin-left: 0.53em;
293
294 content: '\e017';
295 vertical-align: bottom;
296 }
297
298 .htcompare-popup {
299 position: fixed;
300 z-index: 9999;
301 top: 0;
302 left: 0;
303
304 display: none;
305 visibility: hidden;
306 overflow: hidden;
307
308 width: 100%;
309 height: 100%;
310 padding-right: 17px;
311
312 -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
313 -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
314 transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
315
316 opacity: 0;
317 background-color: rgba(0, 0, 0, 0.5);
318 }
319 .logged-in.admin-bar .htcompare-popup {
320 top: 15px;
321 }
322 .htcompare-popup.open {
323 display: -webkit-box;
324 display: -webkit-flex;
325 display: -ms-flexbox;
326 display: flex;
327 visibility: visible;
328
329 opacity: 1;
330 }
331 .htcompare-popup .htcompare-popup-content-area {
332 position: relative;
333
334 width: calc(100% - 30px);
335 max-width: 1500px;
336 margin: auto;
337 padding: 30px;
338
339 background: #FFFFFF;
340 }
341 .htcompare-popup .htcompare-popup-content-area .htcompare-table {
342 overflow-y: auto;
343
344 max-height: 750px;
345 }
346 .htcompare-popup-close {
347 position: absolute;
348 top: -10px;
349 right: -10px;
350
351 width: 25px;
352 height: 25px;
353
354 cursor: pointer;
355
356 border-radius: 100%;
357 background: #FFFFFF;
358 }
359 .htcompare-popup-close::after,
360 .htcompare-popup-close::before {
361 position: absolute;
362 top: 50%;
363 right: 5px;
364
365 display: inline-block;
366
367 width: 15px;
368 height: 2px;
369
370 content: ' ';
371 -webkit-transform: rotate(45deg);
372 transform: rotate(45deg);
373
374 background-color: #2D2A2A;
375 }
376 .htcompare-popup-close::after {
377 -webkit-transform: rotate(-45deg);
378 transform: rotate(-45deg);
379 }
380 .htcompare-popup-close:hover::after,
381 .htcompare-popup-close:hover::before {
382 background: #EC1E1E;
383 }
384
385 /*Share Link button*/
386 .ever-compare-shareable-link {
387 margin-top: 10px;
388 }
389 .ever-compare-shareable-link.right {
390 text-align: right;
391 }
392 .ever-compare-shareable-link.left {
393 text-align: left;
394 }
395 .ever-compare-shareable-link.center {
396 text-align: center;
397 }
398
399
400 /* Normal :1366px. */
401 @media (min-width: 1200px) and (max-width: 1400px) {
402 }
403
404 /* Normal desktop :992px. */
405 @media (min-width: 992px) and (max-width: 1200px) {
406 .htcompare-table {
407 overflow-x: auto;
408
409 -webkit-overflow-scrolling: touch;
410 }
411 }
412
413 @media (min-width: 768px) and (max-width: 1024px) {
414 .htcompare-table {
415 overflow-x: auto;
416
417 -webkit-overflow-scrolling: touch;
418 }
419 .htcompare-col {
420 -webkit-box-flex: 0;
421 -ms-flex: 0 0 33.33333%;
422 flex: 0 0 33.33333%;
423 }
424 }
425
426 /* Tablet desktop :768px. */
427 @media (min-width: 768px) and (max-width: 991px) {
428 }
429
430 /* small mobile :320px. */
431 @media (max-width: 767px) {
432 .htcompare-table {
433 overflow-x: auto;
434
435 -webkit-overflow-scrolling: touch;
436 }
437 .htcompare-col {
438 -webkit-box-flex: 1;
439 -ms-flex: 1 0 50%;
440 flex: 1 0 50%;
441 }
442 .htcolumn-field-name {
443 display: none;
444 }
445
446 .htcompare-row:nth-child(2n) .htcompare-col {
447 background-color: transparent;
448 }
449
450 .htcolumn-value::before {
451 font-size: 14px;
452 font-weight: 600;
453
454 display: block;
455
456 width: 100%;
457 margin-top: -15px;
458 margin-bottom: 15px;
459 padding: 5px 0;
460
461 content: attr(data-title);
462 text-transform: uppercase;
463
464 color: #2D2A2A;
465 background-color: #F7F7F7;
466 }
467 .compare-data-primary .htcolumn-value::before {
468 display: none;
469 }
470 }
471
472 /* Large Mobile :480px. */
473 @media only screen and (min-width: 480px) and (max-width: 767px) {
474 }
475
476
477
478 /* The Modal (background) */
479 .htcompare-error-modal {
480 position: fixed;
481 z-index: 1999;
482 top: 0;
483 left: 0;
484
485 display: none;
486 overflow: auto;
487 align-items: center;
488 justify-content: center;
489
490 width: 100%;
491 height: 100%;
492
493 -webkit-animation-name: fadeIn;
494 animation-name: fadeIn;
495 -webkit-animation-duration: 0.4s;
496 animation-duration: 0.4s;
497
498 background-color: rgb(0,0,0);
499 background-color: rgba(0,0,0,0.4);
500 }
501
502 /* Modal Content */
503 .htcompare-error-modal-content {
504 position: relative;
505
506 width: 100%;
507 max-width: 600px;
508 padding: 30px;
509
510 -webkit-animation-name: slideIn;
511 animation-name: slideIn;
512 -webkit-animation-duration: 0.4s;
513 animation-duration: 0.4s;
514
515 background-color: #FEFEFE;
516 }
517
518 /* The Close Button */
519 .htcompare-error-modal-close {
520 font-size: 24px;
521 font-weight: 700;
522
523 position: absolute;
524 top: -10px;
525 right: -10px;
526
527 display: flex;
528 align-items: center;
529 justify-content: center;
530
531 width: 30px;
532 height: 30px;
533 padding: 0;
534 padding-top: revert;
535
536 transition: all 0.3s ease 0s;
537
538 color: #333333;
539 border-radius: 50%;
540 background-color: #FFFFFF;
541 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
542 }
543
544 .htcompare-error-modal-close:hover,
545 .htcompare-error-modal-close:focus {
546 cursor: pointer;
547 text-decoration: none;
548
549 color: #EC1E1E;
550 outline: none;
551 background-color: #FFFFFF;
552 }
553 .ever-compare-message-error {
554 margin-bottom: 0;
555 }
556
557 /* Add Animation */
558 @-webkit-keyframes slideIn {
559 from {
560 bottom: -50px;
561
562 opacity: 0;
563 }
564 to {
565 bottom: 0;
566
567 opacity: 1;
568 }
569 }
570
571 @keyframes slideIn {
572 from {
573 bottom: -50px;
574
575 opacity: 0;
576 }
577 to {
578 bottom: 0;
579
580 opacity: 1;
581 }
582 }
583
584 @-webkit-keyframes fadeIn {
585 from {
586 opacity: 0;
587 }
588 to {
589 opacity: 1;
590 }
591 }
592
593 @keyframes fadeIn {
594 from {
595 opacity: 0;
596 }
597 to {
598 opacity: 1;
599 }
600 }
601
602
603
604 /* Wishlist Counter */
605 .htcompare-counter-area {
606 line-height: 1;
607
608 position: relative;
609
610 display: inline-block;
611
612 width: 30px;
613
614 color: #333333;
615 }
616 .htcompare-counter-area:focus {
617 outline: none;
618 }
619 .htcompare-counter-area .htcompare-counter {
620 font-size: 11px;
621 font-weight: 600;
622 line-height: 18px;
623
624 position: absolute;
625 top: -8px;
626 right: 0;
627
628 display: flex;
629 align-items: center;
630 justify-content: center;
631
632 width: 16px;
633 height: 16px;
634
635 text-align: center;
636
637 color: #FFFFFF;
638 border-radius: 8px;
639 background: #EC5858;
640 }
641
642
643 /* Notification */
644 .htcompare-notification {
645 position: fixed;
646 z-index: -99;
647 bottom: -100%;
648 left: 50%;
649
650 visibility: hidden;
651
652 min-width: 220px;
653 padding: 20px;
654 padding-right: 40px;
655
656 transition: all 1s ease 0s;
657 transform: translateX(-50%);
658 opacity: 0;
659 border: 1px solid #222222;
660 border-radius: 4px;
661 background-color: #222222;
662 }
663 .htcompare-notification.open {
664 z-index: 999999;
665 bottom: 10px;
666
667 visibility: visible;
668
669 opacity: 1;
670 }
671
672 .htcompare-notification-text {
673 color: #FFFFFF;
674 }
675
676 .htcompare-notification-close {
677 line-height: 1;
678
679 position: absolute;
680 top: 23px;
681 right: 10px;
682 transition: all 0.3s ease 0s;
683 display: flex;
684 align-items: center;
685 justify-content: center;
686
687 width: 20px;
688 height: 20px;
689 padding: 0;
690
691 cursor: pointer;
692 text-indent: -9999px;
693
694 color: #FFFFFF;
695 border: none;
696 background-color: transparent;
697 }
698
699 .htcompare-notification-close::after {
700 font-size: 26px;
701 line-height: 1;
702
703 display: flex;
704
705 content: "\00d7";
706 text-indent: 0;
707 }