MediaWiki:Common.css

/* =========================================================
   PRAVAHA WIKI THEME
   Amber, brown, cream and white
   ========================================================= */

:root {
	--pravaha-header: #bd6800;
	--pravaha-header-dark: #9f5600;
	--pravaha-brown: #6f3b00;
	--pravaha-brown-dark: #4f2a00;
	--pravaha-amber: #c97808;
	--pravaha-amber-light: #e2b76f;
	--pravaha-cream: #fffaf2;
	--pravaha-cream-light: #fffdf9;
	--pravaha-cream-dark: #fff3df;
	--pravaha-white: #ffffff;
	--pravaha-border: #e2b76f;
	--pravaha-muted: #72583d;
	--pravaha-shadow: rgba(91, 48, 0, 0.12);
}


/* =========================================================
   PAGE AND CONTENT
   ========================================================= */

html,
body {
	background: var(--pravaha-cream) !important;
	color: #202122 !important;
}

#mw-page-base {
	background: var(--pravaha-cream) !important;
}

.mw-body {
	border: 1px solid var(--pravaha-border) !important;
	border-radius: 0 !important;
	background: var(--pravaha-cream-light) !important;
	box-shadow: 0 2px 8px var(--pravaha-shadow) !important;
	color: #202122 !important;
}

.mw-body-content {
	color: #202122 !important;
}

#content {
	background: var(--pravaha-cream-light) !important;
}

#footer {
	background: var(--pravaha-cream) !important;
	color: var(--pravaha-muted) !important;
}


/* =========================================================
   TOP HEADER
   ========================================================= */

#mw-head,
.vector-header,
.vector-sticky-header {
	background: linear-gradient(
		90deg,
		var(--pravaha-header) 0%,
		var(--pravaha-header-dark) 100%
	) !important;
	border-bottom: 1px solid #874900 !important;
	box-shadow: 0 2px 8px var(--pravaha-shadow) !important;
}

#p-personal,
.vector-user-links {
	color: #fff !important;
}

#p-personal a,
.vector-user-links a,
.vector-header a,
.vector-sticky-header a {
	color: #fff !important;
}

#p-personal a:hover,
.vector-user-links a:hover,
.vector-header a:hover {
	color: #fff8e8 !important;
	text-decoration: underline !important;
}


/* =========================================================
   LOGO AND SIDEBAR
   ========================================================= */

#mw-panel,
.vector-main-menu-container {
	background: #fff !important;
	border-right: 1px solid #d8c3a5 !important;
}

#p-logo,
.mw-logo {
	background-color: #fff8e8 !important;
	border: 1px solid rgba(111, 59, 0, 0.18) !important;
	border-radius: 7px !important;
	box-shadow: 0 2px 6px rgba(75, 38, 0, 0.16) !important;
}

#mw-panel .portal,
.vector-menu-portal {
	background: transparent !important;
}

#mw-panel .portal h3,
.vector-menu-portal .vector-menu-heading {
	color: var(--pravaha-brown) !important;
	font-weight: bold !important;
	border-bottom: 1px solid #dfc9aa !important;
}

#mw-panel .portal a,
.vector-menu-portal a {
	color: #7b4300 !important;
}

#mw-panel .portal a:hover,
.vector-menu-portal a:hover {
	color: var(--pravaha-header-dark) !important;
	text-decoration: underline !important;
}


/* =========================================================
   HEADINGS
   ========================================================= */

.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6,
.firstHeading {
	color: var(--pravaha-brown) !important;
	font-family: Georgia, "Times New Roman", serif !important;
}

.mw-body h1,
.mw-body h2,
.firstHeading {
	border-bottom: 1px solid #cdbb9f !important;
}

.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6 {
	border-bottom-color: #dfd1ba !important;
}


/* =========================================================
   LINKS
   ========================================================= */

.mw-body a,
#content a {
	color: #9a4d00;
}

.mw-body a:visited,
#content a:visited {
	color: #704000;
}

.mw-body a:hover,
#content a:hover {
	color: var(--pravaha-header-dark);
	text-decoration: underline;
}

.mw-body a.new,
#content a.new {
	color: #a4262c !important;
}


/* =========================================================
   PAGE TABS
   ========================================================= */

.vector-menu-tabs,
.vector-menu-tabs-legacy,
.vector-menu-tabs .mw-list-item,
.vector-menu-tabs-legacy .mw-list-item {
	background-image: none !important;
}

