MediaWiki:Chameleon.css

/* GENERAL FORMATTING */ 
/* HTML body */
body {
    background: #eaecf0;
    font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
}
/* Body of the page */
.mw-body {
    box-shadow: 4px 3px 7px 3px rgb(0 0 0 / 10%);
    border: solid #eaecf0;
    border-width: 1px 1px 0.2em;
    background: #ffffff;
    padding: 0em 2em 1em;
    margin-bottom: 0;
    overflow: auto;
    word-wrap: break-word;
}
/* Headings */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-weight: normal;
    font-family: 'Linux Libertine','Times New Roman','Liberation Serif','Nimbus Roman','Noto Serif','Times',serif;
    line-height: 1.125;
    margin-top: 0rem !important;
}
h1, .h1 {
    font-size: 2em;
}
/* Border under page title */
.mw-body .firstHeading {
    border-bottom: solid 1px #c8ccd1;
}
/* Normal paragraphs */
p {
    margin: 0.4em 0 0.6em 0 !important;
}
/* Lists */
.mw-list-item {
	margin-left: 6px;
}
/* Links */
a {
    color: #0645ad;
}

/* PAGE HEADER AREA */
#content{
	margin: 0;
}
.header-wrapper {
    margin-bottom: 12px;
    background: #ffffff;
    color: #000000;
    min-height: 3.125em;
}
.header-wrapper nav.p-navbar {
    max-width: 115em;
    width: 100%;
    margin: auto;
    background: #ffffff;
}

