MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.
/* ============================================================
   Sinfar Wiki Visual System v2.0
   Used by redesigned player-resource / mechanics pages.
   ============================================================ */

/* ---------- Core Page Shell ---------- */

.sinfar-page {
	background: #0b090a;
	border: 1px solid #6f5730;
	color: #f4efe6;
	padding: 16px;
	box-shadow: 0 0 22px rgba(0,0,0,0.35);
	font-size: 14px;
	line-height: 1.5;
}

.sinfar-page a {
	color: #8fc6ff;
}

.sinfar-page code {
	background: #120d10;
	color: #f0d28a;
	border: 1px solid #6f5730;
	padding: 1px 4px;
}

/* ---------- Hero / Title Banner ---------- */

.sf-hero {
	text-align: center;
	border: 1px solid #8b6b3a;
	background: linear-gradient(180deg,#181214,#0b090a);
	padding: 12px 14px;
	margin-bottom: 10px;
}

.sf-title {
	font-family: Georgia, serif;
	font-size: 30px;
	letter-spacing: 3px;
	color: #d8b46a;
	text-shadow: 0 0 10px rgba(143,36,50,0.55);
}

.sf-subtitle {
	margin-top: 5px;
	color: #f4efe6;
}

/* ---------- Headings ---------- */

.sf-heading {
	font-family: Georgia, serif;
	font-size: 21px;
	color: #d8b46a;
	border-bottom: 1px solid #6f5730;
	padding-bottom: 4px;
	margin: 9px 0 5px 0;
}

.sf-heading:first-of-type {
	margin-top: 8px;
}

.sf-heading--gold { color: #d8b46a; border-bottom-color: #6f5730; }
.sf-heading--green { color: #91d38f; border-bottom-color: #446b35; }
.sf-heading--blue { color: #8fc6ff; border-bottom-color: #34577a; }
.sf-heading--red { color: #ff9c8f; border-bottom-color: #7a342f; }
.sf-heading--purple { color: #c49cff; border-bottom-color: #5b3b78; }

.sf-subheading {
	font-family: Georgia, serif;
	font-size: 18px;
	color: #f0d28a;
	margin-bottom: 6px;
}

/* ---------- Cards / Callouts ---------- */

.sf-card {
	background: #181214;
	border: 1px solid #6f5730;
	color: #f4efe6;
	padding: 10px 12px;
	margin-bottom: 8px;
}

.sf-card--gold {
	background: #181214;
	border-color: #6f5730;
}

.sf-card--green {
	background: #111a12;
	border-color: #446b35;
}

.sf-card--blue {
	background: #101820;
	border-color: #34577a;
}

.sf-card--red {
	background: #1a1010;
	border-color: #7a342f;
}

.sf-card--purple {
	background: #19111d;
	border-color: #5b3b78;
}

.sf-note {
	background: #120d10;
	border-left: 4px solid #d8b46a;
	color: #f4efe6;
	padding: 8px 10px;
	margin: 8px 0;
}

.sf-note--red {
	border-left-color: #8f2432;
}

.sf-label {
	color: #f0d28a;
	font-weight: bold;
}

.sf-muted {
	color: #c9bda9;
}

/* ---------- Grids ---------- */

.sf-grid-2,
.sf-grid-3,
.sf-grid-4,
.sf-grid-5 {
	display: grid;
	gap: 8px;
	margin-bottom: 8px;
}

.sf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media screen and (max-width: 900px) {
	.sf-grid-4,
	.sf-grid-5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 650px) {
	.sf-grid-2,
	.sf-grid-3,
	.sf-grid-4,
	.sf-grid-5 {
		grid-template-columns: 1fr;
	}
}

/* ---------- Lists ---------- */

.sinfar-page ul,
.sinfar-page ol {
	margin: 6px 0 8px 0;
	padding-left: 22px;
}

.sinfar-page li {
	margin: 2px 0;
}

/* ---------- Tables ---------- */

.sf-table {
	width: 100%;
	border-collapse: collapse;
	color: #f4efe6;
	margin-bottom: 8px;
}

.sf-table th {
	color: #d8b46a;
	padding: 7px 8px;
	text-align: center;
}

.sf-table td {
	padding: 6px 8px;
}

.sf-table--gold {
	background: #181214;
	border: 1px solid #6f5730;
}

.sf-table--gold th {
	background: #2a2113;
	border-bottom: 1px solid #6f5730;
}

.sf-table--green {
	background: #111a12;
	border: 1px solid #446b35;
}

.sf-table--green th {
	background: #183618;
	border-bottom: 1px solid #446b35;
}

.sf-table--blue {
	background: #101820;
	border: 1px solid #34577a;
}

.sf-table--blue th {
	background: #17324a;
	border-bottom: 1px solid #34577a;
}

.sf-table--red {
	background: #1a1010;
	border: 1px solid #7a342f;
}

.sf-table--red th {
	background: #4a1717;
	border-bottom: 1px solid #7a342f;
}

.sf-table--purple {
	background: #19111d;
	border: 1px solid #5b3b78;
}

.sf-table--purple th {
	background: #301842;
	border-bottom: 1px solid #5b3b78;
}

.sf-name {
	color: #f0d28a;
}

.sf-value {
	color: #f4c96b;
	text-align: center;
}

.sf-good {
	color: #9fe6bd;
	text-align: center;
}

.sf-center {
	text-align: center;
}

/* Standard PP table column widths */
.sf-pp-table col.sf-col-name {
	width: 42%;
}

.sf-pp-table col.sf-col-pp {
	width: 8%;
}

/* Armor / property table column helpers */
.sf-armor-pp col.sf-col-armor-name { width: 30%; }
.sf-armor-pp col.sf-col-armor-type { width: 20%; }
.sf-armor-pp col.sf-col-armor-ac { width: 15%; }
.sf-armor-pp col.sf-col-armor-dex { width: 20%; }
.sf-armor-pp col.sf-col-armor-pp { width: 15%; }

.sf-property-table col.sf-col-property { width: 42%; }
.sf-property-table col.sf-col-bonus { width: 18%; }
.sf-property-table col.sf-col-max { width: 20%; }
.sf-property-table col.sf-col-cost { width: 20%; }

/* ---------- Collapsible Dockets ---------- */

.sf-docket {
	width: 100%;
	background: #181214;
	color: #f4efe6;
	border: 1px solid #6f5730;
	margin: 9px 0 8px 0;
}

.sf-docket th {
	background: #2a2113;
	color: #d8b46a;
	font-family: Georgia, serif;
	font-size: 21px;
	text-align: left;
	padding: 9px 12px;
	border-bottom: 1px solid #6f5730;
}

.sf-docket td {
	background: #0f0b0d;
	color: #f4efe6;
	padding: 10px 12px;
}

.sf-docket--green {
	border-color: #446b35;
}

.sf-docket--green th {
	background: #183618;
	border-bottom-color: #446b35;
}

.sf-docket--blue {
	border-color: #34577a;
}

.sf-docket--blue th {
	background: #17324a;
	border-bottom-color: #34577a;
}

.sf-docket--red {
	border-color: #7a342f;
}

.sf-docket--red th {
	background: #4a1717;
	border-bottom-color: #7a342f;
}

.sf-docket--purple {
	border-color: #5b3b78;
}

.sf-docket--purple th {
	background: #301842;
	border-bottom-color: #5b3b78;
}

/* ---------- Footer ---------- */

.sf-footer {
	margin-top: 14px;
	padding: 12px 14px;
	text-align: center;
	background: #120d10;
	border-top: 1px solid #6f5730;
	color: #f4efe6;
}

/* ============================================================
   Sinfar Wiki Trial Styling v0.1
   Scoped test page: Getting Started
   Only affects pages using <div class="sf-start-page">
   ============================================================ */

.sf-start-page {
	background: linear-gradient(180deg, #0b090a 0%, #181214 45%, #0b090a 100%);
	border: 1px solid #6f5730;
	color: #f4efe6;
	padding: 26px;
	box-shadow: 0 0 28px rgba(0,0,0,0.45);
	font-size: 14px;
	line-height: 1.6;
}

.sf-start-page a {
	color: #8fc6ff;
}

.sf-start-page code {
	background: #120d10;
	color: #f0d28a;
	border: 1px solid #6f5730;
	padding: 1px 4px;
}

/* Hero */

.sf-start-page .sf-hero {
	text-align: center;
	padding: 34px 20px;
	border: 1px solid #8b6b3a;
	background:
		radial-gradient(circle at center, rgba(143,36,50,0.35), rgba(11,9,10,0.18) 62%),
		linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.12));
	margin-bottom: 0;
}

.sf-start-page .sf-title {
	font-family: Georgia, serif;
	font-size: 44px;
	letter-spacing: 4px;
	color: #d8b46a;
	text-shadow: 0 0 12px rgba(143,36,50,0.65);
}

.sf-start-page .sf-subtitle {
	margin-top: 10px;
	font-size: 17px;
	letter-spacing: 1px;
	color: #f4efe6;
}

/* Headings */

.sf-start-page .sf-heading {
	margin-top: 30px;
	font-family: Georgia, serif;
	font-size: 24px;
	color: #d8b46a;
	border-bottom: 1px solid #6f5730;
	padding-bottom: 6px;
}

.sf-start-page .sf-heading-small {
	margin-top: 24px;
	font-family: Georgia, serif;
	font-size: 22px;
	color: #d8b46a;
}

.sf-start-page .sf-panel-title {
	font-family: Georgia, serif;
	font-size: 26px;
	color: #d8b46a;
	margin-bottom: 8px;
}

/* Panels and cards */

.sf-start-page .sf-panel {
	margin-top: 14px;
	padding: 20px 24px;
	background: #181214;
	border: 1px solid #6f5730;
	color: #f4efe6;
	line-height: 1.65;
}

.sf-start-page .sf-panel-intro {
	margin-top: 26px;
	border-left: 4px solid #8f2432;
	border-top: 1px solid #6f5730;
	border-right: 0;
	border-bottom: 1px solid #6f5730;
}

.sf-start-page .sf-card {
	background: #21171a;
	border: 1px solid #6f5730;
	color: #f4efe6;
	padding: 16px;
	margin-bottom: 0;
}

.sf-start-page .sf-card-large {
	padding: 18px;
}

.sf-start-page .sf-note {
	margin-top: 16px;
	padding: 14px 18px;
	background: #21171a;
	border-left: 4px solid #8f2432;
	color: #f4efe6;
}

.sf-start-page .sf-warning {
	margin-top: 24px;
	padding: 18px 22px;
	background: #120d10;
	border: 1px solid #8f2432;
	color: #f4efe6;
	line-height: 1.65;
}

.sf-start-page .sf-codebox {
	margin: 12px 0;
	padding: 10px 14px;
	background: #21171a;
	border: 1px solid #6f5730;
	font-family: monospace;
	color: #f4efe6;
}

/* Grids */

.sf-start-page .sf-grid {
	display: grid;
	gap: 12px;
	margin-top: 10px;
	margin-bottom: 0;
}

.sf-start-page .sf-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-start-page .sf-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media screen and (max-width: 900px) {
	.sf-start-page .sf-grid-3,
	.sf-start-page .sf-grid-2 {
		grid-template-columns: 1fr;
	}
}

/* Footer */

.sf-start-page .sf-footer {
	margin-top: 28px;
	padding: 16px 20px;
	text-align: center;
	background: #120d10;
	border-top: 1px solid #6f5730;
	color: #f4efe6;
	font-size: 14px;
}