.vector-menu-tabs li,
.vector-menu-tabs-legacy li {
	background: #fff7e8 !important;
	border: 1px solid #d7b984 !important;
	border-bottom: 0 !important;
}

.vector-menu-tabs li a,
.vector-menu-tabs-legacy li a {
	color: var(--pravaha-brown) !important;
	background: transparent !important;
}

.vector-menu-tabs .selected,
.vector-menu-tabs-legacy .selected {
	background: var(--pravaha-cream-light) !important;
	border-top: 3px solid var(--pravaha-header) !important;
}

.vector-menu-tabs .selected a,
.vector-menu-tabs-legacy .selected a {
	color: var(--pravaha-brown-dark) !important;
	font-weight: bold !important;
}


/* =========================================================
   SEARCH
   ========================================================= */

#searchInput,
.vector-search-box-input,
.cdx-text-input__input {
	border: 1px solid #bca47e !important;
	border-radius: 4px !important;
	background: #fff !important;
	color: #202122 !important;
}

#searchInput:focus,
.vector-search-box-input:focus,
.cdx-text-input__input:focus {
	border-color: var(--pravaha-header) !important;
	box-shadow: 0 0 0 2px rgba(189, 104, 0, 0.18) !important;
	outline: 0 !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.mw-ui-button,
.cdx-button,
input[type="submit"],
input[type="button"],
button {
	border: 1px solid var(--pravaha-header-dark) !important;
	border-radius: 4px !important;
	background: var(--pravaha-header) !important;
	color: #fff !important;
	box-shadow: none !important;
}

.mw-ui-button:hover,
.cdx-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
	background: var(--pravaha-header-dark) !important;
	color: #fff !important;
}

.mw-ui-button:focus,
.cdx-button:focus,
input[type="submit"]:focus,
button:focus {
	outline: 2px solid var(--pravaha-amber-light) !important;
	outline-offset: 1px !important;
}


/* =========================================================
   FORMS
   ========================================================= */

input,
textarea,
select {
	border-color: #bca47e !important;
	background: #fff !important;
	color: #202122 !important;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--pravaha-header) !important;
	box-shadow: 0 0 0 2px rgba(189, 104, 0, 0.16) !important;
	outline: 0 !important;
}

fieldset {
	border: 1px solid var(--pravaha-border) !important;
	background: var(--pravaha-cream-light) !important;
}

legend {
	color: var(--pravaha-brown) !important;
	font-weight: bold !important;
}


/* =========================================================
   TABLES AND INFOBOXES
   ========================================================= */

.wikitable,
.infobox {
	border: 1px solid #c8b18d !important;
	border-collapse: collapse !important;
	background: #fff !important;
	color: #202122 !important;
}

.wikitable th,
.infobox th {
	border: 1px solid #c8b18d !important;
	background: var(--pravaha-cream-dark) !important;
	color: var(--pravaha-brown) !important;
}

.wikitable td,
.infobox td {
	border: 1px solid #d7c6aa !important;
	background: #fff !important;
	color: #202122 !important;
}

.wikitable tr:hover td {
	background: #fffaf2 !important;
}


/* =========================================================
   TABLE OF CONTENTS
   ========================================================= */

.toc,
#toc,
.vector-toc {
	border: 1px solid var(--pravaha-border) !important;
	border-radius: 0 !important;
	background: #fff8eb !important;
	box-shadow: none !important;
}

.toc .toctitle,
#toc .toctitle,
.vector-toc .vector-toc-header {
	color: var(--pravaha-brown) !important;
}

.toc a,
#toc a,
.vector-toc a {
	color: #874900 !important;
}

.toc a:hover,
#toc a:hover,
.vector-toc a:hover {
	color: var(--pravaha-header-dark) !important;
	text-decoration: underline !important;
}


/* =========================================================
   NOTICES, MESSAGES AND CATEGORIES
   ========================================================= */

.catlinks {
	border: 1px solid var(--pravaha-border) !important;
	background: #fff8eb !important;
	color: #202122 !important;
}

.mw-message-box {
	border-color: var(--pravaha-border) !important;
	background: #fff8eb !important;
	color: #202122 !important;
}

.mw-message-box-warning {
	border-left: 4px solid var(--pravaha-amber) !important;
	background: #fff5df !important;
}

.mw-message-box-error {
	border-left: 4px solid #b32424 !important;
	background: #fff0f0 !important;
}

.mw-message-box-success {
	border-left: 4px solid #14866d !important;
	background: #effaf6 !important;
}


