MediaWiki:Common.css: Difference between revisions

Revision as of 01:50, 31 July 2026

/* Hearthsail-Wiki — Sand-und-Seekarte.
   Palette direkt aus dem Spiel (src/ui/uikit.ts, Backpack.ts, Minimap.ts):
   Pergament #fdf6e3 / #f7eedd / #f7ead0, Holz #3f2d1e / #c8a273,
   Messing #d9a45b / #ffd54f, Tiefsee #10141f / #20346b, Warnrot #b4534f.
   Kein TemplateStyles im Image — Vorlagen-CSS steht deshalb hier. */

:root {
	--hs-parchment: #fdf6e3;
	--hs-parchment-2: #f7eedd;
	--hs-parchment-3: #f7ead0;
	--hs-wood: #3f2d1e;
	--hs-wood-light: #c8a273;
	--hs-brass: #d9a45b;
	--hs-gold: #ffd54f;
	--hs-deep: #10141f;
	--hs-sea: #20346b;
	--hs-red: #b4534f;
}

/* --- Meer als Hintergrund, Inhalt als Pergament darauf --- */

html,
body {
	background: var(--hs-deep);
	background-image: linear-gradient( 180deg, #0a0e18 0%, var(--hs-sea) 60%, #2b4a86 100% );
	background-attachment: fixed;
}

.mw-page-container {
	background: var(--hs-parchment);
	border-left: 3px solid var(--hs-wood);
	border-right: 3px solid var(--hs-wood);
	box-shadow: 0 0 0 1px var(--hs-wood-light) inset;
}

/* --- Schrift und Überschriften: Holz mit Messing-Kante --- */

.mw-body,
.mw-body-content {
	color: #2c2118;
}

.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-heading h1,
.mw-heading h2,
.mw-heading h3,
.mw-heading h4 {
	color: var(--hs-wood);
	font-family: Georgia, 'Times New Roman', serif;
	letter-spacing: 0.02em;
}

.mw-body h1,
.mw-heading1,
.mw-body h2,
.mw-heading2 {
	border-bottom: 2px solid var(--hs-brass);
}

/* --- Links: Tiefsee, Besuchtes verwaschen, Fehlendes rot --- */

.mw-body a,
.mw-parser-output a {
	color: var(--hs-sea);
}

.mw-body a:visited {
	color: #694f62;
}

.mw-body a.new,
a.new {
	color: var(--hs-red);
}

/* --- Kopfzeile und Seitenleiste im Sand-Look --- */

.vector-header-container .vector-header,
.vector-sticky-header {
	background: var(--hs-parchment-3);
	border-bottom: 2px solid var(--hs-wood);
}

.vector-main-menu,
.vector-page-tools,
.vector-column-start,
.vector-column-end {
	color: #2c2118;
}

.vector-main-menu-landmark,
.vector-page-tools-landmark,
.vector-toc-landmark {
	background: var(--hs-parchment-2);
	border: 2px solid var(--hs-wood);
	padding: 0.6em 0.8em;
	margin-bottom: 0.8em;
}

.cdx-text-input__input,
.cdx-search-input input {
	background: var(--hs-parchment);
	border: 2px solid var(--hs-wood);
	color: #2c2118;
}

/* --- Tabellen: Deckplanken --- */

.wikitable {
	background: var(--hs-parchment);
	border: 2px solid var(--hs-wood);
	border-collapse: collapse;
	color: #2c2118;
}

.wikitable > * > tr > th {
	background: var(--hs-wood-light);
	border: 1px solid var(--hs-wood);
	color: var(--hs-wood);
}

.wikitable > * > tr > td {
	border: 1px solid var(--hs-wood-light);
}

.wikitable > tbody > tr:nth-child( even ) > td {
	background: var(--hs-parchment-2);
}

/* --- Infobox: Messingschild an der Wand --- */

.hs-infobox {
	float: right;
	clear: right;
	width: 22em;
	margin: 0 0 1em 1.4em;
	background: var(--hs-parchment-2);
	border: 3px solid var(--hs-wood);
	box-shadow: 0 0 0 1px var(--hs-wood-light) inset;
	font-size: 0.92em;
}

.hs-infobox__title {
	background: var(--hs-wood);
	color: var(--hs-parchment-3);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.15em;
	font-weight: bold;
	padding: 0.4em 0.6em;
	text-align: center;
}

.hs-infobox__image {
	background: var(--hs-parchment-3);
	border-bottom: 2px solid var(--hs-wood-light);
	padding: 0.8em;
	text-align: center;
}

.hs-infobox__section {
	background: var(--hs-wood-light);
	color: var(--hs-wood);
	font-weight: bold;
	padding: 0.25em 0.6em;
}

.hs-infobox table {
	border-collapse: collapse;
	width: 100%;
}

.hs-infobox th {
	color: var(--hs-wood);
	padding: 0.3em 0.6em;
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
	width: 8.5em;
}

.hs-infobox td {
	padding: 0.3em 0.6em;
	vertical-align: top;
}

.hs-infobox tr + tr {
	border-top: 1px solid var(--hs-wood-light);
}

/* --- Kachelgitter der Hauptseite --- */

.hs-grid {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat( auto-fit, minmax( 15em, 1fr ) );
	margin: 1em 0;
}

.hs-card {
	background: var(--hs-parchment-2);
	border: 3px solid var(--hs-wood);
	box-shadow: 0 0 0 1px var(--hs-wood-light) inset;
	padding: 0.9em 1em;
}

.hs-card__title {
	border-bottom: 2px solid var(--hs-brass);
	color: var(--hs-wood);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.15em;
	font-weight: bold;
	margin-bottom: 0.5em;
	padding-bottom: 0.25em;
}

.hs-card ul {
	list-style: none;
	margin: 0;
}

.hs-card li {
	margin: 0.25em 0;
}

/* --- Banner über der Hauptseite --- */

.hs-banner {
	background: linear-gradient( 180deg, #2b4a86 0%, var(--hs-sea) 100% );
	border: 3px solid var(--hs-wood);
	color: var(--hs-parchment);
	padding: 1.6em 1em;
	text-align: center;
}

.hs-banner__title {
	color: var(--hs-gold);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 2.6em;
	font-weight: bold;
	letter-spacing: 0.06em;
	line-height: 1.1;
	text-shadow: 2px 2px 0 var(--hs-wood);
}

.hs-banner__claim {
	color: var(--hs-parchment-3);
	font-style: italic;
	margin-top: 0.4em;
}

/* --- Hinweiskästen --- */

.hs-note {
	background: var(--hs-parchment-3);
	border-left: 6px solid var(--hs-brass);
	margin: 1em 0;
	padding: 0.7em 1em;
}

.hs-note--stub {
	border-left-color: var(--hs-red);
}

/* --- Pixelgrafik bleibt pixelig --- */

.hs-infobox img,
.hs-icon img,
.hs-card img,
.pixel img,
img.pixel {
	image-rendering: pixelated;
}

/* ponytail: der Nachtmodus von Vector 2022 bleibt vorerst ungestylt —
   das Sand-Thema gilt in beiden Fällen, ein zweites Farbset lohnt erst,
   wenn jemand den Umschalter tatsächlich benutzt. */

/* --- Nachtrag: Seitenleisten-Links in Tiefsee statt Vector-Blau --- */

.vector-main-menu a,
.vector-page-tools a,
.vector-toc a,
.vector-menu-content a,
.vector-dropdown-content a {
	color: var(--hs-sea);
}

.vector-main-menu a.new,
.vector-page-tools a.new {
	color: var(--hs-red);
}

/* Auf der Startseite trägt das Banner den Titel, die Überschrift wäre doppelt. */

.page-Main_Page #firstHeading,
.page-Main_Page .mw-first-heading {
	display: none;
}

/* Der Parser setzt an der Einfuegestelle einer Vorlage gern einen leeren
   Absatz — in der Infobox wird daraus ein Streifen unter dem Titel. */

.hs-infobox > p,
.hs-card p:empty {
	display: none;
}