|
|
| Línea 1: |
Línea 1: |
| /* --- 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;
| |
| }
| |
| }
| |
