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

/* =========================================================
   Common.css — Tema visual "Pergamino de Campaña" (D&D)
   Pegar este contenido en [[MediaWiki:Common.css]]
   o servirlo montado en el skin Vector (ver docker-compose.yml)
   ========================================================= */

:root {
	--pergamino-claro: #f4ecd8;
	--pergamino-oscuro: #e8dcc4;
	--tinta: #3b2a1a;
	--granate: #8b0000;
	--cuero: #6b4423;
	--dorado: #b8860b;
}

/* ---------- Fondo general y tipografía ---------- */
body {
	background-color: var(--pergamino-oscuro);
	background-image:
		radial-gradient(circle at top left, rgba(255,255,255,0.15), transparent 60%),
		linear-gradient(var(--pergamino-claro), var(--pergamino-oscuro));
	color: var(--tinta);
	font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

#content, .mw-body {
	background-color: var(--pergamino-claro);
	border: 3px solid var(--dorado);
	border-radius: 6px;
	box-shadow: 0 0 18px rgba(60, 30, 10, 0.35) inset, 0 2px 6px rgba(0,0,0,0.3);
	padding: 1.2em 1.8em;
}

h1, h2, h3, h4, .firstHeading {
	font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif;
	color: var(--granate);
	border-bottom: 2px solid var(--dorado);
	text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
	letter-spacing: 0.5px;
}

a {
	color: var(--cuero);
	text-decoration: none;
	border-bottom: 1px dotted var(--cuero);
}
a:hover {
	color: var(--granate);
}

/* Barra lateral y cabecera */
.mw-header, #mw-panel, .vector-header {
	background-color: var(--cuero);
	color: var(--pergamino-claro);
	border-bottom: 3px solid var(--dorado);
}

/* Tablas estándar con acabado "manuscrito" */
table:not(.infobox):not(.pi-background) {
	background-color: rgba(255,255,255,0.35);
	border: 1px solid var(--cuero);
}
table:not(.infobox) th {
	background-color: var(--cuero);
	color: var(--pergamino-claro);
}

/* =========================================================
   INFOBOXES (PortableInfobox) — Estilo "Hoja de Personaje"
   ========================================================= */

.portable-infobox {
	background: var(--pergamino-claro);
	border: 4px double var(--dorado);
	border-radius: 4px;
	box-shadow: 3px 3px 10px rgba(0,0,0,0.4);
	font-family: "Palatino Linotype", Georgia, serif;
	color: var(--tinta);
	width: 300px;
}

/* Título principal de la ficha */
.portable-infobox .pi-title {
	background-color: var(--granate);
	color: #f4ecd8;
	font-family: "Cinzel", serif;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	padding: 8px 4px;
	border-bottom: 3px solid var(--dorado);
	text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

/* Imagen del personaje/monstruo con marco tipo retrato */
.portable-infobox .pi-image {
	border: 3px solid var(--dorado);
	margin: 6px auto;
	max-width: 90%;
}

/* Cabeceras de sección (ej. "Estadísticas de combate") */
.portable-infobox .pi-header {
	background-color: var(--cuero);
	color: var(--pergamino-claro);
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.85em;
	letter-spacing: 1px;
	padding: 4px 6px;
	border-top: 2px solid var(--dorado);
	border-bottom: 2px solid var(--dorado);
}

/* Filas de datos (etiqueta + valor) */
.portable-infobox .pi-data {
	border-bottom: 1px solid var(--pergamino-oscuro);
	padding: 4px 8px;
}
.portable-infobox .pi-data-label {
	font-weight: bold;
	color: var(--granate);
	width: 40%;
}
.portable-infobox .pi-data-value {
	color: var(--tinta);
}

/* Grupos destacados: bloques de estadísticas (CA, HP, Desafío, etc.) */
.portable-infobox .pi-group.pi-border-color {
	background-color: rgba(184, 134, 11, 0.12);
	border-top: 2px dashed var(--dorado);
	border-bottom: 2px dashed var(--dorado);
}

/* Pie de ficha / notas */
.portable-infobox .pi-footer {
	font-size: 0.75em;
	text-align: center;
	color: var(--cuero);
	font-style: italic;
	padding: 4px;
}

/* Estilos específicos aplicables vía  en cada plantilla */
.ficha-personaje .pi-title { background-color: var(--granate); }
.ficha-monstruo .pi-title  { background-color: #4a2010; }
.ficha-hechizo .pi-title   { background-color: #2f4f4f; }
.ficha-localizacion .pi-title { background-color: var(--cuero); }