Diferencia entre revisiones de «MediaWiki:Common.css»
Apariencia
Sin resumen de edición |
Sin resumen de edición Etiqueta: Revertido |
||
| Línea 1: | Línea 1: | ||
/* | /* | ||
* | * =================================================================== | ||
* | * 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 | |||
.infobox | |||
.infobox td { | .infobox td { | ||
text-align: left; | |||
} | } | ||
/* La barra de navegación (v-d-e) se hace más sutil */ | |||
.infobox .infobox-navbar { | |||
font-size: 80%; | |||
.infobox | text-align: right; | ||
.infobox | 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 | .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; | |||
} | } | ||
Revisión del 22:10 21 sep 2025
/*
* ===================================================================
* 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;
}