PluginProbe
YayCurrency – WooCommerce Multi-Currency Switcher / trunk
YayCurrency – WooCommerce Multi-Currency Switcher vtrunk
3.3.5 trunk 2.0.1 2.0.4 2.0.5 2.0.6 2.0.7 2.0.8 2.0.9 2.1.1 2.2 2.3 2.4.1 2.4.2 2.4.3 2.4.4 2.4.5 2.4.6 3.0.0 3.0.1 3.0.2 3.1 3.2 3.3 3.3.1 All 28 releases
yaycurrency / src / styles.css

styles.css in YayCurrency – WooCommerce Multi-Currency Switcher trunk, at src/styles.css

487 lines 9.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 mark,
2 ins {
3 text-decoration: none;
4 }
5
6 .yay-currency-checkout-notice,
7 .yay-currency-checkout-notice-admin {
8 background: #f8f8f8;
9 color: #555;
10 border-radius: 3px;
11 padding: 20px;
12 margin-bottom: 20px;
13 width: 100% !important;
14 }
15
16 .yay-currency-checkout-notice {
17 border-left: 3px solid #ffc106;
18 }
19
20 .yay-currency-checkout-notice-admin {
21 border-left: 3px solid #2271b1;
22 }
23
24 .yay-currency-switcher {
25 display: none !important;
26 width: 0 !important;
27 height: 0 !important;
28 }
29
30 .yay-currency-single-page-switcher {
31 margin-bottom: 8px;
32 }
33 .yay-currency-one-currency-by-country-wrapper {
34 pointer-events: none !important;
35 }
36 .yay-currency-form-switcher {
37 margin: 0;
38 }
39
40 .yay-currency-dropdown {
41 z-index: 9999 !important;
42 }
43
44 .yay-currency-dropdown a {
45 visibility: hidden !important;
46 }
47
48 .yay-currency-dropdown {
49 border-radius: 4px;
50 height: 30px !important;
51 margin: auto 0 !important;
52 max-width: 290px !important;
53 vertical-align: middle;
54 }
55
56 .yay-currency-form-switcher {
57 display: none !important;
58 }
59
60 .yay-currency-country-flag {
61 width: var(--flag-width);
62 height: var(--flag-height);
63 margin: var(--flag-margin);
64 }
65
66 /* CUSTOM SELECT */
67 .yay-currency-custom-select-wrapper {
68 overflow: visible !important;
69 position: relative;
70 user-select: none;
71 width: fit-content;
72 }
73
74 .yay-currency-custom-select-wrapper.widget {
75 width: 100%;
76 }
77
78 .yay-currency-custom-select-wrapper.small {
79 width: 235px;
80 font-size: 11px;
81 }
82
83 .yay-currency-custom-select-wrapper.no-currency-name {
84 width: fit-content;
85 }
86
87 .yay-currency-custom-select-wrapper.only-currency-name {
88 width: 180px;
89 }
90
91 .yay-currency-custom-select-wrapper.only-currency-name-and-something {
92 width: 215px;
93 }
94
95 .yay-currency-custom-select-wrapper.small.only-currency-name {
96 width: 160px;
97 }
98
99 .yay-currency-custom-select-wrapper.small.only-currency-name-and-something {
100 width: 190px;
101 }
102
103 .yay-currency-custom-select {
104 position: relative;
105 display: flex;
106 flex-direction: column;
107 width: fit-content;
108 }
109
110 .yay-currency-custom-select__trigger {
111 position: relative;
112 display: flex;
113 align-items: center;
114 justify-content: space-between;
115 color: #151515;
116 height: 36px;
117 line-height: 14px;
118 background: #ffffff;
119 cursor: pointer;
120 border: 1px solid #e5e5e5;
121 border-radius: 8px;
122 padding: 8px 12px;
123 gap: 8px;
124 width: fit-content;
125 box-sizing: border-box;
126 }
127
128 .yay-currency-custom-select__trigger.medium .yay-currency-selected-option,
129 .yay-currency-custom-option.medium {
130 font-size: 14px;
131 }
132
133 .yay-currency-custom-select__trigger.small {
134 height: 30px !important;
135 font-size: 12px !important;
136 padding: 8px 6px !important;
137 }
138
139 .yay-currency-custom-option.small {
140 font-size: 12px !important;
141 }
142
143 .yay-currency-custom-select__trigger:hover {
144 border: 1px solid #d4d4d4;
145 }
146
147 .yay-currency-custom-select.open .yay-currency-custom-select__trigger {
148 border: 1px solid #e5e5e5;
149 }
150
151 .yay-currency-custom-options {
152 position: absolute;
153 display: block;
154 top: 100%;
155 left: 0 !important;
156 right: 0;
157 border: 1px solid #e5e5e5;
158 border-radius: 8px;
159 background: #fff;
160 height: 0;
161 transition: all 0.2s;
162 max-height: 300px;
163 overflow-x: hidden;
164 overflow-y: auto;
165 scroll-padding-block: 4px;
166
167 margin: 0 !important;
168 margin-top: 3px !important;
169 /* padding: 0 !important; */
170 padding: 4px !important;
171 opacity: 0;
172 visibility: hidden;
173 pointer-events: none;
174 z-index: 99999999;
175 width: 100% !important;
176 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
177 0 2px 4px -2px rgba(0, 0, 0, 0.1);
178 }
179
180 .yay-currency-custom-options::-webkit-scrollbar {
181 width: 6px;
182 }
183
184 .yay-currency-custom-options::-webkit-scrollbar-thumb {
185 background-color: #d4d4d4;
186 border-radius: 3px;
187 }
188
189 .yay-currency-custom-options::-webkit-scrollbar-thumb:hover {
190 background-color: #a3a3a3;
191 }
192
193 .yay-currency-custom-options.upwards {
194 top: auto;
195 bottom: 95%;
196 }
197
198 .yay-currency-custom-select.open .yay-currency-custom-options {
199 display: block;
200 height: auto;
201 opacity: 1 !important;
202 visibility: visible !important;
203 pointer-events: all !important;
204 border-radius: 8px;
205 /*min-width: 130px;*/
206 max-width: 312px;
207 min-width: max-content;
208 }
209
210 .yay-currency-custom-select .yay-currency-custom-options {
211 transition: opacity 150ms ease, transform 150ms ease;
212 pointer-events: none;
213 }
214 .yay-currency-custom-select.open .yay-currency-custom-options.upwards {
215 animation: yayAnimationFadeIn 150ms ease-out,
216 yayAnimationSlideInFromBottom 150ms ease-out;
217 }
218 .yay-currency-custom-select.open .yay-currency-custom-options {
219 animation: yayAnimationFadeIn 150ms ease-out,
220 yayAnimationSlideInFromTop 150ms ease-out;
221 }
222
223 .yay-currency-custom-arrow {
224 width: 16px;
225 height: 16px;
226 }
227
228 .yay-currency-custom-arrow .yay-currency-arrow-icon {
229 opacity: 0.5;
230 width: 16px;
231 height: 16px;
232 }
233
234 .open .yay-currency-custom-select__trigger {
235 border-radius: 8px;
236 }
237
238 .open .upwards.yay-currency-custom-select__trigger {
239 border-radius: 8px;
240 }
241
242 .yay-currency-custom-select.open .upwards.yay-currency-custom-options {
243 border-radius: 8px;
244 margin-bottom: 5px !important;
245 margin-top: 0px !important;
246 }
247
248 .yay-currency-custom-option-row {
249 display: flex !important;
250 border-block: unset !important;
251 justify-content: flex-start;
252 align-items: center;
253 list-style: none;
254 padding: 8px 8px !important;
255 margin: 0 !important;
256 color: #171717;
257 line-height: 14px !important;
258 background-color: #fff;
259 gap: 8px;
260 }
261 .yay-currency-custom-option-row span.yay-currency-selected-checked-icon {
262 width: 14px;
263 height: 14px;
264 }
265
266 .yay-currency-custom-option-row:not(.yay-currency-row-with-flag)
267 span.yay-currency-selected-checked-icon {
268 position: absolute;
269 right: 12px;
270 display: flex;
271 justify-content: center;
272 }
273
274 .yay-currency-custom-option {
275 padding: 0 !important;
276 margin: 0 !important;
277 list-style: none !important;
278 }
279
280 .yay-currency-custom-option {
281 flex: 1;
282 min-width: 0;
283 max-width: 250px;
284 overflow: hidden;
285 white-space: nowrap;
286 text-overflow: ellipsis;
287 display: block;
288 }
289
290 .yay-currency-custom-option::before {
291 border-color: transparent !important;
292 }
293
294 .yay-currency-custom-option-row:not(.selected):hover {
295 color: #171717;
296 background-color: oklch(0.97 0 0);
297 border-radius: 6px;
298 }
299
300 .yay-currency-custom-option-row.selected {
301 color: #171717;
302 background-color: oklch(0.97 0 0);
303 border-radius: 6px;
304 }
305
306 .yay-currency-custom-options:has(
307 .yay-currency-custom-option-row:hover:not(.selected)
308 )
309 .yay-currency-custom-option-row.selected {
310 background-color: unset;
311 }
312
313 .yay-currency-custom-selected-option {
314 display: flex;
315 align-items: center;
316 gap: 8px;
317 }
318
319 .yay-currency-flag {
320 display: inline-block;
321 min-width: 24px;
322 min-height: 18px;
323 border-radius: 2px;
324
325 background-size: cover !important;
326 background-position: center !important;
327 background-repeat: no-repeat !important;
328 }
329
330 .yay-currency-flag.small {
331 min-width: 20px;
332 min-height: 15px;
333 }
334
335 .overflow-fix {
336 overflow: visible !important;
337 }
338
339 .z-index-fix {
340 z-index: 9999 !important;
341 }
342
343 /* Fix menu item Astra theme */
344 .yay-currency-dropdown.menu-item {
345 display: inline-block;
346 }
347
348 .yay-currency-product-page .ppc-button-wrapper {
349 display: none;
350 }
351
352 .yay-currency-custom-loader {
353 animation: spin 1s linear infinite;
354 border: 2px solid #f3f3f3;
355 border-top: 2px solid #cfcfcf;
356 border-radius: 50%;
357 display: none;
358 margin-right: 4px;
359 width: 14px;
360 height: 14px;
361 }
362
363 .woocommerce-checkout-review-order-table .bundled_table_item .product-name {
364 padding-left: 2.5em;
365 }
366
367 .yay-currency-custom-loader.active {
368 display: inline-block;
369 }
370
371 .yay-currency-checkout-force-payment-notice.yay-currency-force-payment-hide {
372 display: none;
373 }
374
375 .yay-currency-approximately-price-by-country {
376 display: block !important;
377 padding-left: 0;
378 line-height: 1.3;
379 padding: 7px 0px;
380 }
381
382 @keyframes spin {
383 0% {
384 transform: rotate(0deg);
385 }
386
387 100% {
388 transform: rotate(360deg);
389 }
390 }
391
392 /* Fade in/out */
393 @keyframes yayAnimationFadeIn {
394 from {
395 opacity: 0;
396 }
397 to {
398 opacity: 1;
399 }
400 }
401
402 @keyframes yayAnimationFadeOut {
403 from {
404 opacity: 1;
405 }
406 to {
407 opacity: 0;
408 }
409 }
410
411 @keyframes yayAnimationSlideInFromTop {
412 from {
413 transform: translateY(-0.5rem);
414 opacity: 0;
415 }
416 to {
417 transform: translateY(0);
418 opacity: 1;
419 }
420 }
421 @keyframes yayAnimationSlideInFromBottom {
422 from {
423 transform: translateY(0.5rem);
424 opacity: 0;
425 }
426 to {
427 transform: translateY(0);
428 opacity: 1;
429 }
430 }
431 @keyframes yayAnimationSlideInFromLeft {
432 from {
433 transform: translateX(-0.5rem);
434 opacity: 0;
435 }
436 to {
437 transform: translateX(0);
438 opacity: 1;
439 }
440 }
441 @keyframes yayAnimationSlideInFromRight {
442 from {
443 transform: translateX(0.5rem);
444 opacity: 0;
445 }
446 to {
447 transform: translateX(0);
448 opacity: 1;
449 }
450 }
451
452 /*Short code*/
453 .yay-currency-converter-container {
454 background-color: #eaeef2;
455 border-radius: 15px;
456 padding: 15px;
457 margin: 10px 0px;
458 }
459 .yay-currency-converter-wrapper {
460 line-height: 1.5;
461
462 padding: 10px 5px;
463 width: 100%;
464 background-color: #ffffff;
465 border: 1px solid #ffffff;
466 border-radius: 7px;
467 }
468 .yay-currency-converter-heading {
469 font-weight: 500;
470 }
471 input.yay-currency-converter-amount {
472 width: 100%;
473 border-radius: 7px;
474 background-color: #ffffff;
475 }
476
477 .yay-currency-converter-row {
478 margin-top: 15px;
479 }
480 .yay-currency-converter-result-wrapper {
481 font-weight: bold;
482 font-size: 1.2em;
483 }
484 .yay-currency-converter-result-value {
485 color: #008026;
486 }
487