MediaWiki:Common.css

Nota: Después de publicar, quizás necesite actualizar la caché de su navegador para ver los cambios.

• Firefox/Safari: Mantenga presionada la tecla Shift mientras pulsa el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
• Google Chrome: presione Ctrl+Shift+R (⌘+Shift+R en Mac)
• Internet Explorer/Edge: mantenga presionada Ctrl mientras pulsa Actualizar, o presione Ctrl+F5
• Opera: Presiona Ctrl+F5.

/* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */
/* --- INICIO DE DISEÑO MODERNO PARA BARRA LATERAL (MONOBOOK) --- */

/* 1. Limpiar el fondo gris y los bordes antiguos de las cajas */
.portlet {
    background: transparent;
    border: none;
    margin-bottom: 15px;
    box-shadow: none;
}

.portlet .pBody {
    background-color: transparent;
    border: none;
    padding: 0;
}

/* 2. Títulos de secciones (Navegación, Herramientas, etc.) más elegantes */
.portlet h3 {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #2c3e50; /* Gris azulado oscuro */
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #3498db; /* Línea azul moderna abajo */
    display: inline-block;
    margin-bottom: 8px;
    padding-bottom: 4px;
}

/* 3. Limpiar la lista de enlaces */
.portlet ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 4. Convertir los enlaces en botones modernos */
.portlet li a {
    display: block;             /* El enlace ocupa todo el ancho */
    padding: 8px 12px;          /* Espacio interno para que se vea aireado */
    text-decoration: none;      /* Quitar subrayado */
    color: #555;                /* Color de texto suave */
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    border-radius: 6px;         /* Bordes redondeados */
    transition: all 0.2s ease;  /* Animación suave al pasar el mouse */
    border-left: 3px solid transparent; /* Preparar borde para efecto hover */
    background-color: #fff;     /* Fondo blanco */
    margin-bottom: 4px;         /* Separación entre botones */
}

/* Efecto al pasar el mouse por encima (Hover) */
.portlet li a:hover {
    background-color: #f0f6fa;  /* Fondo azul muy pálido */
    color: #2980b9;             /* Texto azul vivo */
    border-left: 3px solid #3498db; /* Borde azul a la izquierda */
    padding-left: 15px;         /* Pequeño movimiento a la derecha */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Sombra suave */
    text-decoration: none;
}

/* 5. Modernizar la caja de búsqueda */
#p-search .pBody {
    padding: 10px 0;
    text-align: center; /* Centrar elementos */
}

#searchInput {
    width: 90%;
    padding: 8px 12px;
    border: 1px solid #dcdcdc;
    border-radius: 20px; /* Hacer la caja redonda */
    outline: none;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

#searchInput:focus {
    border-color: #3498db; /* Borde azul al escribir */
}

/* Botones de búsqueda */
#searchGoButton, #mw-searchButton {
    background-color: #3498db; /* Azul corporativo */
    color: white;
    border: none;
    padding: 6px 15px;
    margin-top: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
}

#searchGoButton:hover, #mw-searchButton:hover {
    background-color: #2980b9; /* Azul más oscuro al pasar mouse */
}

/* --- FIN DEL CÓDIGO --- */