/* Hide JS language switcher when JS is disabled */ .js-only-language-switcher { display: none !important; } /* CSS-only hover dropdown for language switcher */ .language-dropdown { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Create a bigger touch/hover area */ .language-dropdown::before { content: ''; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; z-index: -1; } .language-dropdown-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background-color: rgba(31, 41, 55, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: none; border-radius: 0.375rem; color: white; font-size: 0.875rem; cursor: pointer; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: all 0.2s ease; } .language-dropdown-content { visibility: hidden; opacity: 0; position: absolute; right: 0; bottom: 100%; margin-bottom: 5px; display: flex; flex-direction: column; background-color: rgba(31, 41, 55, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 0.375rem; overflow: hidden; transform: translateY(10px); box-shadow: 0 -10px 15px -3px rgba(0, 0, 0, 0.2), 0 -4px 6px -2px rgba(0, 0, 0, 0.1); min-width: 10rem; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .language-dropdown:hover .language-dropdown-content, .language-dropdown:focus-within .language-dropdown-content { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; } .language-dropdown-content a { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; color: white; text-decoration: none; transition: background-color 0.2s; white-space: nowrap; } .language-dropdown-content a.active { background-color: rgba(37, 99, 235, 0.9); font-weight: 500; } .language-dropdown-content a:hover:not(.active) { background-color: rgba(55, 65, 81, 0.8); } /* Mobile menu overlay adjustments */ .peer-checked:checked ~ * .language-dropdown { position: static; margin-top: 1.5rem; } .peer-checked:checked ~ * .language-dropdown-content { position: relative; bottom: auto; width: 100%; margin-bottom: 0; transform: none; } /* Container for the language switcher to ensure proper positioning */ .nojs-language-switcher { position: relative; display: block; height: 0; overflow: visible; } /* Prevent pointer events on elements behind the dropdown */ .language-dropdown-content::after { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none; } /* Ensure dropdown stays visible when hovering over dropdown items */ .language-dropdown-content:hover { visibility: visible; opacity: 1; }

Blog

CompactoAncho completo

Blog

Artículos