preview.css in Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant 2.3.1, at assets/css/modules/complementary-products/admin/preview.css

619 lines 19.7 KB Raw Download Zip

1	@charset "UTF-8";
2	/**
3	* Admin Preview
4	* Complementary Products
5	*/
6	.merchant-flexible-content-control.complementary-products-style .layout:not(.active) {
7	border-color: #5c5f62;
8	}
9	.merchant-flexible-content-control.complementary-products-style .layout .layout-body {
10	grid-gap: unset;
11	}
12	.merchant-flexible-content-control.complementary-products-style .layout .layout-body .merchant-module-page-setting-field {
13	margin-bottom: 20px;
14	}
15	.merchant-flexible-content-control.complementary-products-style .layout .layout-body .merchant-module-page-setting-field-text input {
16	padding: 12px 8px;
17	}
18
19	.merchant-single-product-preview,
20	.merchant-cart-preview {
21	visibility: hidden;
22	opacity: 0;
23	position: absolute;
24	-webkit-transition: opacity 300ms, visibility 300ms;
25	transition: opacity 300ms, visibility 300ms;
26	}
27	.merchant-single-product-preview.show,
28	.merchant-cart-preview.show {
29	visibility: visible;
30	opacity: 1;
31	}
32
33	.merchant-module-page-preview-browser-inner {
34	min-height: 430px;
35	position: relative;
36	}
37
38	.link-do-nothing {
39	pointer-events: none;
40	}
41
42	.mrc-preview-text-placeholder {
43	background-color: #f5f5f5;
44	height: 13px;
45	}
46	.mrc-preview-text-placeholder + .mrc-preview-text-placeholder, .mrc-preview-text-placeholder + .mrc-preview-addtocart-placeholder {
47	margin-top: 15px;
48	}
49
50	.mrc-preview-addtocart-placeholder {
51	background-color: #e5e5e5;
52	width: 140px;
53	height: 30px;
54	}
55
56	.merchant-single-product-preview {
57	-webkit-box-flex: 0;
58	-ms-flex-positive: 0;
59	flex-grow: 0;
60	width: 100%;
61	margin: auto;
62	padding: 35px 25px 50px;
63	display: -webkit-box;
64	display: -ms-flexbox;
65	display: flex;
66	top: 0;
67	left: 0;
68	right: 0;
69	bottom: 0;
70	}
71
72	.mrc-preview-single-product-elements {
73	width: 100%;
74	display: -webkit-box;
75	display: -ms-flexbox;
76	display: flex;
77	gap: 25px;
78	}
79	.mrc-preview-single-product-elements .mrc-preview-left-column {
80	width: 30%;
81	min-width: 30%;
82	}
83	.mrc-preview-single-product-elements .mrc-preview-right-column {
84	width: 70%;
85	}
86	.mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image {
87	background-color: #f5f5f5;
88	height: 100vw;
89	}
90	.mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image-thumbs {
91	width: 100%;
92	display: none;
93	gap: 10px;
94	-ms-flex-wrap: nowrap;
95	flex-wrap: nowrap;
96	}
97	.mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image-thumbs .mrc-preview-product-image-thumb {
98	width: 100%;
99	height: 3vw;
100	background-color: #f5f5f5;
101	margin-top: 10px;
102	}
103	.mrc-preview-single-product-elements .main-product-name {
104	font-weight: bold;
105	font-size: 16px;
106	margin-bottom: 5px;
107	}
108	.mrc-preview-single-product-elements .product-price {
109	margin-bottom: 5px;
110	}
111	.mrc-preview-single-product-elements .product-price del {
112	color: #999;
113	margin-right: 5px;
114	}
115	.mrc-preview-single-product-elements .product-price ins {
116	color: #333;
117	text-decoration: none;
118	}
119	.mrc-preview-single-product-elements .main-product-description {
120	font-size: 14px;
121	margin-bottom: 20px;
122	}
123	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper {
124	display: -webkit-box;
125	display: -ms-flexbox;
126	display: flex;
127	-ms-flex-wrap: wrap;
128	flex-wrap: wrap;
129	-webkit-box-orient: vertical;
130	-webkit-box-direction: normal;
131	-ms-flex-direction: column;
132	flex-direction: column;
133	margin-bottom: 15px;
134	}
135	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper .mrc-preview-bundle-title {
136	margin-top: 0;
137	margin-bottom: 5px;
138	text-align: var(--merchant-cp-bundle-title-desc-align, none);
139	color: var(--merchant-cp-bundle-title-color, inherit);
140	}
141	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper .mrc-preview-bundle-description {
142	margin-top: 0;
143	margin-bottom: 5px;
144	text-align: var(--merchant-cp-bundle-title-desc-align, none);
145	font-size: var(--merchant-cp-bundle-desc-font-size, 13px);
146	color: var(--merchant-cp-bundle-desc-text-color, inherit);
147	}
148	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper .mrc-preview-bundle-product {
149	display: -webkit-box;
150	display: -ms-flexbox;
151	display: flex;
152	-webkit-box-align: center;
153	-ms-flex-align: center;
154	align-items: center;
155	width: 100%;
156	border: 1px solid var(--merchant-cp-product-border-color, transparent);
157	padding: 5px 10px;
158	margin-bottom: 10px;
159	border-radius: var(--merchant-cp-product-border-radius, 0);
160	}
161	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper .mrc-preview-bundle-product:last-of-type {
162	display: none;
163	}
164	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper .mrc-preview-bundle-product .mrc-preview-bundle-checkbox {
165	margin-right: 5px;
166	}
167	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper .mrc-preview-bundle-product .mrc-preview-bundle-checkbox input {
168	background-color: var(--merchant-cp-checkbox-color, #000);
169	position: relative;
170	width: 20px;
171	height: 20px;
172	border-radius: var(--merchant-cp-product-checkbox-radius, 0);
173	outline: none;
174	}
175	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper .mrc-preview-bundle-product .mrc-preview-bundle-checkbox input:before {
176	display: none;
177	}
178	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper .mrc-preview-bundle-product .mrc-preview-bundle-checkbox input:focus {
179	outline: none;
180	border: none;
181	-webkit-box-shadow: none;
182	box-shadow: none;
183	}
184	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper .mrc-preview-bundle-product .mrc-preview-bundle-checkbox input:after {
185	color: #ffffff;
186	content: "✓";
187	position: absolute;
188	top: 50%;
189	left: 50%;
190	-webkit-transform: translate(-50%, -50%);
191	transform: translate(-50%, -50%);
192	font-size: 14px;
193	}
194	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper .mrc-preview-bundle-product .mrc-preview-bundle-product-image {
195	background-color: #e5e5e5;
196	height: 60px;
197	width: 20%;
198	margin-right: 10px;
199	border: 1px solid var(--merchant-cp-product-image-border-color, transparent);
200	border-radius: var(--merchant-cp-product-image-border-radius, 0);
201	}
202	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper .mrc-preview-bundle-product .mrc-preview-bundle-product-info {
203	width: 60%;
204	}
205	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper .mrc-preview-bundle-product .mrc-preview-bundle-product-info .mrc-preview-bundle-product-title,
206	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper .mrc-preview-bundle-product .mrc-preview-bundle-product-info .mrc-preview-bundle-product-price {
207	height: 13px;
208	margin-bottom: 10px;
209	}
210	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper .mrc-preview-bundle-product .mrc-preview-bundle-product-info .mrc-preview-bundle-product-title {
211	font-weight: bold;
212	}
213	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper .mrc-preview-bundle-product .mrc-preview-bundle-product-info .mrc-preview-bundle-product-price {
214	margin-bottom: 0;
215	}
216	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper.compact .mrc-preview-bundle-product {
217	margin-bottom: 5px;
218	}
219	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper.compact .mrc-preview-bundle-product-image {
220	height: 35px;
221	width: 35px;
222	margin-right: 10px;
223	}
224	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper.slider {
225	display: block;
226	}
227	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper.slider .products {
228	display: -webkit-box;
229	display: -ms-flexbox;
230	display: flex;
231	-ms-flex-wrap: nowrap;
232	flex-wrap: nowrap;
233	overflow-x: auto;
234	overflow-y: hidden;
235	-ms-scroll-snap-type: x mandatory;
236	scroll-snap-type: x mandatory;
237	-webkit-overflow-scrolling: touch;
238	-ms-overflow-style: -ms-autohiding-scrollbar;
239	scroll-behavior: smooth;
240	cursor: -webkit-grab;
241	cursor: grab; /* Shows grab cursor */
242	-webkit-user-select: none;
243	-moz-user-select: none;
244	-ms-user-select: none;
245	user-select: none; /* Prevents text selection while dragging */
246	gap: 30px;
247	}
248	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper.slider .products::-webkit-scrollbar {
249	display: none;
250	}
251	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper.slider .mrc-preview-bundle-product {
252	width: 150px;
253	border: none;
254	-webkit-box-orient: vertical;
255	-webkit-box-direction: normal;
256	-ms-flex-direction: column;
257	flex-direction: column;
258	position: relative;
259	-ms-flex-negative: 0;
260	flex-shrink: 0; /* Prevent shrinking */
261	white-space: nowrap; /* Optional: prevent text wrapping */
262	padding: 0;
263	margin-bottom: 0;
264	}
265	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper.slider .mrc-preview-bundle-product .mrc-preview-bundle-checkbox {
266	position: absolute;
267	top: 10px;
268	right: 0;
269	}
270	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper.slider .mrc-preview-bundle-product .mrc-preview-bundle-product-image {
271	width: 100%;
272	height: 150px;
273	margin-bottom: 10px;
274	margin-right: 0;
275	}
276	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper.slider .mrc-preview-bundle-product .mrc-preview-bundle-product-info {
277	width: 100%;
278	}
279	.mrc-preview-single-product-elements .mrc-preview-bundle-wrapper.slider .mrc-preview-bundle-product:last-of-type {
280	display: inherit;
281	}
282
283	.merchant-cart-preview {
284	top: 50%;
285	left: 0;
286	right: 0;
287	-webkit-transform: translateY(-50%);
288	transform: translateY(-50%);
289	}
290	.merchant-cart-preview .my-cart {
291	max-width: 1200px;
292	margin: 0 auto;
293	padding: 20px;
294	}
295	.merchant-cart-preview .my-cart .cart-title {
296	font-size: 28px;
297	font-weight: bold;
298	margin-bottom: 20px;
299	}
300	.merchant-cart-preview .my-cart .cart-table {
301	width: 100%;
302	border-collapse: collapse;
303	border: 1px solid #e0e0e0;
304	}
305	.merchant-cart-preview .my-cart .cart-table th, .merchant-cart-preview .my-cart .cart-table td {
306	padding: 15px;
307	border: 1px solid #e0e0e0;
308	text-align: left;
309	}
310	.merchant-cart-preview .my-cart .cart-table thead {
311	background-color: #f5f5f5;
312	}
313	.merchant-cart-preview .my-cart .cart-table thead th {
314	font-weight: bold;
315	}
316	.merchant-cart-preview .my-cart .cart-table .price-col, .merchant-cart-preview .my-cart .cart-table .quantity-col, .merchant-cart-preview .my-cart .cart-table .total-col {
317	width: 16.66%;
318	}
319	.merchant-cart-preview .my-cart .cart-table .cart-item .product {
320	display: -webkit-box;
321	display: -ms-flexbox;
322	display: flex;
323	-webkit-box-align: start;
324	-ms-flex-align: start;
325	align-items: flex-start;
326	}
327	.merchant-cart-preview .my-cart .cart-table .cart-item .product .remove-item {
328	background: none;
329	border: none;
330	font-size: 20px;
331	cursor: pointer;
332	padding: 0 10px;
333	}
334	.merchant-cart-preview .my-cart .cart-table .cart-item .product .product-image {
335	width: 80px;
336	height: 80px;
337	background-color: #ddd;
338	margin-right: 15px;
339	}
340	.merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .product-name {
341	font-size: 16px;
342	font-weight: bold;
343	margin: 0 0 10px;
344	}
345	.merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-offer {
346	font-size: 14px;
347	color: #666;
348	margin-bottom: 10px;
349	border-top: 1px solid #eee;
350	padding-top: 10px;
351	}
352	.merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product {
353	display: -webkit-box;
354	display: -ms-flexbox;
355	display: flex;
356	-webkit-box-align: start;
357	-ms-flex-align: start;
358	align-items: flex-start;
359	border-radius: 4px;
360	}
361	.merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product .upsell-image {
362	width: 60px;
363	height: 60px;
364	background-color: #ddd;
365	margin-right: 10px;
366	}
367	.merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product .upsell-info .upsell-name {
368	font-size: 14px;
369	font-weight: bold;
370	margin: 0 0 5px;
371	}
372	.merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product .upsell-info p {
373	font-size: 12px;
374	color: #666;
375	margin: 0 0 5px;
376	}
377	.merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product .upsell-info .upsell-options {
378	display: -webkit-box;
379	display: -ms-flexbox;
380	display: flex;
381	gap: 10px;
382	margin-bottom: 10px;
383	}
384	.merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product .upsell-info .upsell-options select {
385	padding: 5px;
386	font-size: 12px;
387	}
388	.merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product .upsell-info .add-to-cart {
389	background-color: #333;
390	color: white;
391	border: none;
392	padding: 5px 10px;
393	font-size: 12px;
394	cursor: pointer;
395	pointer-events: none;
396	}
397	.merchant-cart-preview .my-cart .cart-table .cart-item .price-col .original-price {
398	text-decoration: line-through;
399	color: #999;
400	margin-right: 5px;
401	}
402	.merchant-cart-preview .my-cart .cart-table .cart-item .price-col .discounted-price {
403	font-weight: bold;
404	}
405	.merchant-cart-preview .my-cart .cart-table .cart-item .quantity-col .quantity-control {
406	display: -webkit-box;
407	display: -ms-flexbox;
408	display: flex;
409	-webkit-box-align: center;
410	-ms-flex-align: center;
411	align-items: center;
412	border: 1px solid #e0e0e0;
413	border-radius: 3px;
414	max-width: 100px;
415	}
416	.merchant-cart-preview .my-cart .cart-table .cart-item .quantity-col .quantity-control button {
417	background: none;
418	border: none;
419	padding: 5px 10px;
420	font-size: 16px;
421	cursor: pointer;
422	pointer-events: none;
423	}
424	.merchant-cart-preview .my-cart .cart-table .cart-item .quantity-col .quantity-control input {
425	width: 22px;
426	text-align: center;
427	border: none;
428	font-size: 14px;
429	}
430	.merchant-cart-preview .my-cart .cart-table .cart-item .total-col {
431	font-weight: bold;
432	}
433	@media (max-width: 768px) {
434	.merchant-cart-preview .my-cart .cart-table thead {
435	display: none;
436	}
437	.merchant-cart-preview .my-cart .cart-table tbody, .merchant-cart-preview .my-cart .cart-table tr, .merchant-cart-preview .my-cart .cart-table td {
438	display: block;
439	width: 100%;
440	}
441	.merchant-cart-preview .my-cart .cart-table .cart-item {
442	margin-bottom: 20px;
443	border: 1px solid #e0e0e0;
444	}
445	.merchant-cart-preview .my-cart .cart-table .cart-item td {
446	border: none;
447	position: relative;
448	padding-left: 50%;
449	text-align: right;
450	}
451	.merchant-cart-preview .my-cart .cart-table .cart-item td:before {
452	content: attr(data-label);
453	position: absolute;
454	left: 6px;
455	width: 45%;
456	padding-right: 10px;
457	white-space: nowrap;
458	font-weight: bold;
459	text-align: left;
460	}
461	.merchant-cart-preview .my-cart .cart-table .cart-item .product {
462	padding-left: 15px;
463	text-align: left;
464	}
465	.merchant-cart-preview .my-cart .cart-table .cart-item .product:before {
466	content: none;
467	}
468	}
469
470	.merchant-checkout-preview,
471	.merchant-thank-you-preview {
472	display: none;
473	}
474	.merchant-checkout-preview.show,
475	.merchant-thank-you-preview.show {
476	display: -webkit-box;
477	display: -ms-flexbox;
478	display: flex;
479	}
480	.merchant-checkout-preview .order-received,
481	.merchant-thank-you-preview .order-received {
482	padding: 20px;
483	width: 100%;
484	}
485	.merchant-checkout-preview .order-received .page-title,
486	.merchant-thank-you-preview .order-received .page-title {
487	font-size: 24px;
488	margin-bottom: 10px;
489	}
490	.merchant-checkout-preview .order-received > p,
491	.merchant-thank-you-preview .order-received > p {
492	font-size: 16px;
493	color: #666;
494	margin-bottom: 20px;
495	}
496	.merchant-checkout-preview .order-received .order-details,
497	.merchant-thank-you-preview .order-received .order-details {
498	background-color: #f5f5f5;
499	margin-bottom: 30px;
500	border-radius: 5px;
501	padding: 15px;
502	}
503	.merchant-checkout-preview .order-received .order-details .order-info,
504	.merchant-thank-you-preview .order-received .order-details .order-info {
505	min-width: 200px;
506	border-bottom: 1px solid #e0e0e0;
507	padding-bottom: 15px;
508	}
509	.merchant-checkout-preview .order-received .order-details .order-info:last-child,
510	.merchant-thank-you-preview .order-received .order-details .order-info:last-child {
511	border-bottom: none;
512	padding-bottom: 0;
513	padding-top: 15px;
514	}
515	.merchant-checkout-preview .order-received .order-details .order-info .item-title,
516	.merchant-thank-you-preview .order-received .order-details .order-info .item-title {
517	font-size: 14px;
518	color: #424242;
519	margin: 0 0 5px;
520	}
521	.merchant-checkout-preview .order-received .order-details .order-info p,
522	.merchant-thank-you-preview .order-received .order-details .order-info p {
523	font-size: 16px;
524	margin: 0;
525	color: #212121;
526	}
527	.merchant-checkout-preview .order-received .upsell-offer,
528	.merchant-thank-you-preview .order-received .upsell-offer {
529	border: 1px solid #E3E3E3;
530	padding: 20px;
531	position: relative;
532	}
533	.merchant-checkout-preview .order-received .upsell-offer .offer-title,
534	.merchant-thank-you-preview .order-received .upsell-offer .offer-title {
535	font-size: 18px;
536	margin-bottom: 15px;
537	padding-bottom: 15px;
538	border-bottom: 1px solid #E3E3E3;
539	}
540	.merchant-checkout-preview .order-received .upsell-offer .product-details,
541	.merchant-thank-you-preview .order-received .upsell-offer .product-details {
542	display: -webkit-box;
543	display: -ms-flexbox;
544	display: flex;
545	gap: 20px;
546	}
547	.merchant-checkout-preview .order-received .upsell-offer .product-details .product-image,
548	.merchant-thank-you-preview .order-received .upsell-offer .product-details .product-image {
549	width: 150px;
550	height: 150px;
551	background-color: #ddd;
552	}
553	.merchant-checkout-preview .order-received .upsell-offer .product-details .product-info,
554	.merchant-thank-you-preview .order-received .upsell-offer .product-details .product-info {
555	-webkit-box-flex: 1;
556	-ms-flex-positive: 1;
557	flex-grow: 1;
558	}
559	.merchant-checkout-preview .order-received .upsell-offer .product-details .product-info .product-name,
560	.merchant-thank-you-preview .order-received .upsell-offer .product-details .product-info .product-name {
561	font-size: 16px;
562	margin: 0 0 5px;
563	}
564	.merchant-checkout-preview .order-received .upsell-offer .product-details .product-info p,
565	.merchant-thank-you-preview .order-received .upsell-offer .product-details .product-info p {
566	font-size: 14px;
567	color: #666;
568	margin: 0 0 10px;
569	}
570	.merchant-checkout-preview .order-received .upsell-offer .product-details .product-info .discount-text,
571	.merchant-thank-you-preview .order-received .upsell-offer .product-details .product-info .discount-text {
572	font-size: 14px;
573	margin: 0 0 10px;
574	}
575	.merchant-checkout-preview .order-received .upsell-offer .product-details .product-info .add-to-order,
576	.merchant-thank-you-preview .order-received .upsell-offer .product-details .product-info .add-to-order {
577	background-color: #333;
578	color: #fff;
579	border: none;
580	padding: 10px 15px;
581	cursor: pointer;
582	font-size: 12px;
583	font-weight: bold;
584	}
585	@media (max-width: 600px) {
586	.merchant-checkout-preview .order-received .order-details,
587	.merchant-thank-you-preview .order-received .order-details {
588	-webkit-box-orient: vertical;
589	-webkit-box-direction: normal;
590	-ms-flex-direction: column;
591	flex-direction: column;
592	}
593	.merchant-checkout-preview .order-received .order-details .order-info,
594	.merchant-thank-you-preview .order-received .order-details .order-info {
595	-ms-flex-preferred-size: 100%;
596	flex-basis: 100%;
597	}
598	.merchant-checkout-preview .order-received .upsell-offer .product-details,
599	.merchant-thank-you-preview .order-received .upsell-offer .product-details {
600	-webkit-box-orient: vertical;
601	-webkit-box-direction: normal;
602	-ms-flex-direction: column;
603	flex-direction: column;
604	}
605	.merchant-checkout-preview .order-received .upsell-offer .product-details .product-image,
606	.merchant-thank-you-preview .order-received .upsell-offer .product-details .product-image {
607	width: 100%;
608	height: 200px;
609	}
610	}
611
612	@media (max-width: 991px) {
613	.mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image {
614	height: 33vw;
615	}
616	.mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image-thumbs .mrc-preview-product-image-thumb {
617	height: 7vw;
618	}
619	}