Diferencia entre revisiones de «MediaWiki:Common.css»

/*
 * ===================================================================
 * PERGAMINO DE ESTILOS: VERSIÓN "EL CAMINO DEL SHINOBI"
 * Inspirado en el universo de Naruto. ¡Dattebayo!
 *
 * / \
 * /   \
 * /-----\
 * |  / \  |
 * | /---\ |
 * |/     \|
 * |\     /|
 * | \---/ |
 * |__\ /__|
 * V
 *
 * ===================================================================
 */

/* Importamos una fuente con estilo de pincelada ninja para los títulos */
@import url('https://fonts.googleapis.com/css2?family=Yuji+Syuku&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');

/* --- Chakra de Estilos (Variables de Color y Fuentes) --- */
:root {
    --color-naranja-naruto: #ff8c00; /* Naranja del uniforme de Naruto */
    --color-verde-konoha: #5a804e; /* Verde del chaleco Jounin */
    --color-azul-shinobi: #1a325f; /* Azul oscuro del traje de Sasuke */
    --color-pergamino-jutsu: #fdf5e6; /* Color de un pergamino antiguo */
    --color-tinta-sello: #2f2a24; /* Tinta para los sellos de mano */
    --color-blanco-mascara: #f5f5dc; /* Blanco de una máscara ANBU */
    --color-rojo-sharingan: #d11a2a; /* Rojo intenso del Sharingan */
    
    --fuente-jutsu: 'Yuji Syuku', serif; /* Para los nombres de técnicas y títulos */
    --fuente-cronica: 'Merriweather', serif; /* Para las crónicas y el texto principal */
    
    --sombra-kage: 5px 5px 15px rgba(0, 0, 0, 0.4);
    --borde-sello: 4px solid var(--color-azul-shinobi);
}

/* --- Estilo General del Cuerpo (El Mundo Shinobi) --- */
body {
    background-color: var(--color-pergamino-jutsu);
    background-image: url('https://www.transparenttextures.com/patterns/old-paper.png'); /* Textura de papel antiguo */
    font-family: var(--fuente-cronica);
    color: var(--color-tinta-sello);
    line-height: 1.7;
}

/* --- Encabezados (Nombres de Jutsus) --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-jutsu);
    color: var(--color-azul-shinobi);
    letter-spacing: 2px;
    border-bottom: 2px solid var(--color-verde-konoha);
    padding-bottom: 12px;
    margin-bottom: 1em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    position: relative;
}

/* Añadimos el símbolo de Konoha a los H1 para un toque especial */
h1::before {
    content: '🍥'; /* Espiral de Naruto */
    margin-right: 15px;
    font-family: sans-serif; /* Para que el emoji se vea bien */
    color: var(--color-naranja-naruto);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

h1 { font-size: 3.8em; }
h2 { font-size: 3em; }
h3 { font-size: 2.4em; }

/* --- Enlaces (Caminos del Shinobi) --- */
a {
    color: var(--color-verde-konoha);
    text-decoration: none;
    font-weight: bold;
    position: relative;
    transition: all 0.3s ease-in-out;
}

a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: var(--color-naranja-naruto);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

a:hover::after, a:focus::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

a:hover, a:focus {
    color: var(--color-naranja-naruto);
}

/*
 * ===================================================================
 * LA FICHA DE INFO (INFOBOX) - ¡EL LIBRO BINGO!
 * ===================================================================
 */
.infobox {
    float: right;
    clear: right;
    width: 25em;
    margin: 0.5em 0 0.5em 1.5em;
    padding: 10px;
    
    background-color: var(--color-blanco-mascara);
    background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png');
    border: var(--borde-sello);
    border-radius: 8px;
    box-shadow: var(--sombra-kage);
    
    font-size: 92%;
    color: var(--color-tinta-sello);
    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 Ninja Buscado */
.infobox .infobox-title,
.infobox .infobox-above,
.infobox caption {
    font-family: var(--fuente-jutsu);
    font-size: 220%;
    font-weight: normal;
    text-align: center;
    color: var(--color-blanco-mascara);
    background-color: var(--color-verde-konoha);
    padding: 0.5em 0.2em;
    margin: -11px -11px 10px -11px; /* Ocupa 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 de habilidades */
.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-verde-konoha);
    border-bottom: 1px solid var(--color-verde-konoha);
}

/* Etiquetas y Datos - Detalles del ninja */
.infobox .infobox-label,
.infobox th {
    font-weight: bold;
    padding-right: 0.8em;
    text-align: left;
    color: var(--color-azul-shinobi);
}

.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 (Registro de Misiones) --- */
.wikitable {
    background-color: var(--color-blanco-mascara);
    border: 2px solid var(--color-azul-shinobi);
    border-collapse: collapse;
    box-shadow: var(--sombra-kage);
    margin: 1.5em auto;
}

.wikitable > caption {
    font-family: var(--fuente-jutsu);
    font-size: 1.8em;
    color: var(--color-azul-shinobi);
    padding: 0.5em;
}

.wikitable th {
    background-color: var(--color-azul-shinobi);
    color: var(--color-blanco-mascara);
    padding: 0.8em;
    border: 1px solid #142a4f;
    font-weight: bold;
}

.wikitable td {
    padding: 0.6em;
    border: 1px dashed #bba;
}

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

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

blockquote::before {
    content: '“';
    font-family: var(--fuente-jutsu);
    font-size: 4em;
    color: var(--color-naranja-naruto);
    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 ninja para la barra de desplazamiento! */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-pergamino-jutsu);
    border-left: 1px solid var(--color-verde-konoha);
}

::-webkit-scrollbar-thumb {
    background: var(--color-verde-konoha);
    border-radius: 6px;
    border: 2px solid var(--color-naranja-naruto);
}

::-webkit-scrollbar-thumb:hover {
    background: #7a9e70;
}