/* ========================================================================== TRADUCTOR DE CONTENIDO — solo se carga con el sitio en inglés -------------------------------------------------------------------------- El widget de Google no viene callado: mete una barra propia arriba de todo, empuja el 40px hacia abajo con un estilo en línea, y envuelve cada texto traducido en etiquetas con estilos propios. Nada de eso es negociable desde su API, así que se apaga desde acá. El !important es inevitable: lo que se está pisando son estilos en línea y una hoja que Google inyecta después de la nuestra. Ver js/traductor-google.js para el porqué del widget. ========================================================================== */ /* La barra de Google y su ancla. Se va entera: el sitio ya tiene su propio selector de idioma en el header y dos son uno de más. */ .skiptranslate, iframe.skiptranslate, #goog-gt-tt, .goog-te-banner-frame { display: none !important; } /* El empujón de 40px que la barra dejaba compensado. Sin esto, el header se pega al borde con un hueco arriba y el hero deja de ocupar la pantalla completa: el síntoma se ve como "el sitio bajó un poco en inglés". */ body { top: 0 !important; position: static !important; } /* El contenedor del widget. Tiene que existir en el DOM para que Google tenga dónde montarse, pero no tiene nada que mostrar. */ #mitienda-traductor { display: none; } /* Google envuelve cada fragmento traducido en . Sin esto hereda el tamaño y el color por defecto del navegador, y el texto traducido se ve distinto del que quedó sin traducir -- en la misma línea, incluso. */ font, font[style] { font: inherit !important; color: inherit !important; background: none !important; vertical-align: inherit !important; } /* El resaltado amarillo que Google pinta al pasar el mouse sobre un texto traducido. En un sitio de fondo oscuro es un fogonazo. */ .goog-text-highlight { background: none !important; box-shadow: none !important; }