Diferencia entre revisiones de «MediaWiki:Vector.css»

Revisión del 18:28 19 dic 2025

/* --- CÓDIGO MAESTRO: PERFECTO EN PC Y CELULAR --- */

/* 1. REGLAS SOLO PARA COMPUTADORA (Pantallas anchas) */
/* Este bloque solo se activa si la pantalla es mayor a 768px */
@media screen and (min-width: 768px) {
    
    /* Aquí aplicamos el margen para que no choque con el menú en PC */
    div#content, 
    div#footer, 
    div#mw-head-base, 
    div#mw-page-base {
        margin-left: 11em !important; 
    }

    /* Fijamos el menú lateral en su sitio (solo en PC) */
    div#mw-panel {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 10em !important;
    }
}

/* 2. REGLAS PARA CELULAR (Pantallas pequeñas) */
/* Aquí le decimos que borre esos márgenes para usar todo el ancho */
@media screen and (max-width: 767px) {
    div#content, 
    div#footer {
        margin-left: 0 !important; /* Sin margen izquierdo */
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Ajuste para que el menú no moleste o se vea normal arriba */
    div#mw-panel {
        position: relative !important;
        width: 100% !important;
    }

    /* Asegura que ninguna imagen rompa el ancho del celular */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* 3. LIMPIEZA GENERAL (Para ambos) */
/* Quitar puntos feos del menú */
div#mw-panel div.portal div.body ul {
    list-style: none !important;
    margin-left: 0.5em !important;
}