Diferencia entre revisiones de «MediaWiki:Common.css»

/*
 * ===================================================================
 * HOJA DE ESTILO: VERSIÓN "EL TESORO DEL REY DE LOS PIRATAS"
 * Inspirado en el mundo de One Piece. ¡Al abordaje!
 *
 * ,n                      ,_
 * d'b                    ,d'
 * d'`b                   d'`b
 * d'` `b                 d'` `b
 * d'`   `b               d'`   `b
 * d'`     `b             d'`     `b
 * d'`       `b           d'`       `b
 * d'         `b         d'         `b
 * /            `\       /            `\
 * /              `\     /              `\
 * /________________`\   /________________`\
 * `"""""""""""""""`     `"""""""""""""""`
 * /""""\  /^\  /""""\
 * \    /  \_/  \    /
 * |  |  /   \  |  |
 * |  |  \   /  |  |
 * \    /  /"""\ \    /
 * \__/  /     \ \__/
 * /       \
 * /_________\
 *
 * ===================================================================
 */

/* Importamos una fuente con sabor a aventura para los títulos */
@import url('https://fonts.googleapis.com/css2?family=Pirata+One&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');

/* --- Variables del Tesoro (Paleta de Colores y Fuentes) --- */
:root {
    --color-mar-profundo: #0a1f44; /* Azul oscuro del Grand Line */
    --color-oro-tesoro: #ffd700; /* Oro puro de Skypiea */
    --color-madera-sunny: #6b4a3a; /* Madera del Thousand Sunny */
    --color-pergamino: #fdf5e6; /* Color de un mapa antiguo */
    --color-tinta-mapa: #3a322d; /* Tinta para las leyendas */
    --color-vela-barco: #f5f5dc; /* Blanco de las velas */
    --color-bandera-roja: #d11a2a; /* Rojo de la bandera pirata */
    
    --fuente-pirata: 'Pirata One', cursive; /* Para gritar ¡SOY EL REY DE LOS PIRATAS! */
    --fuente-bitacora: 'Merriweather', serif; /* Para el texto del cuerpo, como una bitácora */
    
    --sombra-caja: 5px 5px 15px rgba(0, 0, 0, 0.4);
    --borde-madera: 4px solid var(--color-madera-sunny);
}

/* --- Estilo General del Cuerpo (El Océano) --- */
body {
    background-color: var(--color-pergamino);
    background-image: url('https://www.transparenttextures.com/patterns/old-paper.png'); /* Textura sutil de papel viejo */
    font-family: var(--fuente-bitacora);
    color: var(--color-tinta-mapa);
    line-height: 1.6;
}

/* --- Encabezados (Gritos de Guerra) --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-pirata);
    color: var(--color-mar-profundo);
    letter-spacing: 1.5px;
    border-bottom: 2px dashed var(--color-madera-sunny);
    padding-bottom: 10px;
    margin-bottom: 1em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

h1 { font-size: 3.5em; }
h2 { font-size: 2.8em; }
h3 { font-size: 2.2em; }

/* --- Enlaces (Rutas en el Mapa) --- */
a {
    color: var(--color-mar-profundo);
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px dotted var(--color-mar-profundo);
    transition: all 0.3s ease-in-out;
}

a:hover, a:focus {
    color: var(--color-oro-tesoro);
    background-color: var(--color-mar-profundo);
    border-bottom-color: var(--color-oro-tesoro);
    padding: 2px 4px;
    border-radius: 3px;
}

/*
 * ===================================================================
 * LA FICHA DE INFO (INFOBOX) - ¡EL CARTEL DE "SE BUSCA"!
 * ===================================================================
 */
.infobox {
    float: right;
    clear: right;
    width: 25em; /* Un poco más ancho para el dramatismo */
    margin: 0.5em 0 0.5em 1.5em;
    padding: 10px;
    
    background-color: var(--color-vela-barco);
    background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png');
    border: var(--borde-madera);
    border-radius: 8px;
    box-shadow: var(--sombra-caja);
    
    font-size: 92%;
    color: var(--color-tinta-mapa);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.infobox:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.5);
}

/* Título de la ficha - El nombre del pirata buscado */
.infobox .infobox-title,
.infobox .infobox-above,
.infobox caption {
    font-family: var(--fuente-pirata);
    font-size: 200%;
    font-weight: normal; /* La fuente ya es suficientemente audaz */
    text-align: center;
    color: var(--color-vela-barco);
    background-color: var(--color-madera-sunny);
    padding: 0.5em 0.2em;
    margin: -11px -11px 10px -11px; /* Para que ocupe todo el ancho */
    border-radius: 3px 3px 0 0;
    text-shadow: 2px 2px 3px #000;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Cabeceras y subcabeceras - Categorías del botín */
.infobox .infobox-header,
.infobox .infobox-subheader {
    background-color: #e0d7c8; /* Un tono de pergamino más oscuro */
    font-weight: bold;
    text-align: center;
    border-top: 1px solid var(--color-madera-sunny);
    border-bottom: 1px solid var(--color-madera-sunny);
}

/* Etiquetas y Datos - Detalles de la recompensa */
.infobox .infobox-label,
.infobox th {
    font-weight: bold;
    padding-right: 0.8em;
    text-align: left;
    color: var(--color-mar-profundo);
}

.infobox .infobox-data,
.infobox td {
    text-align: left;
}

/* La barra de navegación (v-d-e) se hace más sutil */
.infobox .infobox-navbar {
    font-size: 80%;
    text-align: right;
    padding-top: 5px;
}

/* --- Tablas (Manifiesto de Carga) --- */
.wikitable {
    background-color: var(--color-vela-barco);
    border: 2px solid var(--color-madera-sunny);
    border-collapse: collapse;
    box-shadow: var(--sombra-caja);
    margin: 1.5em auto;
}

.wikitable > caption {
    font-family: var(--fuente-pirata);
    font-size: 1.5em;
    color: var(--color-mar-profundo);
    padding: 0.5em;
}

.wikitable th {
    background-color: var(--color-madera-sunny);
    color: var(--color-vela-barco);
    padding: 0.8em;
    border: 1px solid #4a342a;
    font-weight: bold;
}

.wikitable td {
    padding: 0.6em;
    border: 1px dashed #c5b8a5; /* Líneas punteadas como en un viejo libro */
}

/* Filas alternas, como tablones de madera */
.wikitable tr:nth-of-type(even) {
    background-color: #f0eae0; 
}

/* --- Citas y Referencias (Leyendas y Anotaciones del Mapa) --- */
blockquote {
    overflow: hidden;
    margin: 1.5em 40px;
    padding: 1em 2em;
    border-left: 5px solid var(--color-oro-tesoro);
    background: #faf5eb;
    font-style: italic;
    font-size: 1.1em;
    position: relative;
}

blockquote::before {
    content: '“';
    font-family: var(--fuente-pirata);
    font-size: 4em;
    color: var(--color-oro-tesoro);
    opacity: 0.5;
    position: absolute;
    left: 10px;
    top: -10px;
}

ol.references {
    font-size: 90%;
    background: #f7f2e9;
    padding: 1em 1em 1em 3em;
    border: 1px solid #e0d7c8;
    border-radius: 5px;
}

/* ¡Y un último toque pirata para la barra de desplazamiento! */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-pergamino);
    border-left: 1px solid var(--color-madera-sunny);
}

::-webkit-scrollbar-thumb {
    background: var(--color-madera-sunny);
    border-radius: 6px;
    border: 2px solid var(--color-oro-tesoro);
}

::-webkit-scrollbar-thumb:hover {
    background: #8a6a5a;
}