/* ========================================================== ADMIN — PANTALLA DE ACCESO DEL SITIO Viste `wp-login.php`. La encola `Site\Login` por `login_enqueue_scripts`, o sea después de la hoja del núcleo, así que gana por orden de carga y no hace falta ni un `!important`. VISTE UN MARCADO AJENO. El de `wp-login.php` no se puede cambiar, así que los ganchos son los que hay: `#login`, `#loginform`, `#wp-submit`, `#nav`, `#backtoblog`. Son estables desde WordPress 4.x y el plugin pide 6.0 como mínimo. LA PALETA ES LA MISMA EN TODOS LOS PROYECTOS y no sale del diseño importado. Se probó tomándola de los tokens del cliente y se descartó por dos razones: las variables del diseño son de una web clara —`--surface-color` es blanco, `--text-color` casi negro— y darles la vuelta da grises sucios y contrastes que no pasan la AA; y una pantalla de acceso distinta en cada sitio no se puede revisar una vez y dar por buena. Lo único que cambia de un proyecto a otro es el nombre del sitio. Quien necesite otra cosa en un proyecto concreto edita esta hoja desde «Acceso» sin tocar el plugin. Se apoya en la clase `h2e-login`, que `Site\Login` añade al `` por `login_body_class`. ========================================================== */ /* ========================================================== 1. LA PALETA Fija, y por eso en un solo bloque: cambiarla entera es editar estas líneas. Los valores son literales y no `color-mix()` porque, siendo fijos, calcularlos en el navegador solo añade una dependencia de soporte a cambio de nada. ========================================================== */ body.h2e-login { --h2e-acceso-marca: #2271b1; --h2e-acceso-marca-clara: #8ab4d8; --h2e-acceso-fondo: #070c12; --h2e-acceso-tarjeta: rgba(19, 27, 38, 0.72); --h2e-acceso-tarjeta-opaca: #131b26; --h2e-acceso-borde: rgba(255, 255, 255, 0.12); --h2e-acceso-campo: rgba(8, 13, 20, 0.6); --h2e-acceso-texto: #f3f6fa; --h2e-acceso-titulo: #ffffff; --h2e-acceso-secundario: #b7c2d0; --h2e-acceso-error: #ff8a85; --h2e-acceso-tipografia: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --h2e-acceso-radio: 10px; --h2e-acceso-radio-tarjeta: 20px; --h2e-acceso-transicion: 160ms ease; --h2e-acceso-alto-control: 50px; } /* ========================================================== 2. EL FONDO Un degradado teñido de marca sobre negro. Sin imagen a propósito: una fotografía de fondo obliga a acertar con el recorte en cada proyecto y en cuanto falla se ve peor que no tener ninguna. El color de fondo va en `body.h2e-login` y no en un selector más corto por una cuestión de peso: WordPress declara `body.login { background: … }` con la forma abreviada, que son dos clases (0,2,0). Cualquier cosa por debajo la pisa el núcleo sin dejar rastro. ========================================================== */ body.h2e-login { align-content: center; background-color: var(--h2e-acceso-fondo); background-image: none; color: var(--h2e-acceso-texto); display: grid; font-family: var(--h2e-acceso-tipografia); font-size: 15px; justify-items: center; line-height: 1.5; margin: 0; min-height: 100vh; min-height: 100svh; padding: 48px 20px; position: relative; } /* El velo va en un pseudoelemento fijo para poder apilar los tres degradados sin que uno tape a otro, y para no crear contexto de apilamiento sobre el formulario. */ body.h2e-login::before { background: radial-gradient(90ch 70ch at 15% 0%, rgba(34, 113, 177, 0.62), transparent 72%), radial-gradient(70ch 60ch at 88% 100%, rgba(34, 113, 177, 0.28), transparent 70%), linear-gradient(155deg, rgba(6, 11, 17, 0.5) 0%, rgba(6, 11, 17, 0.86) 100%); content: ""; inset: 0; pointer-events: none; position: fixed; z-index: 0; } .h2e-login #login { max-width: 100%; padding: 0; position: relative; width: 416px; z-index: 1; } /* ========================================================== 3. EL NOMBRE DEL SITIO WordPress pone ahí su logotipo como imagen de fondo y esconde el texto del enlace con `text-indent: -9999px`. Aquí se deshace el escondite y el enlace vuelve a ser lo que dice ser: el nombre del negocio, que es lo único que cambia de un proyecto a otro. No hay opción de subir un logotipo. Sobre este fondo haría falta la versión clara de la marca, que casi ningún cliente tiene preparada, y un logotipo oscuro aquí desaparece sin que nadie entienda por qué. ========================================================== */ .h2e-login #login h1 { margin: 0; } .h2e-login #login h1 a { background-image: none; color: var(--h2e-acceso-titulo); display: block; font-size: 1.875rem; font-weight: 700; height: auto; letter-spacing: -0.015em; line-height: 1.2; margin: 0 auto 32px; overflow: visible; text-align: center; text-decoration: none; text-indent: 0; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); transition: opacity var(--h2e-acceso-transicion); width: auto; } .h2e-login #login h1 a:hover, .h2e-login #login h1 a:focus-visible { opacity: 0.82; } /* ========================================================== 4. LA TARJETA Vale para los tres formularios del acceso —entrar, recuperar la contraseña y ponerla nueva—, así que la regla se ancla a `.h2e-login form` y no a `#loginform`. El desenfoque de detrás es lo que hace que la tarjeta parezca apoyada sobre el fondo en lugar de pegada encima. Donde no haya `backdrop-filter` se queda el fondo sólido, que también funciona. ========================================================== */ .h2e-login form { background: var(--h2e-acceso-tarjeta-opaca); border: 1px solid var(--h2e-acceso-borde); border-radius: var(--h2e-acceso-radio-tarjeta); /* Tres capas: el filo claro de arriba, que es lo que hace que un rectángulo oscuro parezca un objeto y no un agujero; el aro tenue que lo despega del fondo; y la sombra proyectada. */ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.09) inset, 0 0 0 1px rgba(255, 255, 255, 0.03), 0 32px 80px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; /* El respiro entre campos sale del `gap` del contenedor, no de los márgenes de cada uno: así añadir un campo no obliga a recalcular nada. Los márgenes de WordPress se anulan abajo. */ gap: 22px; margin: 0; overflow: visible; padding: 36px 32px; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .h2e-login form { -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); background: var(--h2e-acceso-tarjeta); } } .h2e-login form p, .h2e-login form .user-pass-wrap { margin: 0; } /* ========================================================== 5. CAMPOS WordPress los pone a 24 px —tamaño de escritorio de hace diez años— y con margen inferior. Aquí bajan a 16 px, que es el mínimo con el que un iPhone no hace zoom al enfocar el campo. ========================================================== */ .h2e-login label { color: var(--h2e-acceso-texto); display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 8px; } .h2e-login input[type="text"], .h2e-login input[type="password"], .h2e-login input[type="email"] { background: var(--h2e-acceso-campo); border: 1px solid var(--h2e-acceso-borde); border-radius: var(--h2e-acceso-radio); box-shadow: none; color: var(--h2e-acceso-texto); font-family: inherit; font-size: 1rem; line-height: 1.5; margin: 0; min-height: var(--h2e-acceso-alto-control); padding: 12px 16px; transition: border-color var(--h2e-acceso-transicion), box-shadow var(--h2e-acceso-transicion), background-color var(--h2e-acceso-transicion); width: 100%; } .h2e-login input[type="text"]::placeholder, .h2e-login input[type="password"]::placeholder, .h2e-login input[type="email"]::placeholder { color: var(--h2e-acceso-secundario); } .h2e-login input[type="text"]:hover, .h2e-login input[type="password"]:hover, .h2e-login input[type="email"]:hover { border-color: rgba(255, 255, 255, 0.24); } .h2e-login input[type="text"]:focus, .h2e-login input[type="password"]:focus, .h2e-login input[type="email"]:focus { background: rgba(8, 13, 20, 0.85); border-color: var(--h2e-acceso-marca-clara); box-shadow: 0 0 0 3px rgba(138, 180, 216, 0.32); outline: 2px solid transparent; outline-offset: 2px; } /* El botón del ojo para ver la contraseña. WordPress lo coloca absoluto sobre el campo; se conserva la posición y se le da el área táctil que le falta. */ .h2e-login .wp-pwd { position: relative; } .h2e-login .wp-pwd input[type="text"], .h2e-login .wp-pwd input[type="password"] { padding-right: 54px; } .h2e-login .wp-hide-pw { align-items: center; background: transparent; border: 0; border-radius: var(--h2e-acceso-radio); color: var(--h2e-acceso-secundario); cursor: pointer; display: flex; height: var(--h2e-acceso-alto-control); justify-content: center; padding: 0; position: absolute; right: 0; top: 0; transition: color var(--h2e-acceso-transicion); width: 50px; } .h2e-login .wp-hide-pw:hover { color: var(--h2e-acceso-titulo); } .h2e-login .wp-hide-pw:focus-visible { box-shadow: 0 0 0 2px var(--h2e-acceso-marca-clara); outline: 2px solid transparent; } .h2e-login .wp-hide-pw .dashicons { height: 20px; width: 20px; } /* ========================================================== 6. RECUÉRDAME Y BOTÓN WordPress flota la casilla a la izquierda y el botón a la derecha, con un `clear` que hay que deshacer. Aquí van en una fila y el botón ocupa todo el ancho debajo: en un móvil, un botón de 100 px alineado a la derecha es el peor sitio para poner la única acción de la pantalla. ========================================================== */ .h2e-login .forgetmenot { align-items: center; display: flex; float: none; gap: 10px; } .h2e-login .forgetmenot label { color: var(--h2e-acceso-secundario); font-size: 0.875rem; font-weight: 400; margin: 0; } .h2e-login .forgetmenot input[type="checkbox"] { accent-color: var(--h2e-acceso-marca); height: 18px; margin: 0; width: 18px; } .h2e-login .submit { clear: none; display: block; } .h2e-login #wp-submit, .h2e-login .button-primary { background: var(--h2e-acceso-marca); border: 1px solid transparent; border-radius: var(--h2e-acceso-radio); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); color: #ffffff; cursor: pointer; float: none; font-family: inherit; font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; min-height: var(--h2e-acceso-alto-control); padding: 13px 20px; text-shadow: none; transition: filter var(--h2e-acceso-transicion), transform var(--h2e-acceso-transicion); width: 100%; } .h2e-login #wp-submit:hover, .h2e-login .button-primary:hover { filter: brightness(1.12); } .h2e-login #wp-submit:active, .h2e-login .button-primary:active { transform: translateY(1px); } .h2e-login #wp-submit:focus-visible, .h2e-login .button-primary:focus-visible { box-shadow: 0 0 0 3px var(--h2e-acceso-fondo), 0 0 0 6px var(--h2e-acceso-marca-clara); outline: 2px solid transparent; } /* ========================================================== 7. AVISOS El error y el mensaje van por encima del formulario, así que heredan su caja para que no parezcan pegados de otra pantalla. ========================================================== */ .h2e-login #login_error, .h2e-login .message, .h2e-login .success { background: var(--h2e-acceso-tarjeta-opaca); border: 1px solid var(--h2e-acceso-borde); border-left: 3px solid var(--h2e-acceso-marca-clara); border-radius: var(--h2e-acceso-radio); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); color: var(--h2e-acceso-texto); font-size: 0.9375rem; margin: 0 0 18px; padding: 15px 18px; } .h2e-login #login_error { border-left-color: var(--h2e-acceso-error); } .h2e-login #login_error a, .h2e-login .message a { color: var(--h2e-acceso-marca-clara); } /* ========================================================== 8. LOS DOS PIES «¿Has olvidado tu contraseña?» y «Ir a …». WordPress los separa con distinto margen y los sangra 24 px; aquí van centrados, a la misma distancia y con sombra, porque caen fuera de la tarjeta. ========================================================== */ .h2e-login #nav, .h2e-login #backtoblog { font-size: 0.875rem; margin: 22px 0 0; padding: 0; text-align: center; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); } .h2e-login #backtoblog { margin-top: 10px; } .h2e-login #nav a, .h2e-login #backtoblog a { border-radius: var(--h2e-acceso-radio); color: var(--h2e-acceso-secundario); text-decoration: none; transition: color var(--h2e-acceso-transicion); } .h2e-login #nav a:hover, .h2e-login #backtoblog a:hover { color: var(--h2e-acceso-titulo); text-decoration: underline; } .h2e-login #nav a:focus-visible, .h2e-login #backtoblog a:focus-visible { box-shadow: 0 0 0 2px var(--h2e-acceso-marca-clara); color: var(--h2e-acceso-titulo); outline: 2px solid transparent; outline-offset: 2px; } /* El selector de idioma que WordPress añade en instalaciones multiidioma: se centra con los pies en lugar de quedarse pegado a la izquierda, y no hereda la caja de la tarjeta aunque sea un `

`. */ .h2e-login .language-switcher { margin-top: 18px; } .h2e-login .language-switcher form { align-items: center; -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; border: 0; box-shadow: none; flex-direction: row; gap: 8px; justify-content: center; padding: 0; } /* El medidor de fuerza de la pantalla de contraseña nueva. Lo pinta WordPress con sus colores de panel, que sobre oscuro se leen mal; se le quita el fondo claro y se deja el color de estado, que es lo que informa. */ .h2e-login #pass-strength-result { background: var(--h2e-acceso-campo); border: 1px solid var(--h2e-acceso-borde); border-radius: var(--h2e-acceso-radio); color: var(--h2e-acceso-texto); margin: 0; padding: 10px 14px; text-align: center; width: 100%; } /* ========================================================== 9. PANTALLAS PEQUEÑAS Y PREFERENCIAS ========================================================== */ @media (max-width: 480px) { body.h2e-login { padding: 28px 16px; } .h2e-login form { padding: 28px 22px; } } /* Quien pide menos movimiento no lo pide solo para el sitio. */ @media (prefers-reduced-motion: reduce) { .h2e-login #login h1 a, .h2e-login input[type="text"], .h2e-login input[type="password"], .h2e-login input[type="email"], .h2e-login .wp-hide-pw, .h2e-login #wp-submit, .h2e-login .button-primary, .h2e-login #nav a, .h2e-login #backtoblog a { transition: none; } .h2e-login #wp-submit:active, .h2e-login .button-primary:active { transform: none; } } /* Con más contraste pedido, se van las transparencias: la tarjeta pasa a sólida y los bordes suben de peso. */ @media (prefers-contrast: more) { .h2e-login form { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--h2e-acceso-tarjeta-opaca); border-color: rgba(255, 255, 255, 0.4); } .h2e-login input[type="text"], .h2e-login input[type="password"], .h2e-login input[type="email"] { background: #060a0f; border-color: rgba(255, 255, 255, 0.4); } }