Jump to content

MediaWiki:Common.css

From Manath's Campaign Wiki
Revision as of 16:52, 1 November 2026 by Manath (talk | contribs) (Story box styles with a dark mode version)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* The Story So Far: parchment boxes. Light parchment in light mode, dark parchment in dark mode. */
.story-box {
	max-width: 700px;
	margin: 20px auto;
	padding: 30px;
	background: linear-gradient(to bottom right, #f0e6d2, #d3c7a6);
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	color: #4a3f35;
	font-family: 'Times New Roman', serif;
	font-size: 18px;
	font-style: italic;
	line-height: 1.8;
	text-align: justify;
}
.story-box .story-title {
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	color: #2a1f15;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid #2a1f15;
}

html.skin-theme-clientpref-night .story-box {
	background: linear-gradient(to bottom right, #2b241b, #1e1a15);
	border: 1px solid #4a3e2e;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
	color: #d6c9ae;
}
html.skin-theme-clientpref-night .story-box .story-title {
	color: #e6d5ae;
	border-bottom-color: #8a7350;
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .story-box {
		background: linear-gradient(to bottom right, #2b241b, #1e1a15);
		border: 1px solid #4a3e2e;
		box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
		color: #d6c9ae;
	}
	html.skin-theme-clientpref-os .story-box .story-title {
		color: #e6d5ae;
		border-bottom-color: #8a7350;
	}
}