/* Redmine AI Translator — frontend styles */ .ai-translator-trigger { display: inline-block; position: relative; margin-left: 6px; vertical-align: middle; /* Lift the whole trigger above sibling form rows. Redmine uses Select2 for status/priority selects (z-index ~9999), so we need to outrank that. */ z-index: 9000; } /* When the menu is open, raise the trigger even higher so its dropdown wins the stacking battle against any other overlay on the page. */ .ai-translator-trigger.is-open { z-index: 100000; } .ai-translate-btn { font-size: 0.9em; padding: 3px 10px; cursor: pointer; background: #f0f6ff; border: 1px solid #b8d4f5; border-radius: 3px; color: #2a5db0; font-family: inherit; } .ai-translate-btn:hover:not(:disabled) { background: #e0ecff; } .ai-translate-btn:disabled, .ai-translate-btn.loading { opacity: 0.6; cursor: wait; } /* Menu is appended directly to , positioned via JS using position: fixed. This bypasses every parent's overflow/transform/stacking context. */ .ai-translate-menu { position: fixed; background: #fff; border: 1px solid #b8b8b8; list-style: none; margin: 0; padding: 0; min-width: 130px; /* Top layer — must beat Select2 (~9999), jQuery UI (~10000), modals. */ z-index: 2147483647; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); font-family: inherit; font-size: 0.95em; } .ai-translate-menu li { padding: 6px 12px; cursor: pointer; font-size: 0.95em; } .ai-translate-menu li:hover { background: #f0f6ff; } /* Toast notification */ .ai-translator-toast { position: fixed; bottom: 30px; right: 30px; padding: 12px 18px; border-radius: 4px; z-index: 99999; max-width: 400px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); font-size: 0.95em; } .ai-translator-toast.success { background: #d7eaca; color: #2c5234; border: 1px solid #6ba551; } .ai-translator-toast.error { background: #ffe2e0; color: #8a1f1c; border: 1px solid #c93a36; } /* ===== Admin dashboard ===== */ .ai-usage-summary { display: flex; gap: 16px; margin: 16px 0 24px; flex-wrap: wrap; } .ai-stat-card { background: #f8f8f8; border: 1px solid #ddd; border-radius: 4px; padding: 14px 20px; min-width: 140px; flex: 0 0 auto; } .ai-stat-number { font-size: 1.8em; font-weight: bold; margin: 6px 0 2px; color: #2a5db0; } .ai-stat-label { font-size: 0.85em; color: #666; } .ai-stat-cost { font-size: 1.1em; margin-top: 4px; color: #2c5234; } .ai-stat-fail { margin-top: 6px; font-size: 0.85em; color: #c93a36; } .ai-status { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 0.85em; font-weight: bold; } .ai-status-ok { background: #d7eaca; color: #2c5234; } .ai-status-quota_exceeded { background: #ffe2e0; color: #8a1f1c; } .ai-status-auth_failed { background: #ffe2e0; color: #8a1f1c; } .ai-status-rate_limit { background: #fff3cd; color: #856404; } .ai-status-timeout { background: #fff3cd; color: #856404; } .ai-status-error { background: #ffe2e0; color: #8a1f1c; }