Diferencia entre revisiones de «MediaWiki:Vector.css»

Revisión del 18:59 19 dic 2025

/* --- CÓDIGO MAESTRO V5: ARREGLO TOTAL DE MÓVIL Y ESCRITORIO --- */

/* ==================================================================
   1. ESTILOS VISUALES GENERALES (Aplican a todo: PC y Celular)
   ================================================================== */
/* Fondo de cielo y Cabecera */
#mw-head {
    background-color: #263355 !important; /* Azul de fondo base */
    background-image: url('https://s23.derechopedia.cl/kya.cl/Sky.png') !important;
    background-size: cover !important;
    background-position: center top !important;
}

/* Textos de la cabecera en blanco */
#p-personal li a, 
#p-namespaces li a, 
#p-views li a, 
#p-cactions li a {
    color: #ffffff !important;
    font-weight: bold !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

/* Limpieza del menú lateral (sin puntos feos) */
div#mw-panel div.portal div.body ul {
    list-style: none !important;
    margin-left: 0.5em !important;
}

/* ==================================================================
   2. REGLAS SOLO PARA COMPUTADORA (Pantallas grandes)
   ================================================================== */
@media screen and (min-width: 982px) {
    /* Aquí empujamos el contenido a la derecha para dejar sitio al menú */
    div#content, 
    div#footer, 
    div#mw-head-base, 
    div#mw-page-base {
        margin-left: 11em !important; 
    }

    /* Fijamos el menú lateral a la izquierda */
    div#mw-panel {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 10em !important;
        display: block !important;
    }
}

/* ==================================================================
   3. REGLAS SOLO PARA CELULAR (Pantallas pequeñas)
   ================================================================== */
@media screen and (max-width: 981px) {
    /* ¡AQUÍ ESTÁ LA SOLUCIÓN! Quitamos el margen izquierdo en el celular */
    div#content, 
    div#footer, 
    div#mw-head-base, 
    div#mw-page-base {
        margin-left: 0 !important;  /* Cero margen = usa todo el ancho */
        padding-left: 10px !important; /* Un poquito de aire a los lados */
        padding-right: 10px !important;
    }

    /* Ajustamos el menú para que no moleste en el celular */
    div#mw-panel {
        position: relative !important;
        width: 100% !important;
        /* En celular, Vector maneja el menú diferente, esto evita que tape cosas */
    }
    
    /* Aseguramos que las imágenes no se salgan de la pantalla */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Arreglamos la cabecera en celular para que no flote raro */
    #p-personal {
        right: 0 !important;
        top: 0 !important;
    }
}