MediaWiki:Common.css: Difference between revisions

Revision as of 02:23, 31 July 2026

/* Hearthsail-Wiki — Cozy-Look nach Vorbild des Stardew-Valley-Wikis.
   Sternennacht ueber dem Meer als Seitenhintergrund, Inhalt auf Pergament,
   Abschnittsbalken in Tiefsee-Blau, Pixelicons aus dem Spiel.
   Palette (src/ui/uikit.ts): Pergament #fdf6e3/#f7eedd/#f7ead0, Holz #3f2d1e/#c8a273,
   Messing #d9a45b/#ffd54f, Tiefsee #10141f/#20346b, Warnrot #b4534f.
   Dateien: Hs-icons.png (Sprite 8x4, 32px-Zellen), Hs-banner.png, Hs-wordmark.png,
   Hs-favicon.png (letzteres per MediaWiki:Common.js). */

: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-sea-light: #3a5ba0;
	--hs-red: #b4534f;
}

/* --- Sternennacht ueber dem Meer --- */

html,
body {
	background: var( --hs-deep );
	background-image: radial-gradient( circle 2px at 4% 8%, rgba( 255, 255, 255, 0.9 ) 99%, transparent ), radial-gradient( circle 1px at 9% 22%, rgba( 255, 255, 255, 0.6 ) 99%, transparent ), radial-gradient( circle 2px at 13% 5%, rgba( 255, 255, 255, 0.8 ) 99%, transparent ), radial-gradient( circle 1px at 18% 14%, rgba( 255, 255, 255, 0.5 ) 99%, transparent ), radial-gradient( circle 2px at 24% 28%, rgba( 255, 255, 255, 0.7 ) 99%, transparent ), radial-gradient( circle 1px at 31% 9%, rgba( 255, 255, 255, 0.6 ) 99%, transparent ), radial-gradient( circle 2px at 37% 18%, rgba( 255, 255, 255, 0.9 ) 99%, transparent ), radial-gradient( circle 1px at 43% 4%, rgba( 255, 255, 255, 0.5 ) 99%, transparent ), radial-gradient( circle 2px at 49% 24%, rgba( 255, 255, 255, 0.7 ) 99%, transparent ), radial-gradient( circle 1px at 55% 11%, rgba( 255, 255, 255, 0.6 ) 99%, transparent ), radial-gradient( circle 2px at 61% 30%, rgba( 255, 255, 255, 0.8 ) 99%, transparent ), radial-gradient( circle 1px at 66% 7%, rgba( 255, 255, 255, 0.5 ) 99%, transparent ), radial-gradient( circle 2px at 72% 16%, rgba( 255, 255, 255, 0.9 ) 99%, transparent ), radial-gradient( circle 1px at 78% 26%, rgba( 255, 255, 255, 0.6 ) 99%, transparent ), radial-gradient( circle 2px at 84% 6%, rgba( 255, 255, 255, 0.8 ) 99%, transparent ), radial-gradient( circle 1px at 90% 19%, rgba( 255, 255, 255, 0.5 ) 99%, transparent ), radial-gradient( circle 2px at 95% 10%, rgba( 255, 255, 255, 0.7 ) 99%, transparent ), radial-gradient( circle 1px at 7% 38%, rgba( 255, 255, 255, 0.5 ) 99%, transparent ), radial-gradient( circle 1px at 27% 44%, rgba( 255, 255, 255, 0.4 ) 99%, transparent ), radial-gradient( circle 1px at 47% 40%, rgba( 255, 255, 255, 0.5 ) 99%, transparent ), radial-gradient( circle 1px at 63% 46%, rgba( 255, 255, 255, 0.4 ) 99%, transparent ), radial-gradient( circle 1px at 87% 42%, rgba( 255, 255, 255, 0.5 ) 99%, transparent ), radial-gradient( circle 1px at 15% 55%, rgba( 255, 255, 255, 0.35 ) 99%, transparent ), radial-gradient( circle 1px at 75% 58%, rgba( 255, 255, 255, 0.35 ) 99%, transparent ), linear-gradient( 180deg, #0a0e18 0%, #14224a 45%, var( --hs-sea ) 75%, #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 24px rgba( 0, 0, 0, 0.45 ), 0 0 0 1px var( --hs-wood-light ) inset;
}

/* --- Schrift und Ueberschriften: 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: Wortmarke statt Standard-Logo --- */

.mw-logo-icon {
	display: none;
}

.mw-logo-wordmark {
	background: url( /images/a/ae/Hs-wordmark.png ) no-repeat left center;
	background-size: contain;
	display: block;
	height: 40px;
	image-rendering: pixelated;
	text-indent: -9999px;
	width: 160px;
}

.mw-logo-tagline {
	display: none;
}

.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;
}

