MediaWiki:Common.css: Difference between revisions

Latest revision as of 17:19, 1 November 2026

/* 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: #bcb096;
}
html.skin-theme-clientpref-night .story-box .story-title {
	color: #c9b78f;
	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: #bcb096;
	}
	html.skin-theme-clientpref-os .story-box .story-title {
		color: #c9b78f;
		border-bottom-color: #8a7350;
	}
}

/* The Story So Far: chapters as facing pages of a book. Common.js groups them into spreads and adds tabs and arrows. */
.story-book {
	max-width: 1300px;
	margin: 20px auto;
}
.story-book .story-spread {
	display: flex;
	align-items: stretch;
}
.story-book .story-spread[hidden] {
	display: none;
}
.story-book .story-spread > .story-box {
	flex: 1 1 0;
	min-width: 0;
	max-width: none;
	margin: 0;
}
.story-book .story-spread > .story-box:first-child:not(:only-child) {
	border-radius: 10px 0 0 10px;
	border-right-width: 0;
	box-shadow: inset -14px 0 18px -12px rgba(0, 0, 0, 0.35);
}
.story-book .story-spread > .story-box:last-child:not(:only-child) {
	border-radius: 0 10px 10px 0;
	box-shadow: inset 14px 0 18px -12px rgba(0, 0, 0, 0.35);
}
.story-book .story-spread > .story-box:only-child {
	flex: 0 1 50%;
}
@media screen and (max-width: 900px) {
	.story-book .story-spread {
		flex-direction: column;
		gap: 20px;
	}
	.story-book .story-spread > .story-box:first-child:not(:only-child),
	.story-book .story-spread > .story-box:last-child:not(:only-child) {
		border-radius: 10px;
		border-right-width: 1px;
		box-shadow: none;
	}
	.story-book .story-spread > .story-box:only-child {
		flex-basis: auto;
	}
}

.story-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 8px 0;
}
.story-nav button {
	font-family: 'Times New Roman', serif;
	font-size: 15px;
	padding: 4px 12px;
	border: 1px solid var( --border-color-base, #a2a9b1 );
	border-radius: 6px;
	background: var( --background-color-interactive-subtle, #f8f9fa );
	color: var( --color-base, #202122 );
	cursor: pointer;
}
.story-nav button:hover:not( :disabled ) {
	border-color: var( --border-color-progressive, #36c );
}
.story-nav button[aria-selected='true'] {
	border-color: var( --border-color-progressive, #36c );
	color: var( --color-progressive, #36c );
	font-weight: bold;
}
.story-nav button:disabled {
	opacity: 0.4;
	cursor: default;
}
.story-nav .story-arrows {
	margin-left: auto;
	display: flex;
	gap: 6px;
}

/* Flow long lists into columns. Each heading stays with the list under it. */
.wiki-columns {
	column-width: 22em;
	column-gap: 2.5em;
}
.wiki-columns h2,
.wiki-columns h3,
.wiki-columns h4,
.wiki-columns h5 {
	break-after: avoid;
}
.wiki-columns ul {
	break-inside: avoid;
}
.wiki-columns > :first-child {
	margin-top: 0;
}
/* For one long list that should split across columns. */
.wiki-columns.wiki-columns-split {
	column-width: 26em;
}
.wiki-columns.wiki-columns-split ul {
	break-inside: auto;
}

/* Links to pages that don't exist yet: muted in dark mode so they don't shout. */
html.skin-theme-clientpref-night a.new,
html.skin-theme-clientpref-night a.new:visited {
	color: #a8807c;
}
html.skin-theme-clientpref-night a.new:hover {
	color: #c4948f;
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os a.new,
	html.skin-theme-clientpref-os a.new:visited {
		color: #a8807c;
	}
	html.skin-theme-clientpref-os a.new:hover {
		color: #c4948f;
	}
}