/* MENUS */
/* Make navbar normal */
.navbar, .p-navbar {
    padding: 0;
}
/* Logo */
.logo-wrapper {
    min-width: 0em !important;
}
#p-logo-text a {
    padding: 0em 0.7em;
    color: #000000;
    font-family: 'Linux Libertine','Times New Roman','Liberation Serif','Nimbus Roman','Noto Serif','Times',serif;
    font-variant: small-caps;
    font-size: 1.85em;
    white-space: nowrap;
}
.navbar-brand {
	margin-left: 1rem;
    margin-right: 0rem;
}
.p-navbar .navbar-brand img {
    max-width: 200px;
    width: 100%;
    object-fit: contain;
}
/* General menu stuff */
.nav-menu-label {
    font-weight: normal;
    font-size: 1em;
    margin: 0.75em 0.3em 0.75em 0.3em;
    padding-bottom: 0.15em;
    border-bottom: solid 2px #c8ccd1;
}
/* Top nav menu */
/* Hide the menu unless page is too narrow, hide logo instead */
.navbar-nav.right > .nav-item.dropdown {
    display: none;
}
.navbar-nav.right > .nav-item.p-tb-dropdown {
    display: none;
}
/* FIXME comment this properly */
.p-navbar.not-collapsible.py-0.flex-wrap > .navbar-nav {
	align-items: center;
	flex-direction: row;
}
.p-navbar.not-collapsible > .navbar-nav {
	align-items: unset;
	flex-direction: column;
}
.mt-4, .p-navbar .navbar-nav.right, .my-4 {
    margin-top: 0rem !important;
}
.p-navbar .navbar-nav .navbar-tools {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.nav-item {
	margin-left: 6px
}
.navbar-tools.navbar-nav a:before {
    margin-right: 0.3rem !important;
}
.navbar-tools.echo-icons {
    gap: 8px;
    margin-right: 6px;
}
.p-navbar {
    background-color: transparent;
    padding: 0em;
}
.page-tools-toflat {
    flex-direction: column;
    /* background-color: transparent !important; */
}
.navbar-nav:not(.right) {
    flex-grow: 1;
}
.navbar-tools.navbar-nav a:before {
    color: #ababab;
}
.navbar-tool a {
    color: #000 !important;
}
.navbar-tool.mw-list-item a:before, a.navbar-more-tools:before {
    color: #385b82 !important;
}
/* Hide in other projects that link to nothing */
.navbar-nav.right > .nav-item.p-wikibase-otherprojects-dropdown {
    display: none;
}
/* General small-screen rules for menus */
@media (max-width: 767px) {
	.navbar-nav.right > .nav-item.dropdown {
		display: block; 
    }
    /* Hide logo */
    .p-logo {
        display: none;
    }
    /* Toggle p-tb-dropdown visibility */
    .navbar-nav.right > .nav-item.p-tb-dropdown {
        display: block;
    }
    /* Adjust navbar link padding */
    .navbar-expand .navbar-nav .nav-link,
    .p-navbar.not-collapsible .navbar-nav .nav-link,
    .navbar-expand .navbar-nav .p-navbar .navbar-tool > a,
    .p-navbar .navbar-expand .navbar-nav .navbar-tool > a,
    .p-navbar.not-collapsible .navbar-nav .p-navbar .navbar-tool > a,
    .p-navbar .p-navbar.not-collapsible .navbar-nav .navbar-tool > a {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    /* Remove margin-left from enhanced recent changes */
    .client-js .mw-changeslist ul,
    .client-js .mw-changeslist table.mw-enhanced-rc {
        margin-left: 0 !important;
    }
}
/* Search bar */
.p-search {
    width: 100%;
    order: 1;
}
/* Search button */
#searchGoButton, #mw-searchButton {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    right: 0.1em;
    width: 2.5em;
    height: 2.8em;
    text-indent: -99999px;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(/skins/Timeless/resources/images/search-ltr.svg?402b1);
    background-position: center 40%;
    box-shadow: none;
}
#searchInput {
	border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.searchButton, .mw-searchButton {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    right: 1.5em;
    width: 2.5em;
    height: 2.5em;
    text-indent: -99999px;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(/skins/Timeless/resources/images/search-ltr.svg?402b1);
    background-position: center 40%;
    box-shadow: none;
}

/* Sidebar related changes */
.sidebar {
    padding-right: 1em;
    box-sizing: border-box;
    justify-content: space-between;
    width: 14em;
    flex: 0 0 14em;
}
.sidebar-heading{
	margin: 1em 0 0.5em !important;
	font-weight: normal;
	font-size: 1em;
	padding-bottom: 0.15em;
	border-bottom: solid 2px #c8ccd1;
}
.sidebar-item {
    background: #f8f9fa;
    border: solid #eaecf0;
    border-width: 1px 1px 0.2em;
    margin: 0em 0 1em 0 !important;
    box-shadow: 0 1px 7px 1px rgb(0 0 0 / 10%) !important;
    padding: 1em;
    line-height: 1.125;
    word-wrap: break-word;
    font-size: 0.95em;
}
.sidebar-item .nav-link:before {
    display: none;
}
.sidebar-item.sidebar-menu.col a {
    color: #355b83;
}
.sidebar-item.sidebar-menu-translations.col {
    display: none;
}
.sidebar-subitem{
	font-size: 0.95em;
	margin: 0;
	padding: 0.25em 0;
}
.sidebar .nav-link, .sidebar .p-navbar .navbar-tool > a {
    padding: 0.25em 0 !important;
}
.sidebar-wrapper{
	max-width:115em;
	width:100%;
	margin:auto;
	padding:0;
}
.sidebar-item.sidebar-menu.col > .nav-item.p-wikibase-otherprojects-dropdown {
    display: none;
}
.sidebar-item.sidebar-menu.col > .nav-item.dropdown.p-wikibase-otherprojects-dropdown {
    display: block;
}
.dropdown-menu.p-wikibase-otherprojects.show {
    transform: translate3d(115px, 207px, 0px) !important;
}

/* Random FIXME organize this properly*/
.echo-icons > * + * {
    margin-left: 0 !important;
}
.bahai-tools {
    gap: 8px;
}

/* WIKI CONTENT */
.wiki-content {
    padding-bottom: 15px;
}

/* MAIN PAGE */
/* Don't display some stuff on the main page */
body.page-Main_Page #tools-and-categories,
body.page-Main_Page h1.firstHeading,
body.page-Main_Page #catlinks {
    display: none !important;
}
.mpwelcome {
	font-size:230%;
	line-height:130%;
	border:none;
	margin:0;
	padding:0 0 0 1rem;
	font-family:'hoefler text','times new roman', serif;
	font-variant: small-caps;
	white-space:nowrap
}
@media (max-width: 768px) {
    .mpwelcome {
    	white-space:unset;
    	padding:0;
    }
}

