PluginProbe ʕ •ᴥ•ʔ
GPTranslate – Multilingual AI Translation for WordPress: Automatically Translate Websites / 2.27.5
GPTranslate – Multilingual AI Translation for WordPress: Automatically Translate Websites v2.27.5
2.33.6 2.33.5 2.33.2 2.32.10 2.33 2.33.1 2.32.6 2.32.7 2.32.8 trunk 2.10.3 2.10.4 2.10.5 2.10.6 2.11 2.12 2.13 2.14 2.14.1 2.15 2.15.1 2.16.1 2.16.2 2.17 2.18 2.18.1 2.18.2 2.19 2.20 2.21 2.22 2.23 2.24 2.25 2.25.1 2.25.2 2.26 2.27 2.27.10 2.27.5 2.28 2.28.1 2.29 2.30 2.31 2.32 2.32.5
gptranslate / assets / css / admin.css
gptranslate / assets / css Last commit date
admin.css 3 months ago bootstrap.min.css 3 months ago crawler.css 3 months ago select2.min.css 3 months ago
admin.css
883 lines
1 #wpbody-content > h1 {
2 color: #1d2327;
3 font-size: 2em;
4 margin: 0;
5 margin-left: -20px;
6 background: #FFF;
7 padding: 20px;
8 border: 1px solid #c3c4c7;
9 }
10
11 div.notice {
12 margin: 5px 20px 5px 0;
13 }
14
15 h2.nav-tab-wrapper {
16 margin-top: 20px;
17 }
18
19 img.gptranslate-plugin-icon {
20 width: 64px;
21 height: 64px;
22 }
23
24 /* Labels */
25 .gpt-label {
26 display: inline-block;
27 padding: 2px 8px;
28 font-size: 1em;
29 font-weight: 600;
30 color: #fff;
31 background-color: #0073aa; /* WordPress blue */
32 border-radius: 12px;
33 vertical-align: middle;
34 white-space: nowrap;
35 }
36
37 /* Success label */
38 .gpt-label-success {
39 background-color: #46b450;
40 }
41
42 /* Danger label */
43 .gpt-label-danger {
44 background-color: #dc3232;
45 }
46
47 /* Warning label */
48 .gpt-label-warning {
49 background-color: #ffb900;
50 color: #000;
51 }
52
53 /* Buttons */
54 .gpt-button {
55 display: inline-block;
56 padding: 6px 12px;
57 font-size: 14px;
58 font-weight: 600;
59 color: #fff;
60 background-color: #0073aa;
61 border: none;
62 border-radius: 2px;
63 cursor: pointer;
64 text-decoration: none;
65 transition: background-color 0.2s;
66 }
67
68 .gpt-button:hover {
69 background-color: #006799;
70 text-decoration: none;
71 }
72
73 /* Button variants */
74 .gpt-button-danger {
75 background-color: #dc3232;
76 }
77
78 .gpt-button-danger:hover {
79 background-color: #b81b1b;
80 }
81
82 .gpt-button-success {
83 background-color: #46b450;
84 }
85
86 .gpt-button-success:hover {
87 background-color: #3ea145;
88 }
89
90 /* Table styling */
91 .gpt-table {
92 width: 100%;
93 border-collapse: collapse;
94 margin-bottom: 20px;
95 }
96
97 .gpt-table th, .gpt-table td {
98 padding: 8px 10px;
99 border: 1px solid #ccc;
100 text-align: left;
101 }
102
103 .gpt-table th {
104 background-color: #f9f9f9;
105 font-weight: 600;
106 }
107
108 .form-table th {
109 vertical-align: top;
110 text-align: left;
111 padding: 20px 10px 10px 10px;
112 width: 200px;
113 line-height: 1.3;
114 font-weight: 600;
115 border-left: 1px solid #2271b1;
116 border-left-width: 4px;
117 box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
118 }
119
120 #tab-translator .form-table th {
121 width: 280px;
122 }
123
124 .form-table td {
125 box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
126 }
127
128 /* Edit record translation */
129 #wpfooter {
130 display: none !important;
131 }
132
133 input[name=pagelink], input[name=translated_alias], div.gptcard {
134 width: 60%;
135 }
136
137 @media ( max-width : 1024px) {
138 input[name=pagelink], div.gptcard {
139 width: 100%;
140 }
141 }
142
143 div.accordion-body {
144 max-height: 800px;
145 overflow: auto;
146 }
147
148 /* Search */
149 div.gptcard-header button, div.gptcard-header input {
150 font-weight: normal;
151 white-space: nowrap;
152 }
153
154 /* Sort dropdown */
155 .gpt-sort-select {
156 padding: 4px 8px;
157 font-size: 13px;
158 border: 1px solid #8c8f94;
159 border-radius: 4px;
160 background: #fff;
161 color: #2c3338;
162 cursor: pointer;
163 height: 30px;
164 margin-left: 4px;
165 }
166
167 .gpt-sort-select:focus {
168 border-color: #2271b1;
169 box-shadow: 0 0 0 1px #2271b1;
170 outline: none;
171 }
172
173 input[name=search] {
174 width: 50%;
175 }
176
177 /* Container */
178 form.form-filter-container {
179 display: flex;
180 justify-content: space-between;
181 margin-bottom: 10px;
182 position: relative;
183 }
184
185 div.right-filter-container input[type="submit"] {
186 margin: 0 1px;
187 }
188
189 .translations-container {
190 max-width: 100%;
191 padding: 1rem;
192 font-family: sans-serif;
193 }
194
195 *.doublesize-icon {
196 font-size: 18px;
197 font-weight: 700;
198 margin-left: 5px;
199 }
200
201 #search-input {
202 min-width: 300px;
203 margin-right: 2px;
204 }
205
206 #search-input+button,
207 #search-input+button+button {
208 margin-right: 2px;
209 }
210
211 /* Card */
212 .gptcard {
213 border: 1px solid #ddd;
214 border-radius: 6px;
215 margin-bottom: 1rem;
216 background-color: #fff;
217 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
218 }
219
220 /* Card header */
221 .gptcard-header {
222 background-color: #f5f5f5;
223 padding: 0.75rem 1rem;
224 border-bottom: 1px solid #ddd;
225 font-weight: bold;
226 }
227
228 .gptcard-header [data-role="search-translations"],
229 .gptcard-header [data-role="reset-search"] {
230 white-space: nowrap;
231 font-weight: normal;
232 }
233
234 /* Accordion toggle area */
235 .accordion-toggle {
236 display: flex;
237 align-items: center;
238 gap: 1rem;
239 }
240
241 /* Input group */
242 .input-group {
243 display: flex;
244 align-items: center;
245 gap: 0.5rem;
246 flex-wrap: nowrap;
247 width: 100%;
248 }
249
250 .input-group-text {
251 background-color: #e9ecef;
252 padding: 0.5rem 0.75rem;
253 border-radius: 4px;
254 font-size: 0.875rem;
255 }
256
257 #migraterow span.input-group label {
258 white-space: nowrap;
259 }
260
261 table.widefat input.form-check-input {
262 margin: 0;
263 }
264
265 /* Card body */
266 .gptcard-body {
267 padding: 1rem;
268 }
269
270 div.translation-row.translation-row-hidden {
271 display: none;
272 }
273
274 /* Buttons */
275 .btn {
276 display: inline-block;
277 padding: 0.375rem 0.75rem;
278 border-radius: 2px;
279 border: none;
280 font-size: 0.875rem;
281 cursor: pointer;
282 }
283
284 .btn-sm {
285 font-size: 0.75rem;
286 padding: 0.25rem 0.5rem;
287 }
288
289 .btn-primary {
290 background-color: #2271b1;
291 color: white;
292 }
293
294 .btn-success {
295 background-color: #198754;
296 color: white;
297 }
298
299 .btn-danger {
300 background-color: #dc3545;
301 color: white;
302 }
303
304 .btn-warning {
305 background-color: #ffc107;
306 color: black;
307 }
308
309 span.icon-refresh {
310 display: inline-block;
311 }
312
313 button.group-sync.btn-invisible {
314 display: none;
315 }
316
317 button.group-sync span.icon-refresh.icon-working {
318 animation: spin 2s infinite linear;
319 }
320
321 @keyframes spin {
322 0% {
323 transform: rotate(0deg);
324 }
325 100% {
326 transform: rotate(360deg);
327 }
328 }
329
330 /* Badges */
331 .badge {
332 display: inline-block;
333 padding: 0.35em 0.65em;
334 font-size: 1em;
335 font-weight: 600;
336 border-radius: 3px;
337 margin-bottom: 0.25rem;
338 }
339
340 /* Colori di stato */
341 .bg-primary {
342 background-color: #2271b1;
343 color: #FFFFFF;
344 }
345
346 .bg-success {
347 background-color: #28a745;
348 color: #FFFFFF;
349 }
350
351 .bg-danger {
352 background-color: #dc3545;
353 color: #FFFFFF;
354 }
355
356 .bg-warning {
357 background-color: #ffc107;
358 color: #212529;
359 }
360
361 .bg-info {
362 background-color: #17a2b8;
363 color: #FFFFFF;
364 }
365
366 /* Zero state */
367 .gptranslate-zero-state {
368 max-width: 720px;
369 margin: 80px auto;
370 padding: 40px;
371 background: #ffffff;
372 border-radius: 8px;
373 border: 1px solid #e5e5e5;
374 text-align: center;
375 }
376
377 .gptranslate-zero-title {
378 font-size: 24px;
379 font-weight: 600;
380 margin-bottom: 10px;
381 }
382
383 .gptranslate-zero-icon {
384 margin-bottom: 20px;
385 opacity: 0.9;
386 }
387
388 .gptranslate-zero-desc {
389 font-size: 15px;
390 color: #555;
391 margin-bottom: 30px;
392 }
393
394 .gptranslate-zero-hint {
395 margin-top: 20px;
396 font-size: 13px;
397 color: #777;
398 }
399
400 #gptranslate-start-crawler span.dashicons-before::before {
401 vertical-align: middle;
402 margin-right: 10px;
403 }
404
405 /* Textarea */
406 .translation-row textarea {
407 width: 198px;
408 height: 60px;
409 }
410
411 /* Translation row */
412 .translation-row {
413 padding-top: 1rem;
414 margin-top: 1rem;
415 display: flex;
416 align-items: center;
417 column-gap: 10px;
418 align-items: center;
419 position: relative;
420 }
421
422 .translation-row label.gpt-label.badge {
423 position: absolute;
424 right: 1px;
425 top: 0;
426 font-size: 12px;
427 }
428
429 /* Tooltips */
430 .custom-tooltip {
431 position: absolute;
432 top: 0;
433 left: 0;
434 z-index: 9999;
435 background: #333;
436 color: #fff;
437 padding: 6px 10px;
438 font-size: 0.85em;
439 border-radius: 4px;
440 max-width: 250px;
441 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
442 pointer-events: none;
443 opacity: 0;
444 transition: opacity 0.2s ease;
445 white-space: normal;
446 }
447
448 /* Settings with switchers */
449 a.nav-tab:focus {
450 box-shadow: none;
451 }
452
453 div.tab-content > p:first-child,
454 div.tab-content > p:last-child {
455 text-align: right;
456 margin-right: 20px;
457 }
458
459 #config-gptranslate table.form-table {
460 margin-top: -40px;
461 }
462
463 table.form-table th.settings-label-separator {
464 border: none;
465 background: #2271b1;
466 color: #FFF;
467 text-align: center;
468 padding: 0;
469 vertical-align: middle;
470 border-left: 4px solid #2271b1;
471 }
472
473 table.widefat.fixed.striped a:focus {
474 box-shadow: none;
475 }
476
477 table tr.alt_translations_0 {
478 display: none;
479 }
480
481 /* API Key field with eye-toggle */
482 .gpt-apikey-wrap {
483 display: flex;
484 align-items: center;
485 gap: 0;
486 }
487 .gpt-apikey-wrap .button {
488 padding: 0 12px;
489 height: 30px;
490 line-height: 30px;
491 flex-shrink: 0;
492 background: #f6f7f7;
493 }
494 .gpt-apikey-wrap .dashicons {
495 font-size: 18px;
496 width: 18px;
497 height: 18px;
498 margin-top: 4px;
499 }
500
501 .gpt-apikey-wrap .dashicons.dashicons-visibility,
502 .gpt-apikey-wrap .dashicons.dashicons-hidden {
503 line-height: normal;
504 }
505
506 .gpt-apikey-wrap .large-apikey {
507 width: 50%;
508 }
509
510 .toggle-import {
511 background: #FFF;
512 padding: 4px 5px;
513 }
514
515 .wp-admin input[type=file] {
516 border: 1px solid #CCC;
517 border-radius: 4px;
518 padding-left: 5px;
519 }
520
521 div.exportimportbtns {
522 display: flex;
523 justify-content: flex-end;
524 margin-top: -40px;
525 column-gap: 5px;
526 margin-right: 20px;
527 }
528
529 #add-repeatable-row {
530 float: right;
531 }
532
533 #bulk-delete-btn, #toggle-migration {
534 margin-right: 10px;
535 }
536
537 #migraterow {
538 width: fit-content;
539 margin-bottom: 10px;
540 background: #FFF;
541 padding: 5px 10px;
542 border-radius: 4px;
543 }
544
545 #migraterow .input-group {
546 width: auto;
547 margin-right: 10px;
548 }
549
550 #migraterow .button {
551 margin-right: 5px;
552 }
553
554 /* Pagination */
555 .tablenav-pages {
556 margin-top: 20px;
557 }
558
559 .tablenav-pages .button {
560 margin-bottom: 4px !important;
561 margin-right: 5px;
562 padding: 5px 10px;
563 text-decoration: none;
564 }
565
566 .tablenav-pages .current-page {
567 font-weight: bold;
568 background-color: #0073aa;
569 color: #fff;
570 }
571
572 div.action-buttons-toolbar {
573 margin: 5px 0 10px;
574 }
575
576 input[name='import_file'] {
577 margin-left: 5px;
578 }
579
580 #translations_json {
581 display: none !important;
582 }
583
584 .wp-core-ui .button-warning,
585 .wp-core-ui .button-warning:focus,
586 .wp-core-ui .button-warning:active {
587 background: #f15116;
588 border-color: #d43900;
589 color: #fff;
590 }
591
592 .wp-core-ui .button-warning:hover {
593 background: #d43900;
594 border-color: #d43900;
595 color: #fff;
596 }
597
598 .wp-core-ui .button-warning.button-crawler {
599 position: absolute;
600 top: 40px;
601 right: 0;
602 box-shadow: none;
603 }
604
605 div.wrap:has(input.button-crawler) {
606 position: relative;
607 }
608
609 div.wrap:has(#notranslations-notice) .button-warning.button-crawler {
610 top: -60px;
611 }
612
613 @media (max-width: 782px) {
614 .wp-core-ui .button-warning.button-crawler {
615 top: 50px;
616 }
617 }
618
619 @media (max-width: 1280px) { body.toplevel_page_gptranslate, body.gptranslate_page_gptranslate-settings { min-width: 1280px; overflow-x: auto }}
620
621 /* GPTranslate iOS switch */
622 .wrapper {
623 position: relative;
624 display: inline-block;
625 width: 52px;
626 height: 28px;
627 vertical-align: middle;
628 cursor: pointer;
629 }
630
631 .wrapper input[type="radio"] {
632 position: absolute;
633 opacity: 0;
634 pointer-events: none;
635 }
636
637 .wrapper > label {
638 position: absolute;
639 top: 0;
640 left: 0;
641 height: 100%;
642 width: 50%;
643 cursor: pointer;
644 }
645 .wrapper > label:last-child {
646 left: 50%;
647 }
648
649 .wrapper > label > span {
650 position: absolute !important;
651 width: 1px;
652 height: 1px;
653 overflow: hidden;
654 clip: rect(1px,1px,1px,1px);
655 }
656
657 .wrapper::before {
658 content: "";
659 position: absolute;
660 inset: 0;
661 background: #bdbdbd;
662 border-radius: 999px;
663 transition: background-color 0.25s ease, box-shadow 0.25s ease;
664 box-shadow: inset 0 0 3px rgba(0,0,0,0.25);
665 pointer-events: none;
666 }
667
668 .wrapper::after {
669 position: absolute;
670 top: 3px;
671 left: 3px;
672 width: 22px;
673 height: 22px;
674 border-radius: 50%;
675 background: #fff;
676 box-shadow: 0 1px 4px rgba(0,0,0,0.3);
677 transition: transform 0.28s cubic-bezier(0.45,1.6,0.45,1), color 0.2s ease;
678 pointer-events: none;
679 display: flex;
680 align-items: center;
681 justify-content: center;
682 font-size: 14px;
683 font-weight: bold;
684 content: "";
685 }
686
687 .wrapper:has(> label:first-child > input:checked)::after {
688 content: "";
689 color: #2196f3;
690 }
691
692 .wrapper:has(> label:first-child > input:checked)::before {
693 background: #2196f3;
694 box-shadow: 0 0 0 3px rgba(33,150,243,0.18);
695 }
696 .wrapper:has(> label:first-child > input:checked)::after {
697 transform: translateX(24px);
698 }
699
700 .wrapper:has(> label:last-child > input:checked)::before {
701 background: #bdbdbd;
702 }
703 .wrapper:has(> label:last-child > input:checked)::after {
704 transform: translateX(0);
705 }
706
707 .wrapper:hover::before {
708 box-shadow: 0 0 0 3px rgba(33,150,243,0.12);
709 }
710 .wrapper input[type="radio"]:focus-visible + span {
711 outline: 2px solid rgba(33,150,243,0.45);
712 outline-offset: 2px;
713 }
714
715 /* Test API Key button */
716 #btn_test_apikey {
717 margin: 4px 0 0 1px;
718 vertical-align: middle;
719 background: #f6f7f7;
720 }
721 #btn_test_apikey:disabled {
722 opacity: 0.7;
723 cursor: wait;
724 }
725 .icon-spin {
726 animation: gpt-spin 1s linear infinite;
727 }
728 @keyframes gpt-spin {
729 0% { transform: rotate(0deg); }
730 100% { transform: rotate(360deg); }
731 }
732 #apikey_test_result {
733 display: inline-block;
734 padding: 3px 10px;
735 border-radius: 3px;
736 font-size: 13px;
737 vertical-align: middle;
738 font-weight: 500;
739 }
740 .gpt-test-success {
741 background-color: #d4edda;
742 color: #155724;
743 border: 1px solid #c3e6cb;
744 }
745 .gpt-test-error {
746 background-color: #f8d7da;
747 color: #721c24;
748 border: 1px solid #f5c6cb;
749 max-width: 500px;
750 word-break: break-word;
751 }
752
753 .gpt-field-error {
754 border-color: #dc3232 !important;
755 box-shadow: 0 0 0 1px #dc3232 !important;
756 }
757 .gpt-validation-error {
758 display: block;
759 color: #dc3232;
760 font-size: 12px;
761 margin-top: 4px;
762 margin-left: 4px;
763 margin-right: 4px;
764 }
765
766 .gpt-drag-over-before {
767 border-top: 3px solid #2271b1;
768 box-shadow: 0 -2px 6px rgba(34, 113, 177, 0.35);
769 }
770 .gpt-drag-over-after {
771 border-bottom: 3px solid #2271b1;
772 box-shadow: 0 2px 6px rgba(34, 113, 177, 0.35);
773 }
774
775 /* Targetta ogni body che ha una classe 'branch-' seguita da un numero >= 7 */
776 body[class*="branch-7"] .wrapper:has(> label:first-child > input:checked)::after,
777 body[class*="branch-8"] .wrapper:has(> label:first-child > input:checked)::after,
778 body[class*="branch-9"] .wrapper:has(> label:first-child > input:checked)::after {
779 color: #3858e9;
780 }
781
782 body[class*="branch-7"] .wrapper:has(> label:first-child > input:checked)::before,
783 body[class*="branch-8"] .wrapper:has(> label:first-child > input:checked)::before,
784 body[class*="branch-9"] .wrapper:has(> label:first-child > input:checked)::before {
785 background: #3858e9;
786 }
787
788 body[class*="branch-7"] table.form-table th.settings-label-separator,
789 body[class*="branch-8"] table.form-table th.settings-label-separator,
790 body[class*="branch-9"] table.form-table th.settings-label-separator {
791 background: #3858e9;
792 border-left: 4px solid #3858e9;
793 }
794
795 body[class*="branch-7"] div.exportimportbtns,
796 body[class*="branch-8"] div.exportimportbtns,
797 body[class*="branch-9"] div.exportimportbtns {
798 margin-top: -50px;
799 }
800
801
802 body[class*="branch-7"] input[name="gptranslate_settings_file"],
803 body[class*="branch-8"] input[name="gptranslate_settings_file"],
804 body[class*="branch-9"] input[name="gptranslate_settings_file"],
805 body[class*="branch-7"] input[name="import_file"],
806 body[class*="branch-8"] input[name="import_file"],
807 body[class*="branch-9"] input[name="import_file"] {
808 border: 1px solid #CCC;
809 border-radius: 4px;
810 padding-left: 5px;
811 padding: 8px;
812 }
813
814 body[class*="branch-7"] .gpt-label:not([class*="bg-"]),
815 body[class*="branch-8"] .gpt-label:not([class*="bg-"]),
816 body[class*="branch-9"] .gpt-label:not([class*="bg-"]) {
817 background-color: #3858e9;
818 }
819
820 body[class*="branch-7"].wp-core-ui .button-warning.button-crawler,
821 body[class*="branch-8"].wp-core-ui .button-warning.button-crawler,
822 body[class*="branch-9"].wp-core-ui .button-warning.button-crawler {
823 top: 50px;
824 }
825
826 body[class*="branch-7"] .bg-primary,
827 body[class*="branch-8"] .bg-primary,
828 body[class*="branch-9"] .bg-primary,
829 body[class*="branch-7"] .btn-primary,
830 body[class*="branch-8"] .btn-primary,
831 body[class*="branch-9"] .btn-primary {
832 background-color: #3858e9;
833 }
834
835 body[class*="branch-7"] #btn_test_apikey span.dashicons,
836 body[class*="branch-8"] #btn_test_apikey span.dashicons,
837 body[class*="branch-9"] #btn_test_apikey span.dashicons {
838 line-height: normal;
839 margin-top: -1px;
840 }
841
842 body[class*="branch-7"] div.notice.notice-success,
843 body[class*="branch-8"] div.notice.notice-success,
844 body[class*="branch-9"] div.notice.notice-success {
845 border-top: 1px solid #4ab866;
846 border-right: 1px solid #4ab866;
847 border-bottom: 1px solid #4ab866;
848 }
849
850 body[class*="branch-7"] div.notice.notice-warning,
851 body[class*="branch-8"] div.notice.notice-warning,
852 body[class*="branch-9"] div.notice.notice-warning {
853 border-top: 1px solid #f0b849;
854 border-right: 1px solid #f0b849;
855 border-bottom: 1px solid #f0b849;
856 }
857
858 body[class*="branch-7"].wp-core-ui div.left-filter-container .button,
859 body[class*="branch-8"].wp-core-ui div.left-filter-container .button,
860 body[class*="branch-9"].wp-core-ui div.left-filter-container .button,
861 body[class*="branch-7"].wp-core-ui div.right-filter-container .button,
862 body[class*="branch-8"].wp-core-ui div.right-filter-container .button,
863 body[class*="branch-9"].wp-core-ui div.right-filter-container .button {
864 background: #f6f7f7;
865 }
866
867 body[class*="branch-7"] .form-table th,
868 body[class*="branch-8"] .form-table th,
869 body[class*="branch-9"] .form-table th {
870 border-left-color: #3858e9;
871 }
872
873 body[class*="branch-7"] input[name="exactmatch"],
874 body[class*="branch-8"] input[name="exactmatch"],
875 body[class*="branch-9"] input[name="exactmatch"]{
876 border: 1px solid #3858e9;
877 }
878
879 body[class*="branch-7"] .gpt-apikey-wrap .dashicons,
880 body[class*="branch-8"] .gpt-apikey-wrap .dashicons,
881 body[class*="branch-9"] .gpt-apikey-wrap .dashicons {
882 margin-top: 5px;
883 }