/* * On-page Google Translate control (tickets #57 / #51). * * A slim, right-aligned bar sitting on the 775px content shell, above the * header. Unobtrusive on desktop, wraps cleanly on a phone, and never widens * the page (no horizontal scroll). */ #mbp-translate-bar { max-width: 775px; margin: 0 auto 6px auto; padding: 2px 4px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-family: verdana, arial, helvetica, sans-serif; font-size: 8pt; color: #195B85; box-sizing: border-box; } #mbp-translate-label { font-weight: bold; white-space: nowrap; } /* The widget Google injects. Keep it from ever pushing the row wider than the * shell. */ #google_translate_element { display: inline-block; max-width: 100%; } /* Google's default control has some chrome we do not need on a compact bar. */ #google_translate_element .goog-te-gadget { font-size: 8pt !important; color: transparent !important; /* hide the "Powered by" text run; the select stays */ line-height: 1 !important; white-space: nowrap; } #google_translate_element .goog-te-gadget .goog-te-combo { color: #000 !important; margin: 0 !important; padding: 2px 4px; font-size: 8pt; vertical-align: middle; max-width: 100%; } /* When a language is chosen Google injects a top banner iframe and pushes the * whole down by ~40px, which shifts the page and looks broken. Hide the * banner and pin the body; members switch back to English from the same select * (the picker keeps an "English / Original" option), so no functionality is * lost. */ .goog-te-banner-frame.skiptranslate, iframe.goog-te-banner-frame { display: none !important; visibility: hidden !important; } body { top: 0 !important; position: static !important; } /* Google's hover tooltip box; harmless but can flash. Keep it out of the flow. */ #goog-gt-tt, .goog-te-balloon-frame { display: none !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } @media screen and (max-width: 820px) { #mbp-translate-bar { justify-content: center; padding: 4px; } }