/* ========================================================================= Apariencias de la pantalla de acceso ========================================================================= Tres maquetaciones sobre la MISMA estructura, para que cambiar de una a otra no toque ninguna vista: body.cms-login--basica tarjeta centrada con trama de puntos body.cms-login--portada ilustración a sangre + formulario a la derecha body.cms-login--dividida una sola tarjeta partida en dos El HTML siempre es: .cms-login__shell aside.cms-login__art (sólo portada y dividida) main.cms-login__panel .cms-login__box (el formulario) Agregar un estilo nuevo es añadirlo a App\Support\LoginAppearance y escribir su bloque aquí abajo. Nada más. ========================================================================= */ /* Se carga después del CSS del tema a propósito: algunos temas centran el por su cuenta (appdashboard lo hace con .auth-page) y eso pelea con las maquetaciones de abajo, sobre todo con la de portada a sangre. */ .cms-login { display: block; min-height: 100vh; margin: 0; padding: 0; } .cms-login__shell { display: flex; min-height: 100vh; align-items: stretch; } .cms-login__panel { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; padding: 2rem 1.25rem; } .cms-login__box { width: 100%; max-width: 400px; } /* Envoltorio de la tarjeta. Por defecto no maqueta nada: sólo el estilo «dividida» lo usa, y así los demás siguen viendo aside y panel como hijos directos del shell. */ .cms-login__card { display: contents; } /* --- Panel lateral, compartido por portada y dividida ------------------- */ .cms-login__art { position: relative; display: none; /* en móvil no hay sitio: se oculta */ background-color: var(--bs-primary, #696cff); background-size: cover; background-position: center; overflow: hidden; } /* Sin imagen cargada, un degradado del color primario en vez de un hueco. */ .cms-login__art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--bs-primary, #696cff) 0%, rgba(0, 0, 0, 0.55) 100%); opacity: 0.9; } /* Con imagen, el degradado se atenúa para que la foto se vea. */ .cms-login__art[style*="background-image"]::before { background: linear-gradient(135deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.65) 100%); opacity: 1; } .cms-login__art-copy { position: relative; z-index: 2; margin-top: auto; padding: 2.5rem; color: #fff; } .cms-login__art-brand { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; } /* Caja del logo. Sin fondo propio: el logo que suba cada instalación ya trae el suyo, y un recuadro encima de otro se ve mal. */ .cms-login__art-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 auto; } .cms-login__art-mark img, .cms-login__art-mark svg { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; } .cms-login__art-claim { margin: 0.5rem 0 0; max-width: 34ch; font-size: 0.95rem; line-height: 1.5; opacity: 0.85; } /* ========================================================================= Básica — tarjeta centrada sobre trama de puntos ========================================================================= */ .cms-login--basica .cms-login__shell { position: relative; background-color: var(--bs-body-bg); } /* La trama la dibuja el propio CSS: así no depende de ninguna imagen. */ .cms-login--basica .cms-login__shell::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 22px 22px; color: var(--bs-secondary-color, #a7acb2); opacity: 0.18; pointer-events: none; } .cms-login--basica .cms-login__box { position: relative; z-index: 1; padding: 2rem; border-radius: var(--bs-border-radius-lg, 0.625rem); background-color: var(--bs-card-bg, #fff); box-shadow: 0 0.25rem 1.125rem rgba(75, 70, 92, 0.1); } /* ========================================================================= Portada — ilustración a sangre a la izquierda, formulario suelto ========================================================================= */ @media (min-width: 992px) { .cms-login--portada .cms-login__art { display: flex; flex: 0 0 58%; max-width: 58%; } } /* Sin tarjeta a propósito: el formulario va directo sobre el fondo. */ .cms-login--portada .cms-login__box { max-width: 380px; } /* ========================================================================= Dividida — una sola tarjeta partida en dos Medidas calcadas del login del MultiFiltros viejo (.auth-split de themes/admin/assets/css/components.css), para que la migración no cambie la pantalla que la gente ya conoce: tarjeta 1100px máx · radio 20px · alto mínimo 620px sombra 0 20px 40px rgba(45,55,72,.10) fondo #f5f7fb mitades exactamente 50 / 50 velo rgba(30,33,54,.55) sobre la foto ========================================================================= */ .cms-login--dividida { background-color: #f5f7fb; } /* El shell SÓLO centra y pone el margen exterior. El padding va aquí y no en la tarjeta: si lo lleva la tarjeta, la foto no llega a su borde. */ .cms-login--dividida .cms-login__shell { align-items: center; justify-content: center; padding: 24px; background-color: #f5f7fb; } /* Las dos mitades son UNA tarjeta: el radio y la sombra van aquí y el overflow recorta las esquinas de la foto. */ .cms-login--dividida .cms-login__card { display: grid; grid-template-columns: 1fr; align-items: stretch; /* que cada mitad llene el alto, no que se centre */ width: 100%; max-width: 1100px; min-height: 620px; border-radius: 20px; overflow: hidden; background-color: var(--bs-card-bg, #fff); box-shadow: 0 20px 40px rgba(45, 55, 72, 0.10); } @media (min-width: 992px) { .cms-login--dividida .cms-login__card { grid-template-columns: 1fr 1fr; /* mitades exactas */ } .cms-login--dividida .cms-login__art { display: flex; flex: initial; max-width: none; align-items: flex-end; padding: 32px; } } /* El velo es plano, no un degradado: así se lee igual en toda la altura. */ .cms-login--dividida .cms-login__art::before { background: rgba(30, 33, 54, 0.55); opacity: 1; } .cms-login--dividida .cms-login__art-copy { max-width: 360px; padding: 0; } .cms-login--dividida .cms-login__art-brand { font-size: 15px; margin-bottom: 32px; } .cms-login--dividida .cms-login__art-titulo { margin: 0 0 12px; font-size: 20px; font-weight: 600; line-height: 1.35; color: #fff; } .cms-login--dividida .cms-login__art-claim { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.8); } .cms-login--dividida .cms-login__panel { padding: 40px 32px; } /* El formulario ocupa su mitad entera; el aire lo da el padding del panel. */ .cms-login--dividida .cms-login__box { max-width: none; } /* La marca va arriba a la izquierda, no centrada como en los otros estilos. */ .cms-login--dividida .app-brand, .cms-login--dividida .auth-brand { justify-content: flex-start !important; } /* ========================================================================= Barra de la vista previa ========================================================================= */ .cms-login-preview { position: sticky; top: 0; z-index: 1030; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.75rem 1rem; background-color: #1e1e2d; color: #fff; font-size: 0.875rem; } .cms-login-preview a { color: #fff; text-decoration: none; padding: 0.25rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; } .cms-login-preview a:hover { background-color: rgba(255, 255, 255, 0.12); } .cms-login-preview a.activo { background-color: #fff; color: #1e1e2d; border-color: #fff; font-weight: 600; } /* La vista previa no debe ocupar la pantalla entera: se deja ver la barra. */ .cms-login-preview ~ .cms-login__shell, .cms-login-preview + .cms-login__shell { min-height: calc(100vh - 3.25rem); } /* ========================================================================= Miniaturas del selector de estilo (en Ajustes) ========================================================================= */ .cms-login-thumb { display: block; width: 100%; height: 62px; border-radius: 0.375rem; border: 1px solid var(--bs-border-color); background-color: var(--bs-body-bg); position: relative; overflow: hidden; } .cms-login-thumb i { position: absolute; display: block; background-color: var(--bs-secondary-bg, #d9dee3); } /* Las tres barritas que simulan el formulario */ .cms-login-thumb .l1 { height: 4px; width: 34px; border-radius: 2px; } .cms-login-thumb .l2 { height: 8px; width: 46px; border-radius: 2px; background-color: var(--bs-primary, #696cff); } .cms-login-thumb--basica { background-image: radial-gradient(var(--bs-secondary-color, #a7acb2) 1px, transparent 1px); background-size: 8px 8px; } .cms-login-thumb--basica .caja { position: absolute; inset: 14px 26px; border-radius: 3px; background-color: var(--bs-card-bg, #fff); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); } .cms-login-thumb--basica .l1 { top: 24px; left: 50%; transform: translateX(-50%); } .cms-login-thumb--basica .l2 { top: 33px; left: 50%; transform: translateX(-50%); } .cms-login-thumb--portada .arte { position: absolute; inset: 0 55% 0 0; background: linear-gradient(135deg, var(--bs-primary, #696cff), rgba(0, 0, 0, 0.5)); opacity: 0.85; } .cms-login-thumb--portada .l1 { top: 24px; left: 62%; } .cms-login-thumb--portada .l2 { top: 33px; left: 62%; } .cms-login-thumb--dividida .caja { position: absolute; inset: 8px 12px; border-radius: 4px; background-color: var(--bs-card-bg, #fff); overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); } .cms-login-thumb--dividida .arte { position: absolute; inset: 0 58% 0 0; background: linear-gradient(135deg, var(--bs-primary, #696cff), rgba(0, 0, 0, 0.6)); } .cms-login-thumb--dividida .l1 { top: 24px; left: 58%; } .cms-login-thumb--dividida .l2 { top: 33px; left: 58%; } /* Tarjetas seleccionables del selector de estilo (Ajustes → Apariencia) */ .cms-login-option { cursor: pointer; margin: 0; } .cms-login-option .border { transition: border-color 0.15s ease, box-shadow 0.15s ease; } .cms-login-option:hover .border { border-color: var(--bs-primary, #696cff) !important; } .cms-login-option .btn-check:checked + .border { border-color: var(--bs-primary, #696cff) !important; box-shadow: 0 0 0 2px rgba(105, 108, 255, 0.25); }