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