/* INFOBOXEN */
.infobox {
    background: #f8f9fa;
    border-collapse: unset;
    max-width:32%;
    min-width:25%;
}
@media (max-width: 768px) {
    .infobox, .mbox-small {
    	max-width: unset;
        width: 100% !important; /* Full width on smaller screens */
    }
}
@media (max-width: 500px) {
    .infobox, .mbox-small {
    	min-width: unset !important;
    }
    .infobox {
    	padding:.5rem;
    }
    .infobox tbody, .infobox tr, .infobox th, .infobox td {
        width: 100% !important; /* Full width on smaller screens */
        display:block;
    }
}
.infobox.sisterproject {
	max-width: 65% !important;
}
@media (max-width: 768px) {
    .infobox.sisterproject {
    	float: none;
    	max-width: 100% !important;
    }
}
.row {
    flex-wrap: inherit;
}
.mw-redirectedfrom {
    display: block;
    font-size: 84%;
    line-height: 1.2em;
    margin: -8px 0px 1.4em 2em;
    color: #54595d;
}

/* FOOTER AREA */
.footer {
    border-top: solid 1px #54595d;
    box-shadow: inset 0 7px 2px -4px rgb(0 0 0 / 10%);
    color: #ffffff;
    background: #72777d;
}
.footer-wrapper {
    padding: 0.7em 0;
    max-width:115em;
	width:100%;
	margin:auto;
}
.footer a {
    color: #dbeaff;
    font-size: 16px;
}
/* Categories etc. are usually in the footer */
.tools-and-categories .p-navbar{
    box-shadow: 4px 3px 7px 3px rgb(0 0 0 / 10%);
    border: solid #eaecf0;
    border-width: 1px 1px 0.2em;
    background: #ffffff;
    margin-top: 14px;
    padding: 6px 14px;
}
.tools-and-categories .categories .mw-normal-catlinks [title="Special:Categories"]:first-child:before {
    content:'';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 0.5rem;
    display: inline-block;
    text-decoration: none;
}
.categories {
    margin-left: 10px;
}
body .mw-body .catlinks {
	margin: 1rem 0 0;
	padding:0;
    border: 0px;
    background-color: transparent;
    font-size: larger;
}
.catlinks {
	margin-top: 0;
	margin: 0.5em;
    border: 0px;
    background-color: transparent;
    font-size: larger;
}
.catlinks > .mw-hidden-catlinks {
	margin: .5rem 0;
	font-size:70%;
    font-style: italic;
    color:#666;
}
.catlinks > .mw-hidden-catlinks a {
	margin-top: .5rem;
    font-style: italic;
    color:#6289ca;
}
body .mw-body .catlinks ul {
	margin-left:0;
}
.navbar-nav.right {
    margin-left: 0 !important;
}
.mw-body .mw-indicators {
    margin-top: 24px;
}
/* FIXME organize this properly - Site search? */
.suggestions-special, .suggestions-result {
    padding: 10px 30px  !important;
}
.bahai-search {
    padding-left: 16px !important;
}

/* RESPONSIVE COLUMNS */
.flexlayout {
	display:flex;
	flex-direction:row;
	clear:both;
}
.flexequal > .flexcol {
	flex-basis:0%;
}
.flexcol {
	flex-grow:1;
}
.flexcol+.flexcol {
	margin-left:1em;
}

