Diferencia entre revisiones de «MediaWiki:Vector.css»

Revisión del 15:59 19 dic 2025

/* --- MENÚ LATERAL MODERNO "ESTILO APP" (VECTOR) --- */

/* 1. AJUSTE DEL CONTENEDOR (Más aire) */
#mw-panel {
    padding-top: 15px !important;
    padding-left: 0 !important; /* Pegado a la izquierda para el efecto de borde */
}

/* 2. TÍTULOS DE SECCIONES (Minimalistas) */
#mw-panel .portal h3 {
    color: #263355 !important; /* Tu azul corporativo */
    font-family: 'Segoe UI', Roboto, sans-serif !important;
    font-size: 11px !important; /* Pequeño y elegante */
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px; /* Espaciado entre letras */
    margin: 20px 0 8px 15px !important; /* Alineación */
    border: none !important;
    display: block !important;
    opacity: 0.8;
}

/* 3. LIMPIEZA DE LA LISTA */
#mw-panel .portal .body ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#mw-panel .portal .body li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 4. ENLACES (ESTILO CÁPSULA MODERNA) */
#mw-panel .portal .body li a {
    display: block !important;
    padding: 10px 15px !important; /* Botón más alto y cómodo */
    margin-bottom: 2px !important;
    margin-right: 10px !important; /* Espacio a la derecha */
    
    color: #555 !important; /* Gris oscuro neutro */
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 14px !important;
    text-decoration: none !important;
    
    /* LA MAGIA MODERNA: Bordes redondos solo a la derecha */
    border-radius: 0 20px 20px 0 !important; 
    border-left: 4px solid transparent !important; /* Borde invisible listo para el hover */
    transition: all 0.2s ease; /* Suavidad al pasar el mouse */
}

/* 5. EFECTO AL PASAR EL MOUSE (HOVER) */
#mw-panel .portal .body li a:hover {
    background-color: #f0f4ff !important; /* Azul muy pálido de fondo */
    color: #263355 !important; /* Texto azul fuerte */
    border-left-color: #263355 !important; /* La barrita azul a la izquierda */
    font-weight: 600 !important;
    text-decoration: none !important;
    padding-left: 20px !important; /* Pequeño movimiento a la derecha */
}