PluginProbe
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant / 2.3.1
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant v2.3.1
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 / buy-now / admin / preview.css
assets/css/modules/buy-now/admin
preview.css 10.0 KB 1 month ago preview.min.css 8.5 KB 1 month ago

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/buy-now/admin/preview.css

394 lines 10.0 KB Raw Download Zip
1 /**
2 * Admin Preview
3 * Buy Now
4 *
5 */
6 .merchant-module-page-preview .merchant-module-page-setting-fields {
7 gap: 24px;
8 }
9 .merchant-module-page-preview .merchant-module-page-setting-field {
10 margin: 0;
11 }
12 .merchant-module-page-preview .merchant-module-page-setting-field[data-id=shortcode_text] {
13 margin-top: 0;
14 }
15
16 .merchant-flexible-content-control.buy-now-style .layout:not(.active) {
17 border-color: #5c5f62;
18 }
19 .merchant-flexible-content-control.buy-now-style .layout .layout-body {
20 grid-gap: unset;
21 }
22 .merchant-flexible-content-control.buy-now-style .layout .layout-body .merchant-module-page-setting-field {
23 margin-bottom: 20px;
24 }
25
26 .merchant-module-page-preview-browser-inner {
27 display: -webkit-box;
28 display: -ms-flexbox;
29 display: flex;
30 -webkit-box-flex: 0;
31 -ms-flex-positive: 0;
32 flex-grow: 0;
33 width: 100%;
34 margin: auto;
35 padding: 25px;
36 }
37
38 .mrc-preview-single-product-elements {
39 width: 100%;
40 display: -webkit-box;
41 display: -ms-flexbox;
42 display: flex;
43 gap: 25px;
44 }
45 .mrc-preview-single-product-elements .mrc-preview-left-column {
46 width: 30%;
47 min-width: 30%;
48 }
49 .mrc-preview-single-product-elements .mrc-preview-right-column {
50 width: 70%;
51 padding-top: 25px;
52 }
53 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image {
54 background-color: #f5f5f5;
55 height: 12vw;
56 }
57 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image-thumbs {
58 width: 100%;
59 display: -webkit-box;
60 display: -ms-flexbox;
61 display: flex;
62 gap: 10px;
63 -ms-flex-wrap: nowrap;
64 flex-wrap: nowrap;
65 }
66 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image-thumbs .mrc-preview-product-image-thumb {
67 width: 100%;
68 height: 3vw;
69 background-color: #f5f5f5;
70 margin-top: 10px;
71 }
72
73 .mrc-mw-70 {
74 max-width: 70%;
75 }
76
77 .mrc-mw-30 {
78 max-width: 30%;
79 }
80
81 .mrc-mw-40 {
82 max-width: 40%;
83 }
84
85 .mrc-preview-text-placeholder {
86 background-color: #f5f5f5;
87 height: 13px;
88 }
89 .mrc-preview-text-placeholder + .mrc-preview-text-placeholder, .mrc-preview-text-placeholder + .mrc-preview-addtocart-placeholder {
90 margin-top: 15px;
91 }
92
93 .mrc-preview-addtocart-placeholder {
94 background-color: #e5e5e5;
95 width: 140px;
96 height: 30px;
97 }
98
99 @media (max-width: 991px) {
100 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image {
101 height: 33vw;
102 }
103 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image-thumbs .mrc-preview-product-image-thumb {
104 height: 7vw;
105 }
106 }
107 .merchant-buy-now-button {
108 display: -webkit-inline-box;
109 display: -ms-inline-flexbox;
110 display: inline-flex;
111 -webkit-box-align: center;
112 -ms-flex-align: center;
113 align-items: center;
114 margin-top: 1.3rem !important;
115 text-decoration: none;
116 padding-top: var(--mrc-buy-now-padding-top-bottom, 13px) !important;
117 padding-bottom: var(--mrc-buy-now-padding-top-bottom, 13px) !important;
118 padding-left: var(--mrc-buy-now-padding-left-right, 24px) !important;
119 padding-right: var(--mrc-buy-now-padding-left-right, 24px) !important;
120 font-size: var(--mrc-buy-now-font-size, 16px);
121 border-radius: var(--mrc-buy-now-border-radius, 0px);
122 color: #FFF !important;
123 border-color: #212121 !important;
124 background-color: #212121 !important;
125 }
126 .merchant-buy-now-button:hover {
127 color: #FFF !important;
128 border-color: #414141 !important;
129 background-color: #414141 !important;
130 }
131 .merchant-buy-now-button.merchant-custom-buy-now-button {
132 margin-top: var(--mrc-buy-now-margin-top, 1.3rem);
133 margin-bottom: var(--mrc-buy-now-margin-bottom, 1rem);
134 }
135
136 .merchant-buy-now-preview-product-page,
137 .merchant-buy-now-preview-popup {
138 display: none;
139 width: 100%;
140 }
141 .merchant-buy-now-preview-product-page.show,
142 .merchant-buy-now-preview-popup.show {
143 display: block;
144 }
145
146 .merchant-buy-now-popup-preview-overlay {
147 background: rgba(0, 0, 0, 0.05);
148 border-radius: 8px;
149 padding: 24px;
150 display: -webkit-box;
151 display: -ms-flexbox;
152 display: flex;
153 -webkit-box-align: center;
154 -ms-flex-align: center;
155 align-items: center;
156 -webkit-box-pack: center;
157 -ms-flex-pack: center;
158 justify-content: center;
159 }
160
161 .merchant-buy-now-popup-preview-box {
162 background: #fff;
163 border-radius: 12px;
164 padding: 24px;
165 width: 100%;
166 max-width: 360px;
167 -webkit-box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
168 box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
169 }
170
171 .merchant-buy-now-popup-preview-title {
172 margin: 0 0 4px;
173 font-size: 16px;
174 font-weight: 600;
175 color: #212121;
176 }
177
178 .merchant-buy-now-popup-preview-description {
179 margin: 0 0 16px;
180 font-size: 13px;
181 color: #757575;
182 }
183
184 .merchant-buy-now-popup-preview-products {
185 display: -webkit-box;
186 display: -ms-flexbox;
187 display: flex;
188 -webkit-box-orient: vertical;
189 -webkit-box-direction: normal;
190 -ms-flex-direction: column;
191 flex-direction: column;
192 gap: 8px;
193 margin-bottom: 16px;
194 }
195
196 .merchant-buy-now-popup-preview-product {
197 display: -webkit-box;
198 display: -ms-flexbox;
199 display: flex;
200 -webkit-box-align: center;
201 -ms-flex-align: center;
202 align-items: center;
203 gap: 10px;
204 padding: 10px;
205 border: 1px solid #e5e5e5;
206 border-radius: 6px;
207 }
208
209 .merchant-buy-now-popup-preview-product-checkbox {
210 -ms-flex-negative: 0;
211 flex-shrink: 0;
212 }
213 .merchant-buy-now-popup-preview-product-checkbox input[type=checkbox] {
214 width: 16px;
215 height: 16px;
216 accent-color: #212121;
217 }
218
219 .merchant-buy-now-popup-preview-product-image {
220 width: 40px;
221 height: 40px;
222 background: #f0f0f0;
223 border-radius: 4px;
224 -ms-flex-negative: 0;
225 flex-shrink: 0;
226 }
227
228 .merchant-buy-now-popup-preview-product-info {
229 -webkit-box-flex: 1;
230 -ms-flex: 1;
231 flex: 1;
232 display: -webkit-box;
233 display: -ms-flexbox;
234 display: flex;
235 -webkit-box-orient: vertical;
236 -webkit-box-direction: normal;
237 -ms-flex-direction: column;
238 flex-direction: column;
239 gap: 2px;
240 }
241 .merchant-buy-now-popup-preview-product-info .product-name {
242 font-size: 13px;
243 font-weight: 500;
244 color: #212121;
245 }
246 .merchant-buy-now-popup-preview-product-info .product-price {
247 font-size: 12px;
248 color: #666;
249 }
250
251 .merchant-buy-now-popup-preview-actions {
252 display: -webkit-box;
253 display: -ms-flexbox;
254 display: flex;
255 -webkit-box-orient: vertical;
256 -webkit-box-direction: normal;
257 -ms-flex-direction: column;
258 flex-direction: column;
259 gap: 6px;
260 }
261
262 .merchant-buy-now-popup-preview-accept {
263 width: 100%;
264 padding: 8px 16px;
265 border: none;
266 border-radius: 4px;
267 background: #212121;
268 color: #fff;
269 font-size: 13px;
270 font-weight: 500;
271 cursor: default;
272 }
273
274 .merchant-buy-now-popup-preview-decline {
275 width: 100%;
276 padding: 6px 16px;
277 border: 1px solid #ddd;
278 border-radius: 4px;
279 background: transparent;
280 color: #757575;
281 font-size: 12px;
282 cursor: default;
283 }
284
285 .merchant-buy-now-popup-preview-actions.is-btn-stacked {
286 -webkit-box-orient: vertical;
287 -webkit-box-direction: normal;
288 -ms-flex-direction: column;
289 flex-direction: column;
290 }
291
292 .merchant-buy-now-popup-preview-actions.is-btn-stacked-reverse {
293 -webkit-box-orient: vertical;
294 -webkit-box-direction: reverse;
295 -ms-flex-direction: column-reverse;
296 flex-direction: column-reverse;
297 }
298
299 .merchant-buy-now-popup-preview-actions.is-btn-side-by-side {
300 -webkit-box-orient: horizontal;
301 -webkit-box-direction: normal;
302 -ms-flex-direction: row;
303 flex-direction: row;
304 }
305 .merchant-buy-now-popup-preview-actions.is-btn-side-by-side .merchant-buy-now-popup-preview-accept,
306 .merchant-buy-now-popup-preview-actions.is-btn-side-by-side .merchant-buy-now-popup-preview-decline {
307 -webkit-box-flex: 1;
308 -ms-flex: 1;
309 flex: 1;
310 }
311
312 .merchant-buy-now-popup-preview-actions.is-btn-accept-only .merchant-buy-now-popup-preview-decline {
313 display: none;
314 }
315
316 .merchant-buy-now-popup-preview-products.is-layout-grid {
317 display: grid;
318 grid-template-columns: repeat(2, 1fr);
319 }
320 .merchant-buy-now-popup-preview-products.is-layout-grid .merchant-buy-now-popup-preview-product {
321 -webkit-box-orient: vertical;
322 -webkit-box-direction: normal;
323 -ms-flex-direction: column;
324 flex-direction: column;
325 text-align: center;
326 }
327 .merchant-buy-now-popup-preview-products.is-layout-grid .merchant-buy-now-popup-preview-product-checkbox {
328 position: absolute;
329 top: 6px;
330 left: 6px;
331 }
332 .merchant-buy-now-popup-preview-products.is-layout-grid .merchant-buy-now-popup-preview-product {
333 position: relative;
334 }
335
336 .merchant-buy-now-popup-preview-countdown {
337 display: -webkit-inline-box;
338 display: -ms-inline-flexbox;
339 display: inline-flex;
340 -webkit-box-align: center;
341 -ms-flex-align: center;
342 align-items: center;
343 -webkit-box-pack: center;
344 -ms-flex-pack: center;
345 justify-content: center;
346 position: relative;
347 width: 22px;
348 height: 22px;
349 margin-left: 6px;
350 -ms-flex-negative: 0;
351 flex-shrink: 0;
352 vertical-align: middle;
353 }
354 .merchant-buy-now-popup-preview-countdown svg {
355 width: 100%;
356 height: 100%;
357 -webkit-transform: rotate(-90deg);
358 transform: rotate(-90deg);
359 }
360 .merchant-buy-now-popup-preview-countdown .countdown-track {
361 fill: none;
362 stroke: rgba(255, 255, 255, 0.3);
363 stroke-width: 3;
364 }
365 .merchant-buy-now-popup-preview-countdown .countdown-fill {
366 fill: none;
367 stroke: #fff;
368 stroke-width: 3;
369 stroke-linecap: round;
370 }
371 .merchant-buy-now-popup-preview-countdown .countdown-seconds {
372 position: absolute;
373 font-size: 8px;
374 font-weight: 700;
375 color: inherit;
376 line-height: 1;
377 }
378
379 .merchant-buy-now-popup-preview-decline .merchant-buy-now-popup-preview-countdown .countdown-track {
380 stroke: rgba(0, 0, 0, 0.1);
381 }
382 .merchant-buy-now-popup-preview-decline .merchant-buy-now-popup-preview-countdown .countdown-fill {
383 stroke: currentColor;
384 }
385
386 .merchant-buy-now-popup-preview-title .merchant-buy-now-popup-preview-countdown .countdown-track {
387 stroke: rgba(0, 0, 0, 0.1);
388 }
389 .merchant-buy-now-popup-preview-title .merchant-buy-now-popup-preview-countdown .countdown-fill {
390 stroke: #666;
391 }
392 .merchant-buy-now-popup-preview-title .merchant-buy-now-popup-preview-countdown .countdown-seconds {
393 color: #666;
394 }