/* GENERAL RESPONSIVE DESIGN */
/* Responsive design - 1180px */
@media (max-width: 1180px) {
	/* Make top banner respond */
	#mp-topbanner .flexlayout {
		flex-wrap:wrap;
	}
}
/* Responsive design - 930px */
@media (max-width: 930px) {
	/* Reorganize responsive columns */
	.flexlayout {
		flex-direction:column;
	}
	/* Tighten column layout */
	.flexcol+.flexcol {
		margin-left:unset;
	}
}
/* Responsive design - 767px */
@media (max-width: 767px) {
    /* Extra padding under header to improve readability */
    .header-wrapper {
        padding-bottom: 6px;
    }
    .flex-fill.wiki-content.container-fluid {
        padding: 0 !important;
    }
	/* Don't display username to save space */
    .navbar-tool  .user-name {
        display: none;
    }
    /* Hide sidebar */
    .sidebar {
        display: none !important;
    }
	/* Tighten search layout, add space above to improve readability */
	.bahai-search {
		padding: 0 !important;
		margin-top: 14px;
	}
	/* Fix table of contents headings appearing on a new line from their numbering */
	.tocnumber, .toctext {
		display: inline !important;
	}
}
/* Responsive design - 500px */
@media (max-width: 500px) {
	/* Navboxes */
	.navbox-inner tr {
		display:flex;
		flex-wrap: wrap;
	}
	.navbox-inner tr th, .navbox-inner tr-td {
		width:100%!important;
	}
	.navbox-inner tr th.navbox-group {
		text-align:center;
	}
	/* RESPONSIVE IMAGES */
	/* Galleries */
	.mw-body li.gallerybox {
		width:100%!important;
	}  
	.mw-body li.gallerybox .thumb {
		width:unset!important;
		height:unset!important;
	}
	/* Thumbnails */
	.mw-body .thumb, .mw-body .thumbimage, 
	.mw-body figure[typeof~="mw:File/Thumb"], 
	.mw-body figure[typeof~="mw:File/Frame"] {
		float: none !important; /* Make images take 100% of screen on small displays */
		margin: 0 auto !important;
	}
	.mw-body .thumb img, .mw-body .thumbimage img,
	.mw-body .gallerybox .thumb img.mw-file-element,
	.mw-body figure[typeof~="mw:File/Thumb"] > :not(figcaption) img.mw-file-element,
	.mw-body figure[typeof~="mw:File/Frame"] > :not(figcaption) img.mw-file-element { /* allows image thumbs to respond at small widths */
		width: unset !important;
		height: unset !important;
		max-width: 97%; /* allows the image to fit inside the thumb border */
		margin: 1.5%;
	}
	/* RESPONSIVE INFOBOXEN */
	/* Infobox images */
	.mw-body .thumbinner, .mw-body .infobox .infobox-image img { /* allows infobox images to respond at small widths */
		width:100%!important;
		height:unset!important;
	}
	.mw-body .infobox .thumbimage, .mw-body .infobox .infobox-image  { 
		margin-bottom:.5rem;
	}
	/* Data rows */
	.mw-body .infobox .infobox-label, .mw-body .infobox .infobox-data, .mw-body .infobox .mergedtoprow, .mw-body .infobox .mergedrow, .mw-body .infobox .infobox-title { /* allows infoboxes with labelled data to scale down at small widths */
		display:block!important;
		font-size: 110%!important;
	}
	.mw-body .infobox .infobox-label, .mw-body .infobox .mergedtoprow { 
		background: #ccc!important;
		text-align: center!important;
	}
	.mw-body .infobox .infobox-data, .mw-body .infobox .mergedrow { 
		margin:.25rem 0!important;
	}
	.mw-body .policybox, .mw-body .policycontainer {
		max-width: unset;
		width: 100% !important; /* Full width on smaller screens */
		margin-bottom:.5rem;
	}
	.todayinhistory {
		width: 100% !important;
		float: none !important;
		margin-bottom: 10px;
	}
}

/* FULLY RESPONSIVE IMAGES */
/* This is a hack to enable 100% width responsive images in MediaWiki,
   which would otherwise require clunky extensions */
.mw-body ul.gallery[typeof~="responsive"] li.gallerybox {
	width:100%!important;
}  
.mw-body ul.gallery[typeof~="responsive"] li.gallerybox .thumb {
	width:unset!important;
	height:unset!important;
}
.mw-body ul.gallery[typeof~="responsive"] .gallerybox .thumb img.mw-file-element { /* allows image thumbs to respond at small widths */
	width: unset !important;
	height: unset !important;
	max-width: 97%; /* allows the image to fit inside the thumb border */
	margin: 1.5%;
}

caption {
    caption-side: top;
}

/* OTHER TWEAKS */
/* Fix long url's creating horizontal scroll bar  */
.mw-body-content a.external.free {
   word-break: break-all;
}
/* Fix margins on breadcrumb links on subpages */
.contentSub {
    margin: -12px 0px 15px 15px;
}
/* Fix the "Your edit has been saved" message overlapping the edit menu */
.postedit {
	margin-top: 2em;
}