PluginProbe
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant / 1.10.3
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant v1.10.3
2.3.2 2.3.1 2.3.0 2.2.8 2.2.7 trunk 1.10.0 1.10.1 1.10.2 1.10.3 1.10.4 1.10.5 1.11.0 1.11.1 1.11.2 1.6 1.7 1.8 1.8.1 1.8.2 1.8.3 1.9.0 1.9.1 1.9.10 1.9.11 All 60 releases
merchant / assets / css / modules / quick-view / quick-view.css

quick-view.css in Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant 1.10.3, at assets/css/modules/quick-view/quick-view.css

554 lines 16.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Quick View.
3 *
4 */
5 .woocommerce .product .merchant-quick-view-button {
6 display: -webkit-inline-box !important;
7 display: -ms-inline-flexbox !important;
8 display: inline-flex !important;
9 -webkit-box-pack: center !important;
10 -ms-flex-pack: center !important;
11 justify-content: center !important;
12 -webkit-box-align: center !important;
13 -ms-flex-align: center !important;
14 align-items: center !important;
15 -webkit-transition: all 0.2s;
16 transition: all 0.2s;
17 text-decoration: none !important;
18 -ms-flex-item-align: start;
19 align-self: flex-start;
20 color: var(--mrc-qv-button-text-color, #FFF) !important;
21 border-width: 1px;
22 border-style: solid;
23 border-color: var(--mrc-qv-button-border-color, #212121) !important;
24 background-color: var(--mrc-qv-button-bg-color, #212121) !important;
25 transition: all 0.2s;
26 }
27 .woocommerce .product .merchant-quick-view-button svg + span {
28 display: inline-block;
29 margin-left: 8px;
30 }
31 .woocommerce .product .merchant-quick-view-button svg {
32 width: 1em;
33 height: 1em;
34 fill: var(--mrc-qv-button-icon-color, #FFF) !important;
35 -webkit-transition: all 0.2s;
36 transition: all 0.2s;
37 }
38 .woocommerce .product .merchant-quick-view-button svg path {
39 fill: var(--mrc-qv-button-icon-color, #FFF) !important;
40 }
41 .woocommerce .product .merchant-quick-view-button:hover {
42 color: var(--mrc-qv-button-text-color-hover, #FFF) !important;
43 border-color: var(--mrc-qv-button-border-color-hover, #414141) !important;
44 background-color: var(--mrc-qv-button-bg-color-hover, #414141) !important;
45 }
46 .woocommerce .product .merchant-quick-view-button:hover svg {
47 fill: var(--mrc-qv-button-icon-color-hover, #FFF) !important;
48 }
49 .woocommerce .product .merchant-quick-view-button:hover svg path {
50 fill: var(--mrc-qv-button-icon-color-hover, #FFF) !important;
51 }
52
53 .products .product {
54 position: relative;
55 }
56 .products .product .merchant-quick-view-position-overlay {
57 position: absolute;
58 z-index: 10;
59 margin: 0 !important;
60 white-space: nowrap !important;
61 opacity: 0;
62 -webkit-transition: all 0.2s;
63 transition: all 0.2s;
64 top: var(--mrc-qv-button-position-top, 50%);
65 left: var(--mrc-qv-button-position-left, 50%);
66 -webkit-transform: translate(calc(var(--mrc-qv-button-position-top, 50%) * -1), calc(var(--mrc-qv-button-position-left, 50%) * -1)) !important;
67 transform: translate(calc(var(--mrc-qv-button-position-top, 50%) * -1), calc(var(--mrc-qv-button-position-left, 50%) * -1)) !important;
68 }
69 @media (max-width: 768px) {
70 .products .product .merchant-quick-view-position-overlay.merchant-quick-view-position-has-mobile-position {
71 top: var(--mrc-qv-button-position-top-mobile, 50%);
72 left: var(--mrc-qv-button-position-left-mobile, 50%);
73 -webkit-transform: translate(calc(var(--mrc-qv-button-position-top-mobile, 50%) * -1), calc(var(--mrc-qv-button-position-left-mobile, 50%) * -1)) !important;
74 transform: translate(calc(var(--mrc-qv-button-position-top-mobile, 50%) * -1), calc(var(--mrc-qv-button-position-left-mobile, 50%) * -1)) !important;
75 }
76 }
77 .products .product:hover .merchant-quick-view-position-overlay {
78 opacity: 1;
79 }
80
81 .merchant-quick-view-modal {
82 position: fixed;
83 z-index: 999;
84 top: 0;
85 left: 0;
86 right: 0;
87 bottom: 0;
88 display: -webkit-box;
89 display: -ms-flexbox;
90 display: flex;
91 -webkit-box-align: center;
92 -ms-flex-align: center;
93 align-items: center;
94 -webkit-box-pack: center;
95 -ms-flex-pack: center;
96 justify-content: center;
97 opacity: 0;
98 visibility: hidden;
99 pointer-events: none;
100 -webkit-transition: all 0.3s ease;
101 transition: all 0.3s ease;
102 }
103 .merchant-quick-view-modal.merchant-show {
104 opacity: 1;
105 visibility: visible;
106 pointer-events: auto;
107 }
108 .merchant-quick-view-modal.merchant-loading .merchant-quick-view-loader {
109 opacity: 1;
110 visibility: visible;
111 }
112 .merchant-quick-view-modal .merchant-freespb-wrapper {
113 display: none;
114 }
115
116 .merchant-quick-view-overlay {
117 position: absolute;
118 z-index: 1;
119 top: 0;
120 left: 0;
121 right: 0;
122 bottom: 0;
123 background-color: rgba(0, 0, 0, 0.9);
124 }
125
126 .merchant-quick-view-loader {
127 position: absolute;
128 z-index: 2;
129 display: -webkit-box;
130 display: -ms-flexbox;
131 display: flex;
132 font-size: 26px;
133 -webkit-animation: merchant-fa-spin 0.75s linear infinite;
134 animation: merchant-fa-spin 0.75s linear infinite;
135 opacity: 0;
136 visibility: hidden;
137 }
138 .merchant-quick-view-loader svg {
139 width: 1em;
140 height: 1em;
141 fill: #fff;
142 }
143
144 .merchant-quick-view-inner {
145 position: relative;
146 z-index: 3;
147 width: var(--mrc-qv-modal-width, 1000px);
148 max-height: var(--mrc-qv-modal-height, 500px);
149 max-width: 90vw;
150 padding: 35px;
151 background-color: #FFF;
152 opacity: 0;
153 visibility: hidden;
154 -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
155 transition: opacity 0.3s ease, visibility 0.3s ease;
156 }
157 .merchant-quick-view-inner.merchant-show {
158 opacity: 1;
159 visibility: visible;
160 }
161
162 .merchant-quick-view-close-button {
163 position: absolute;
164 z-index: 1;
165 right: -7px;
166 top: -32px;
167 width: 30px;
168 height: 30px;
169 font-size: 24px;
170 display: -webkit-box;
171 display: -ms-flexbox;
172 display: flex;
173 -webkit-box-align: center;
174 -ms-flex-align: center;
175 align-items: center;
176 -webkit-box-pack: center;
177 -ms-flex-pack: center;
178 justify-content: center;
179 }
180 .merchant-quick-view-close-button svg {
181 width: 1em;
182 height: 1em;
183 fill: #fff;
184 }
185
186 @-webkit-keyframes merchant-fa-spin {
187 0% {
188 -webkit-transform: rotate(0deg);
189 transform: rotate(0deg);
190 }
191 to {
192 -webkit-transform: rotate(1turn);
193 transform: rotate(1turn);
194 }
195 }
196
197 @keyframes merchant-fa-spin {
198 0% {
199 -webkit-transform: rotate(0deg);
200 transform: rotate(0deg);
201 }
202 to {
203 -webkit-transform: rotate(1turn);
204 transform: rotate(1turn);
205 }
206 }
207 .merchant-quick-view-row {
208 display: -webkit-box;
209 display: -ms-flexbox;
210 display: flex;
211 grid-gap: 30px;
212 }
213
214 .merchant-quick-view-column {
215 -webkit-box-flex: 1;
216 -ms-flex: 1;
217 flex: 1;
218 width: 50%;
219 }
220
221 .merchant-quick-view-product-gallery .woocommerce-product-gallery__image {
222 max-height: calc(var(--mrc-qv-modal-height, 500px) - 70px);
223 }
224 .merchant-quick-view-product-gallery .woocommerce-product-gallery__image img {
225 max-height: calc(var(--mrc-qv-modal-height, 500px) - 70px);
226 }
227 .merchant-quick-view-product-gallery .woocommerce-product-gallery {
228 width: 100% !important;
229 float: none !important;
230 margin: 0 !important;
231 }
232
233 .merchant-quick-view-product-gallery .flex-control-thumbs::-webkit-scrollbar {
234 width: 6px;
235 }
236 .merchant-quick-view-product-gallery .flex-control-thumbs::-webkit-scrollbar-track {
237 background: #ddd;
238 border-radius: 6px;
239 }
240 .merchant-quick-view-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb {
241 background: #999;
242 border-radius: 6px;
243 }
244 .merchant-quick-view-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb:hover {
245 background: #000;
246 }
247 .merchant-quick-view-product-gallery .flex-control-thumbs li {
248 display: -webkit-box !important;
249 display: -ms-flexbox !important;
250 display: flex !important;
251 margin: 0 !important;
252 width: auto !important;
253 }
254 .merchant-quick-view-product-gallery .flex-control-thumbs li img {
255 width: 60px !important;
256 }
257
258 .merchant-quick-view-thumbs-at-left .woocommerce-product-gallery {
259 display: -webkit-box !important;
260 display: -ms-flexbox !important;
261 display: flex !important;
262 grid-gap: 5px !important;
263 -webkit-box-orient: horizontal !important;
264 -webkit-box-direction: reverse !important;
265 -ms-flex-direction: row-reverse !important;
266 flex-direction: row-reverse !important;
267 }
268 .merchant-quick-view-thumbs-at-left .woocommerce-product-gallery .flex-control-thumbs {
269 padding-right: 5px !important;
270 -ms-flex-negative: 0 !important;
271 flex-shrink: 0 !important;
272 display: -webkit-box !important;
273 display: -ms-flexbox !important;
274 display: flex !important;
275 grid-gap: 10px !important;
276 -webkit-box-orient: vertical !important;
277 -webkit-box-direction: normal !important;
278 -ms-flex-direction: column !important;
279 flex-direction: column !important;
280 margin: 0 !important;
281 overflow-y: auto !important;
282 max-height: calc(var(--mrc-qv-modal-height, 500px) - 70px) !important;
283 }
284
285 .merchant-quick-view-thumbs-at-right .woocommerce-product-gallery {
286 display: -webkit-box !important;
287 display: -ms-flexbox !important;
288 display: flex !important;
289 grid-gap: 5px !important;
290 -webkit-box-orient: horizontal;
291 -webkit-box-direction: normal;
292 -ms-flex-direction: row;
293 flex-direction: row;
294 }
295 .merchant-quick-view-thumbs-at-right .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
296 display: none !important;
297 }
298 .merchant-quick-view-thumbs-at-right .woocommerce-product-gallery .flex-control-thumbs {
299 padding-right: 5px !important;
300 -ms-flex-negative: 0 !important;
301 flex-shrink: 0 !important;
302 display: -webkit-box !important;
303 display: -ms-flexbox !important;
304 display: flex !important;
305 grid-gap: 10px !important;
306 -webkit-box-orient: vertical !important;
307 -webkit-box-direction: normal !important;
308 -ms-flex-direction: column !important;
309 flex-direction: column !important;
310 margin: 0 !important;
311 overflow-y: auto !important;
312 max-height: calc(var(--mrc-qv-modal-height, 500px) - 70px) !important;
313 }
314
315 .merchant-quick-view-thumbs-at-bottom .woocommerce-product-gallery {
316 display: -webkit-box !important;
317 display: -ms-flexbox !important;
318 display: flex !important;
319 grid-gap: 10px !important;
320 -webkit-box-orient: vertical !important;
321 -webkit-box-direction: normal !important;
322 -ms-flex-direction: column !important;
323 flex-direction: column !important;
324 max-height: calc(var(--mrc-qv-modal-height, 500px) - 70px) !important;
325 }
326 .merchant-quick-view-thumbs-at-bottom .woocommerce-product-gallery .flex-control-thumbs {
327 -ms-flex-negative: 0 !important;
328 flex-shrink: 0 !important;
329 display: -webkit-box !important;
330 display: -ms-flexbox !important;
331 display: flex !important;
332 -ms-flex-wrap: wrap !important;
333 flex-wrap: wrap !important;
334 grid-gap: 10px !important;
335 margin: 0 !important;
336 }
337
338 .merchant-quick-view-summary {
339 display: -webkit-box;
340 display: -ms-flexbox;
341 display: flex;
342 -ms-flex-wrap: nowrap;
343 flex-wrap: nowrap;
344 grid-gap: 10px;
345 -webkit-box-orient: vertical;
346 -webkit-box-direction: normal;
347 -ms-flex-direction: column;
348 flex-direction: column;
349 max-height: calc(var(--mrc-qv-modal-height, 500px) - 70px);
350 overflow-y: auto;
351 padding-right: 12px;
352 scrollbar-color: #444 #ddd;
353 }
354 .merchant-quick-view-summary .woocommerce-variation-price,
355 .merchant-quick-view-summary .merchant-quick-view-product-price {
356 color: var(--mrc-qv-modal-regular-price-color, #999999);
357 }
358 .merchant-quick-view-summary .woocommerce-variation-price del,
359 .merchant-quick-view-summary .merchant-quick-view-product-price del {
360 color: var(--mrc-qv-modal-regular-price-color, #999999);
361 }
362 .merchant-quick-view-summary .woocommerce-variation-price ins,
363 .merchant-quick-view-summary .merchant-quick-view-product-price ins {
364 color: var(--mrc-qv-modal-sale-price-color, #212121);
365 margin: 0;
366 font-size: 24px;
367 }
368 .merchant-quick-view-summary .woocommerce-variation-price span,
369 .merchant-quick-view-summary .woocommerce-variation-price strong,
370 .merchant-quick-view-summary .merchant-quick-view-product-price span,
371 .merchant-quick-view-summary .merchant-quick-view-product-price strong {
372 color: inherit;
373 }
374 .merchant-quick-view-summary form.cart,
375 .merchant-quick-view-summary .woocommerce-variation-add-to-cart {
376 display: -webkit-box;
377 display: -ms-flexbox;
378 display: flex;
379 grid-gap: 10px;
380 -ms-flex-wrap: wrap;
381 flex-wrap: wrap;
382 margin: 0 !important;
383 }
384 .merchant-quick-view-summary form.cart > *,
385 .merchant-quick-view-summary .woocommerce-variation-add-to-cart > * {
386 -ms-flex-item-align: inherit !important;
387 align-self: inherit !important;
388 justify-self: inherit !important;
389 margin: 0 !important;
390 }
391 .merchant-quick-view-summary .quantity {
392 margin: 0;
393 width: auto;
394 }
395 .merchant-quick-view-summary > div:empty {
396 display: none;
397 }
398 .merchant-quick-view-summary::-webkit-scrollbar {
399 width: 6px;
400 }
401 .merchant-quick-view-summary::-webkit-scrollbar-track {
402 background: #ddd;
403 border-radius: 6px;
404 }
405 .merchant-quick-view-summary::-webkit-scrollbar-thumb {
406 background: #999;
407 border-radius: 6px;
408 }
409 .merchant-quick-view-summary::-webkit-scrollbar-thumb:hover {
410 background: #000;
411 }
412
413 .merchant-quick-view-product-title h1.product_title {
414 margin: 0;
415 font-size: 32px;
416 font-weight: bold;
417 line-height: 1.2;
418 }
419
420 .merchant-quick-view-product-rating .star-rating {
421 margin-left: 0;
422 }
423
424 .merchant-quick-view-product-excerpt p:last-child {
425 margin-bottom: 0;
426 }
427
428 .merchant-quick-view-product-add-to-cart {
429 margin: 10px 0;
430 padding: 20px 0;
431 border-top: 1px solid #eee;
432 border-bottom: 1px solid #eee;
433 }
434 .merchant-quick-view-product-add-to-cart .button {
435 text-decoration: none;
436 }
437 .merchant-quick-view-product-add-to-cart .button:hover {
438 text-decoration: none;
439 }
440 .merchant-quick-view-product-add-to-cart .disabled {
441 -webkit-user-select: none;
442 -moz-user-select: none;
443 -ms-user-select: none;
444 user-select: none;
445 pointer-events: none;
446 }
447
448 .merchant-hide-quantity .quantity {
449 display: none !important;
450 }
451
452 .merchant-quick-view-product-meta .product_meta {
453 display: -webkit-box;
454 display: -ms-flexbox;
455 display: flex;
456 grid-gap: 5px;
457 -webkit-box-orient: vertical;
458 -webkit-box-direction: normal;
459 -ms-flex-direction: column;
460 flex-direction: column;
461 }
462 .merchant-quick-view-product-meta .product_meta span {
463 font-weight: bold;
464 }
465 .merchant-quick-view-product-meta .product_meta span a,
466 .merchant-quick-view-product-meta .product_meta span span {
467 font-weight: normal;
468 }
469
470 @media (max-width: 1024px) and (min-width: 769px) {
471 .merchant-quick-view-inner {
472 padding-inline: 25px;
473 }
474 .merchant-quick-view-row {
475 grid-gap: 20px;
476 }
477 .merchant-quick-view-column:first-child {
478 width: 40%;
479 }
480 .merchant-quick-view-column:last-child {
481 width: 60%;
482 }
483 }
484 @media (max-width: 768px) {
485 .merchant-quick-view-row {
486 -webkit-box-orient: vertical;
487 -webkit-box-direction: normal;
488 -ms-flex-direction: column;
489 flex-direction: column;
490 }
491 .merchant-quick-view-column {
492 width: 100%;
493 }
494 .merchant-quick-view-content {
495 max-height: 100%;
496 overflow-y: auto;
497 overflow-x: hidden;
498 }
499 .merchant-quick-view-inner {
500 padding: 15px;
501 max-width: 80vw;
502 max-height: 85vh;
503 height: 85vh;
504 }
505 .merchant-quick-view-modal {
506 -webkit-box-align: start;
507 -ms-flex-align: start;
508 align-items: flex-start;
509 padding-top: 7vh;
510 }
511 .merchant-quick-view-summary {
512 max-height: none;
513 overflow: hidden;
514 }
515 .merchant-quick-view-product-gallery .woocommerce-product-gallery__image {
516 max-height: none;
517 }
518 .merchant-quick-view-product-gallery .woocommerce-product-gallery__image img {
519 max-height: none;
520 }
521 .merchant-quick-view-thumbs-at-left .woocommerce-product-gallery,
522 .merchant-quick-view-thumbs-at-right .woocommerce-product-gallery {
523 display: -webkit-box !important;
524 display: -ms-flexbox !important;
525 display: flex !important;
526 grid-gap: 10px !important;
527 -webkit-box-orient: vertical !important;
528 -webkit-box-direction: normal !important;
529 -ms-flex-direction: column !important;
530 flex-direction: column !important;
531 }
532 .merchant-quick-view-thumbs-at-left .woocommerce-product-gallery .flex-control-thumbs,
533 .merchant-quick-view-thumbs-at-right .woocommerce-product-gallery .flex-control-thumbs {
534 -ms-flex-negative: 0 !important;
535 flex-shrink: 0 !important;
536 display: -webkit-box !important;
537 display: -ms-flexbox !important;
538 display: flex !important;
539 -ms-flex-wrap: wrap !important;
540 flex-wrap: wrap !important;
541 -webkit-box-orient: horizontal !important;
542 -webkit-box-direction: normal !important;
543 -ms-flex-direction: row !important;
544 flex-direction: row !important;
545 grid-gap: 10px !important;
546 margin: 0 !important;
547 padding: 0 !important;
548 overflow: hidden !important;
549 max-height: none !important;
550 }
551 .merchant-quick-view-thumbs-at-bottom .woocommerce-product-gallery {
552 max-height: none !important;
553 }
554 }