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