.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 );
}

/* --- Fusszeile: Pergament wie der Rest --- */

.mw-footer {
	background: var( --hs-parchment-3 );
	border-top: 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 );
}

/* --- Hauptseite: Banner mit Schiff und Logo --- */

.hs-hero {
	border: 3px solid var( --hs-wood );
	box-shadow: 0 0 0 1px var( --hs-wood-light ) inset, 0 4px 14px rgba( 16, 20, 31, 0.35 );
	line-height: 0;
}

.hs-hero img {
	width: 100%;
	height: auto;
}

.hs-hero__claim {
	background: var( --hs-wood );
	color: var( --hs-parchment-3 );
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	line-height: 1.4;
	padding: 0.45em 1em;
	text-align: center;
}

/* --- Hauptseite: Abschnitte mit Balken wie beim Stardew-Wiki --- */

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

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

.hs-sec__bar {
	background: linear-gradient( 180deg, var( --hs-sea-light ) 0%, var( --hs-sea ) 100% );
	border-bottom: 2px solid var( --hs-deep );
	color: #fff;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.05em;
	font-weight: bold;
	letter-spacing: 0.04em;
	padding: 0.35em 0.6em;
	text-shadow: 1px 1px 0 var( --hs-deep );
}

.hs-sec__bar .hs-ico {
	margin-right: 0.4em;
	vertical-align: -5px;
}

.hs-sec ul {
	list-style: none;
	margin: 0.4em 0;
	padding: 0 0.7em;
}

.hs-sec li {
	border-bottom: 1px dotted var( --hs-wood-light );
	margin: 0;
	padding: 0.3em 0;
}

.hs-sec li:last-child {
	border-bottom: none;
}

.hs-sec li .hs-ico {
	margin-right: 0.45em;
}

/* --- Hinweiskasten unter dem Banner --- */

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

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

/* --- Pixelicons aus dem Spiel-Sprite --- */

.hs-ico {
	background-image: url( /images/4/4d/Hs-icons.png );
	background-repeat: no-repeat;
	background-size: 160px 80px;
	display: inline-block;
	width: 20px;
	height: 20px;
	image-rendering: pixelated;
	vertical-align: -4px;
}
.hs-ico-anchor { background-position: -0px -0px; }
.hs-ico-fish { background-position: -20px -0px; }
.hs-ico-wheat { background-position: -40px -0px; }
.hs-ico-wood { background-position: -60px -0px; }
.hs-ico-scroll { background-position: -80px -0px; }
.hs-ico-book { background-position: -100px -0px; }
.hs-ico-bookblue { background-position: -120px -0px; }
.hs-ico-bag { background-position: -140px -0px; }
.hs-ico-ingot { background-position: -0px -20px; }
.hs-ico-paper { background-position: -20px -20px; }
.hs-ico-hammer { background-position: -40px -20px; }
.hs-ico-axe { background-position: -60px -20px; }
.hs-ico-pickaxe { background-position: -80px -20px; }
.hs-ico-anvil { background-position: -100px -20px; }
.hs-ico-flower { background-position: -120px -20px; }
.hs-ico-tree { background-position: -140px -20px; }
.hs-ico-chest { background-position: -0px -40px; }
.hs-ico-skull { background-position: -20px -40px; }
.hs-ico-hand { background-position: -40px -40px; }
.hs-ico-floppy { background-position: -60px -40px; }
.hs-ico-shield { background-position: -80px -40px; }
.hs-ico-bed { background-position: -100px -40px; }
.hs-ico-pancakes { background-position: -120px -40px; }
.hs-ico-heart { background-position: -140px -40px; }
.hs-ico-smiley { background-position: -0px -60px; }
.hs-ico-boat { background-position: -20px -60px; }
.hs-ico-player { background-position: -40px -60px; }
.hs-ico-slime { background-position: -60px -60px; }
.hs-ico-sun { background-position: -80px -60px; }

/* Pixelgrafik bleibt pixelig */

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

/* Auf der Startseite traegt das Banner den Titel, die Ueberschrift waere doppelt. */

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

/* Leere Absaetze des Parsers nicht als Streifen zeichnen. */

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