/* =========================================================
   BLOCKQUOTES AND CODE
   ========================================================= */

blockquote {
	margin-left: 1em !important;
	padding: 0.6em 1em !important;
	border-left: 4px solid var(--pravaha-amber) !important;
	background: #fff8eb !important;
	color: #3d3022 !important;
}

code,
pre,
.mw-code {
	border-color: #d7c6aa !important;
	background: #fff8eb !important;
	color: #3d3022 !important;
}


/* =========================================================
   CLASSIC WIKI COLLAPSIBLE SECTIONS
   ========================================================= */

.pravaha-collapse {
	clear: both !important;
	margin: 0.6em 0 !important;
	overflow: hidden !important;
	border: 1px solid var(--pravaha-border) !important;
	border-radius: 4px !important;
	background: var(--pravaha-cream-light) !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}

.pravaha-collapse-title {
	display: flex !important;
	min-height: 0 !important;
	padding: 0.45em 0.7em !important;
	align-items: center !important;
	gap: 0 !important;
	background: var(--pravaha-cream-dark) !important;
	color: var(--pravaha-brown) !important;
	font-family: sans-serif !important;
	font-size: 14px !important;
	font-weight: bold !important;
	line-height: 1.6 !important;
}

.pravaha-collapse-open,
.pravaha-collapse-close {
	order: 2 !important;
	flex: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 0 0 auto !important;
	padding: 0 0 0 1em !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #9a4d00 !important;
	font-size: 0 !important;
	font-weight: normal !important;
	line-height: inherit !important;
}

.pravaha-collapse-open {
	display: inline-block !important;
}

.pravaha-collapse-close {
	display: none !important;
}

.pravaha-collapse-open a,
.pravaha-collapse-close a {
	display: inline !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: #9a4d00 !important;
	font-size: 0 !important;
	font-weight: normal !important;
	text-decoration: none !important;
}

.pravaha-collapse-open a::after {
	content: "[expand]";
	font-size: 12px !important;
}

.pravaha-collapse-close a::after {
	content: "[collapse]";
	font-size: 12px !important;
}

.pravaha-collapse-open a:hover::after,
.pravaha-collapse-close a:hover::after {
	color: var(--pravaha-brown-dark) !important;
	text-decoration: underline !important;
}

.pravaha-collapse-content {
	display: none !important;
	padding: 0.75em !important;
	border-top: 1px solid var(--pravaha-border) !important;
	background: #fff !important;
	color: #202122 !important;
}

.pravaha-collapse:target .pravaha-collapse-content {
	display: block !important;
}

.pravaha-collapse:target .pravaha-collapse-open {
	display: none !important;
}

.pravaha-collapse:target .pravaha-collapse-close {
	display: inline-block !important;
}


/* =========================================================
   WORD COUNT AND READING TIME
   ========================================================= */

.mw-parser-output > table[style*="float:right"][style*="width:300px"] {
	float: right !important;
	clear: right !important;
	width: 300px !important;
	max-width: 100% !important;
	margin: 0 0 1em 1em !important;
	border: 1px solid var(--pravaha-border) !important;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	border-radius: 4px !important;
	background: var(--pravaha-cream-light) !important;
	box-shadow: none !important;
	font-family: sans-serif !important;
}

.mw-parser-output > table[style*="float:right"][style*="width:300px"] td {
	width: 50% !important;
	padding: 0.55em 0.75em !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--pravaha-cream-light) !important;
	color: #202122 !important;
	font-size: 12px !important;
	text-align: center !important;
}

.mw-parser-output > table[style*="float:right"][style*="width:300px"] td + td {
	border-left: 1px solid var(--pravaha-border) !important;
}

.mw-parser-output > table[style*="float:right"][style*="width:300px"] td b {
	color: var(--pravaha-brown) !important;
	font-size: 11px !important;
	font-weight: normal !important;
	text-transform: uppercase !important;
}

.mw-parser-output > table[style*="float:right"][style*="width:300px"] td span {
	color: var(--pravaha-brown-dark) !important;
	font-size: 15px !important;
	font-weight: bold !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 720px) {
	.mw-body {
		border-left: 0 !important;
		border-right: 0 !important;
		box-shadow: none !important;
	}

	.pravaha-collapse-title {
		padding: 0.45em 0.55em !important;
	}

	.mw-parser-output > table[style*="float:right"][style*="width:300px"] {
		float: none !important;
		clear: both !important;
		width: 100% !important;
		margin: 0 0 1em !important;
	}
}