PluginProbe ʕ •ᴥ•ʔ
Automation Web Platform – Notifications and OTP for WooCommerce, Advanced Country Code / 4.8.6
Automation Web Platform – Notifications and OTP for WooCommerce, Advanced Country Code v4.8.6
4.8.6 4.8.5 4.8.4 trunk 4.8.3
automation-web-platform / app / src / index.css
automation-web-platform / app / src Last commit date
assets 1 month ago constants 1 month ago data 1 month ago hooks 1 week ago lib 1 month ago ActivityLogs.tsx 1 week ago App.css 1 month ago App.tsx 1 week ago AuthenticationPagesSettings.tsx 1 week ago BlockManager.tsx 2 weeks ago ChatWidget.tsx 1 week ago Dashboard.tsx 1 week ago EmailTemplates.tsx 1 week ago GoogleRecaptchaSettings.tsx 2 weeks ago MainLayout.tsx 1 week ago NotificationsBuilder.tsx 1 week ago PasswordlessLoginSettings.tsx 1 week ago PhoneFieldSettings.tsx 1 week ago RegistrationFormSettings.tsx 1 week ago SMTPSender.tsx 1 week ago Senders.tsx 1 week ago Sidebar.tsx 1 week ago SystemInfo.tsx 1 week ago WhatsAppWebSender.tsx 1 week ago index.css 1 week ago index.php 1 month ago main.tsx 2 weeks ago types.ts 1 week ago
index.css
669 lines
1 @import "tailwindcss";
2
3 @custom-variant dark (&:is(.dark *));
4
5 @theme {
6 --font-bricolage: "Bricolage Grotesque", sans-serif;
7 --font-ibm-plex-arabic: "IBM Plex Sans Arabic", sans-serif;
8 --font-sans: var(--font-bricolage);
9 --font-arabic: var(--font-ibm-plex-arabic);
10
11 --color-border: oklch(0.928 0.006 264.531);
12 --color-input: oklch(0.928 0.006 264.531);
13 --color-ring: oklch(0.707 0.022 261.325);
14 --color-background: oklch(1 0 0);
15 --color-foreground: oklch(0.13 0.028 261.692);
16
17 --color-primary: oklch(0.60 0.13 163);
18 --color-primary-foreground: oklch(0.98 0.02 166);
19
20 --color-secondary: oklch(0.967 0.001 286.375);
21 --color-secondary-foreground: oklch(0.21 0.006 285.885);
22
23 --color-muted: oklch(0.967 0.003 264.542);
24 --color-muted-foreground: oklch(0.551 0.027 264.364);
25
26 --color-accent: oklch(0.967 0.003 264.542);
27 --color-accent-foreground: oklch(0.21 0.034 264.665);
28
29 --color-destructive: oklch(0.577 0.245 27.325);
30 --color-destructive-foreground: oklch(0.21 0.034 264.665);
31
32 --color-popover: oklch(1 0 0);
33 --color-popover-foreground: oklch(0.13 0.028 261.692);
34
35 --radius-sm: 0.375rem;
36 --radius-md: 0.5rem;
37 --radius-lg: 0.625rem;
38 --radius-xl: 0.875rem;
39 --radius: 0.625rem;
40
41 --animate-progress-fast: progress-fast 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
42
43 @keyframes progress-fast {
44 0% {
45 width: 0%;
46 opacity: 0.5;
47 }
48
49 50% {
50 width: 70%;
51 opacity: 1;
52 }
53
54 100% {
55 width: 100%;
56 opacity: 0.5;
57 }
58 }
59 }
60
61 @keyframes checkmark-pop {
62 0% {
63 transform: scale(0.5);
64 opacity: 0;
65 }
66
67 70% {
68 transform: scale(1.1);
69 opacity: 1;
70 }
71
72 100% {
73 transform: scale(1);
74 opacity: 1;
75 }
76 }
77
78 .animate-checkmark {
79 animation: checkmark-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
80 }
81
82 @layer base {
83
84 /* Scope styles only to the dashboard root to avoid WP admin leakage */
85 .wawp-dashboard-theme,
86 #wawp-dashboard-root,
87 .wawp-dashboard-theme h1,
88 .wawp-dashboard-theme h2,
89 .wawp-dashboard-theme h3,
90 .wawp-dashboard-theme h4,
91 .wawp-dashboard-theme h5,
92 .wawp-dashboard-theme h6,
93 .wawp-dashboard-theme p,
94 .wawp-dashboard-theme span:not([class*="ri-"]),
95 .wawp-dashboard-theme button,
96 .wawp-dashboard-theme input,
97 .wawp-dashboard-theme textarea,
98 .wawp-dashboard-theme select,
99 .wawp-dashboard-theme a,
100 .wawp-dashboard-theme label,
101 #wawp-dashboard-root h1,
102 #wawp-dashboard-root h2,
103 #wawp-dashboard-root h3,
104 #wawp-dashboard-root h4,
105 #wawp-dashboard-root h5,
106 #wawp-dashboard-root h6,
107 #wawp-dashboard-root p,
108 #wawp-dashboard-root span:not([class*="ri-"]),
109 #wawp-dashboard-root button,
110 #wawp-dashboard-root input,
111 #wawp-dashboard-root textarea,
112 #wawp-dashboard-root select,
113 #wawp-dashboard-root a,
114 #wawp-dashboard-root label,
115 .wawp-dropdown-menu-content,
116 .wawp-dropdown-menu-content * {
117 font-family: var(--font-bricolage) !important;
118 }
119
120 .wawp-dashboard-theme,
121 #wawp-dashboard-root,
122 .wawp-dashboard-theme h1,
123 .wawp-dashboard-theme h2,
124 .wawp-dashboard-theme h3,
125 .wawp-dashboard-theme h4,
126 .wawp-dashboard-theme h5,
127 .wawp-dashboard-theme h6,
128 .wawp-dashboard-theme p,
129 #wawp-dashboard-root h1,
130 #wawp-dashboard-root h2,
131 #wawp-dashboard-root h3,
132 #wawp-dashboard-root h4,
133 #wawp-dashboard-root h5,
134 #wawp-dashboard-root h6,
135 #wawp-dashboard-root p,
136 #wawp-dashboard-root span:not([class*="ri-"]):not(.wawp_top-bar *):not([data-sidebar] *),
137 #wawp-dashboard-root button:not(.wawp_top-bar *):not([data-sidebar] *),
138 #wawp-dashboard-root input:not(.wawp_top-bar *):not([data-sidebar] *),
139 #wawp-dashboard-root textarea:not(.wawp_top-bar *):not([data-sidebar] *),
140 #wawp-dashboard-root select:not(.wawp_top-bar *):not([data-sidebar] *),
141 #wawp-dashboard-root a:not(.wawp_top-bar *):not([data-sidebar] *),
142 #wawp-dashboard-root label:not(.wawp_top-bar *):not([data-sidebar] *) {
143 color: oklch(0.13 0.028 261.692);
144 }
145
146 [dir="rtl"] .wawp-dashboard-theme,
147 [dir="rtl"] #wawp-dashboard-root,
148 [dir="rtl"] .wawp-dashboard-theme h1,
149 [dir="rtl"] .wawp-dashboard-theme h2,
150 [dir="rtl"] .wawp-dashboard-theme h3,
151 [dir="rtl"] .wawp-dashboard-theme h4,
152 [dir="rtl"] .wawp-dashboard-theme h5,
153 [dir="rtl"] .wawp-dashboard-theme h6,
154 [dir="rtl"] .wawp-dashboard-theme p,
155 [dir="rtl"] .wawp-dashboard-theme span:not([class*="ri-"]),
156 [dir="rtl"] .wawp-dashboard-theme button,
157 [dir="rtl"] .wawp-dashboard-theme input,
158 [dir="rtl"] .wawp-dashboard-theme textarea,
159 [dir="rtl"] .wawp-dashboard-theme select,
160 [dir="rtl"] .wawp-dashboard-theme a,
161 [dir="rtl"] .wawp-dashboard-theme label,
162 [dir="rtl"] #wawp-dashboard-root h1,
163 [dir="rtl"] #wawp-dashboard-root h2,
164 [dir="rtl"] #wawp-dashboard-root h3,
165 [dir="rtl"] #wawp-dashboard-root h4,
166 [dir="rtl"] #wawp-dashboard-root h5,
167 [dir="rtl"] #wawp-dashboard-root h6,
168 [dir="rtl"] #wawp-dashboard-root p,
169 [dir="rtl"] #wawp-dashboard-root span:not([class*="ri-"]),
170 [dir="rtl"] #wawp-dashboard-root button,
171 [dir="rtl"] #wawp-dashboard-root input,
172 [dir="rtl"] #wawp-dashboard-root textarea,
173 [dir="rtl"] #wawp-dashboard-root select,
174 [dir="rtl"] #wawp-dashboard-root a,
175 [dir="rtl"] #wawp-dashboard-root label,
176 [dir="rtl"] .wawp-dropdown-menu-content,
177 [dir="rtl"] .wawp-dropdown-menu-content * {
178 font-family: var(--font-ibm-plex-arabic), sans-serif !important;
179 }
180
181 #wawp-dashboard-root {
182 background: oklch(1 0 0);
183 margin-inline-start: -20px;
184 height: 100% !important;
185 overflow: hidden !important;
186 display: flex !important;
187 flex-direction: column !important;
188 }
189
190
191 /* Reset some WP-specific overrides */
192 #wawp-dashboard-root * {
193 border-color: var(--color-border);
194 }
195
196 /* Global table alignment: center all headers and cells */
197 #wawp-dashboard-root th,
198 .wawp-dashboard-theme th {
199 text-align: center !important;
200 }
201
202 #wawp-dashboard-root td,
203 .wawp-dashboard-theme td {
204 text-align: center !important;
205 }
206
207 /* Fix WordPress Admin Bar icon wrapping when Tailwind is active */
208 #wpadminbar .wawp-toolbar-node img {
209 display: inline-block !important;
210 margin-top: -2px;
211 /* Slight adjustment for alignment */
212 }
213
214 /* Fix Sidebar Icon in Wawp Pages where Tailwind is active */
215 #adminmenu #toplevel_page_wawp .wp-menu-image:before {
216 margin-top: 7px !important;
217 }
218 }
219
220
221
222 /* Intl-Tel-Input Fit */
223 .iti {
224 width: 100%;
225 display: block;
226 }
227
228 .iti__country-list {
229 z-index: 100;
230 border-radius: 8px;
231 box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
232 border: 1px solid #e2e8f0;
233 }
234
235 /* Ensure padding is preserved */
236 .iti input {
237 padding-end: 52px !important;
238 }
239
240 [dir="rtl"] .iti input {
241 padding-end: 12px !important;
242 padding-start: 52px !important;
243 }
244
245 /* RTL-specific fixes for padding and margins */
246 [dir="rtl"] .pl-1 {
247 padding-end: 0 !important;
248 padding-start: 0.25rem !important;
249 }
250
251 [dir="rtl"] .pl-2 {
252 padding-end: 0 !important;
253 padding-start: 0.5rem !important;
254 }
255
256 [dir="rtl"] .pr-1 {
257 padding-start: 0 !important;
258 padding-end: 0.25rem !important;
259 }
260
261 [dir="rtl"] .pr-2 {
262 padding-start: 0 !important;
263 padding-end: 0.5rem !important;
264 }
265
266 [dir="rtl"] .ml-auto {
267 margin-end: auto !important;
268 margin-start: 0 !important;
269 }
270
271 [dir="rtl"] .pr-2 {
272 padding-start: 0 !important;
273 padding-end: 0.5rem !important;
274 }
275
276 [dir="rtl"] .ml-auto {
277 margin-end: auto !important;
278 margin-start: 0 !important;
279 }
280
281 [dir="rtl"] .mr-auto {
282 margin-start: auto !important;
283 margin-end: 0 !important;
284 }
285
286 /* Fix mr-2, mr-3 for icons in buttons */
287 [dir="rtl"] .mr-2 {
288 margin-start: 0 !important;
289 margin-end: 0.5rem !important;
290 }
291
292 [dir="rtl"] .mr-3 {
293 margin-start: 0 !important;
294 margin-end: 0.75rem !important;
295 }
296
297 /* Fix ml-2 for icons in buttons */
298 [dir="rtl"] .ml-2 {
299 margin-end: 0 !important;
300 margin-start: 0.5rem !important;
301 }
302
303 /* Fix ml-auto */
304 [dir="rtl"] .ml-auto {
305 margin-end: 0 !important;
306 margin-start: auto !important;
307 }
308
309 /* Fix end/start positioning */
310 [dir="rtl"] .end-0 {
311 end: auto !important;
312 start: 0 !important;
313 }
314
315 [dir="rtl"] .start-0 {
316 start: auto !important;
317 end: 0 !important;
318 }
319
320 [dir="rtl"] .end-10 {
321 end: auto !important;
322 start: 2.5rem !important;
323 }
324
325 [dir="rtl"] .start-10 {
326 start: auto !important;
327 end: 2.5rem !important;
328 }
329
330 [dir="rtl"] .end-3 {
331 end: auto !important;
332 start: 0.75rem !important;
333 }
334
335 [dir="rtl"] .start-3 {
336 start: auto !important;
337 end: 0.75rem !important;
338 }
339
340 [dir="rtl"] .end-3 {
341 end: auto !important;
342 start: 0.75rem !important;
343 }
344
345 [dir="rtl"] .start-3 {
346 start: auto !important;
347 end: 0.75rem !important;
348 }
349
350 [dir="rtl"] .start-1 {
351 start: auto !important;
352 end: 0.25rem !important;
353 }
354
355 /* RTL text alignment fixes */
356 [dir="rtl"] .text-end {
357 text-align: left !important;
358 }
359
360 [dir="rtl"] .text-start {
361 text-align: right !important;
362 }
363
364 [dir="rtl"] .justify-start {
365 justify-content: flex-end !important;
366 }
367
368 [dir="rtl"] .justify-end {
369 justify-content: flex-start !important;
370 }
371
372 /* RTL border fixes for quotes and messages */
373 [dir="rtl"] .border-l-2 {
374 border-end: none !important;
375 border-start: 2px solid var(--tw-border-color) !important;
376 }
377
378 [dir="rtl"] .border-l-4 {
379 border-end: none !important;
380 border-start: 4px solid var(--tw-border-color) !important;
381 }
382
383 [dir="rtl"] .border-l-8 {
384 border-end: none !important;
385 border-start: 8px solid var(--tw-border-color) !important;
386 }
387
388 [dir="rtl"] [class*="border-l-"] {
389 border-end: none !important;
390 }
391
392 /* RTL padding fixes for list items and nested elements */
393 [dir="rtl"] .pl-3 {
394 padding-end: 0 !important;
395 padding-start: 0.75rem !important;
396 }
397
398 [dir="rtl"] .pl-3\.5 {
399 padding-end: 0 !important;
400 padding-start: 0.875rem !important;
401 }
402
403 [dir="rtl"] .pl-4 {
404 padding-end: 0 !important;
405 padding-start: 1rem !important;
406 }
407
408 [dir="rtl"] .pl-6 {
409 padding-end: 0 !important;
410 padding-start: 1.5rem !important;
411 }
412
413 [dir="rtl"] .pl-7\.5 {
414 padding-end: 0 !important;
415 padding-start: 1.875rem !important;
416 }
417
418 [dir="rtl"] .pl-8 {
419 padding-end: 0 !important;
420 padding-start: 2rem !important;
421 }
422
423 [dir="rtl"] .pl-10 {
424 padding-end: 0 !important;
425 padding-start: 2.5rem !important;
426 }
427
428 [dir="rtl"] .pl-12 {
429 padding-end: 0 !important;
430 padding-start: 3rem !important;
431 }
432
433 [dir="rtl"] .pl-20 {
434 padding-end: 0 !important;
435 padding-start: 5rem !important;
436 }
437
438 /* RTL positioning fixes for absolute elements */
439 [dir="rtl"] .end-1 {
440 end: auto !important;
441 start: 0.25rem !important;
442 }
443
444 [dir="rtl"] .end-2 {
445 end: auto !important;
446 start: 0.5rem !important;
447 }
448
449 [dir="rtl"] .end-2\.5 {
450 end: auto !important;
451 start: 0.625rem !important;
452 }
453
454 [dir="rtl"] .end-4 {
455 end: auto !important;
456 start: 1rem !important;
457 }
458
459 [dir="rtl"] .-end-6 {
460 end: auto !important;
461 start: -1.5rem !important;
462 }
463
464 [dir="rtl"] .start-4 {
465 start: auto !important;
466 end: 1rem !important;
467 }
468
469 /* RTL margin fixes */
470 [dir="rtl"] .ml-1 {
471 margin-end: 0 !important;
472 margin-start: 0.25rem !important;
473 }
474
475 [dir="rtl"] .ml-3 {
476 margin-end: 0 !important;
477 margin-start: 0.75rem !important;
478 }
479
480 [dir="rtl"] .ml-4 {
481 margin-end: 0 !important;
482 margin-start: 1rem !important;
483 }
484
485 /* RTL Animation fixes - reverse slide-in direction */
486 [dir="rtl"] .slide-in-from-start-4 {
487 animation-name: slide-in-from-end-4 !important;
488 }
489
490 [dir="rtl"] .slide-in-from-start-8 {
491 animation-name: slide-in-from-end-8 !important;
492 }
493
494 @keyframes slide-in-from-end-4 {
495 from {
496 opacity: 0;
497 transform: translateX(-1rem);
498 }
499
500 to {
501 opacity: 1;
502 transform: translateX(0);
503 }
504 }
505
506 @keyframes slide-in-from-end-8 {
507 from {
508 opacity: 0;
509 transform: translateX(-2rem);
510 }
511
512 to {
513 opacity: 1;
514 transform: translateX(0);
515 }
516 }
517
518 /* Hide the technical container */
519 #recaptcha-container {
520 display: none;
521 }
522
523 :root {
524 --sidebar: hsl(180 100% 12%);
525 --sidebar-foreground: hsl(180 10% 90%);
526 --sidebar-primary: hsl(180 100% 10%);
527 --sidebar-primary-foreground: hsl(0 0% 100%);
528 --sidebar-accent: hsl(180 100% 15%);
529 --sidebar-accent-foreground: hsl(0 0% 100%);
530 --sidebar-border: hsl(180 100% 15%);
531 --sidebar-ring: hsl(180 100% 25%);
532 }
533
534 .dark {
535 --sidebar: hsl(240 5.9% 10%);
536 --sidebar-foreground: hsl(240 4.8% 95.9%);
537 --sidebar-primary: hsl(224.3 76.3% 48%);
538 --sidebar-primary-foreground: hsl(0 0% 100%);
539 --sidebar-accent: hsl(240 3.7% 15.9%);
540 --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
541 --sidebar-border: hsl(240 3.7% 15.9%);
542 --sidebar-ring: hsl(217.2 91.2% 59.8%);
543 }
544
545 @theme inline {
546 --color-sidebar: var(--sidebar);
547 --color-sidebar-foreground: var(--sidebar-foreground);
548 --color-sidebar-primary: var(--sidebar-primary);
549 --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
550 --color-sidebar-accent: var(--sidebar-accent);
551 --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
552 --color-sidebar-border: var(--sidebar-border);
553 --color-sidebar-ring: var(--sidebar-ring);
554 }
555
556 /* Prism Editor Styles */
557 .token.comment,
558 .token.prolog,
559 .token.doctype,
560 .token.cdata {
561 color: #94a3b8;
562 }
563
564 .token.punctuation {
565 color: #94a3b8;
566 }
567
568 .token.property,
569 .token.tag,
570 .token.boolean,
571 .token.number,
572 .token.constant,
573 .token.symbol,
574 .token.deleted {
575 color: #fb7185;
576 }
577
578 .token.selector,
579 .token.attr-name,
580 .token.string,
581 .token.char,
582 .token.builtin,
583 .token.inserted {
584 color: #4ade80;
585 }
586
587 .token.operator,
588 .token.entity,
589 .token.url,
590 .language-css .token.string,
591 .style .token.string {
592 color: #38bdf8;
593 }
594
595 .token.atrule,
596 .token.attr-value,
597 .token.keyword {
598 color: #818cf8;
599 }
600
601 .token.function,
602 .token.class-name {
603 color: #fbbf24;
604 }
605
606 .token.regex,
607 .token.important,
608 .token.variable {
609 color: #e879f9;
610 }
611
612 .token.important,
613 .token.bold {
614 font-weight: bold;
615 }
616
617 .token.italic {
618 font-style: italic;
619 }
620
621 .token.entity {
622 cursor: help;
623 }
624
625 @keyframes highlight-glow {
626 0% {
627 border-color: #10b981 !important;
628 box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.4) !important;
629 transform: scale(1.015);
630 }
631
632 15% {
633 border-color: #10b981 !important;
634 box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.5) !important;
635 transform: scale(1.015);
636 }
637
638 30% {
639 border-color: #10b981 !important;
640 box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.4) !important;
641 transform: scale(1);
642 }
643
644 85% {
645 border-color: #10b981 !important;
646 box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15) !important;
647 }
648
649 100% {
650 border-color: rgba(0, 0, 0, 0.08);
651 box-shadow: none;
652 }
653 }
654
655 .animate-highlight-glow {
656 animation: highlight-glow 3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
657 position: relative;
658 z-index: 10;
659 }
660
661 /* RTL overrides for Global OmniSearch Modal */
662 [dir="rtl"] .wawp-search-item {
663 text-align: right !important;
664 }
665
666 [dir="rtl"] .wawp-search-filter-dropdown {
667 left: auto !important;
668 right: 0 !important;
669 }