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)
- Edge: mantenga presionada Ctrl mientras pulsa Actualizar, o presione Ctrl+F5
/*
* ===================================================================
* 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;
}