MediaWiki:Mbhh.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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* All CSS here will be loaded for users of the MBHH skin */
body {
background-image: url(/Corsair_Cove/skins/MBHH/resources/images/shade-right.png?9ba42),
url(/Corsair_Cove/skins/MBHH/resources/images/shade-left.png?30070),
url(/Corsair_Cove/skins/MBHH/resources/images/shade-bottom.png?ff4a7),
url(/Corsair_Cove/skins/MBHH/resources/images/game_bgs/COVE_bg.jpg?placeholder);
}

a, a:link, .toctogglelabel {
   color: #c8b36c !IMPORTANT;
}
a.new {
   color: palevioletred !IMPORTANT;
}

.tabber__tab, a.tabber__tab, a.tabber__tab:visited {
    margin-left: 25px;
    margin-right: 25px;
    text-align: center;
    justify-content: center;
}

.tabber__tabs {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}



/* ART */



.mw-body .mw-parser-output h2 {
  clear: both;
  color: #f5dcab;
}

.mw-body .mw-parser-output h2::after {
  border-bottom: none;
  background-image: url("/images/mbhh_cove/d/d8/T_BG_JourneyComplete.png");
  background-size: 109% 830px;
  background-position: center -9px;
  background-repeat: no-repeat;
  width: 100%;
  height: 4px;
  overflow: hidden;
  margin-top: 2px;
  padding: 0;
}



.cc-ship-background img {
	display: inline-block;
	background-image: url("/images/mbhh_cove/7/76/T_PopulationBackground_Gray.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	border-image-source: url("/images/mbhh_cove/4/4e/T_Button_SelectionBorder_Default.png") !important;
	border-image-slice: 12 !important;
	border-image-width: auto !important;
	border-image-outset: 6px !important;
}



.cc-compass-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	font-size: 0;
	border-radius: 50%;
	background-color: var(--instance-path-color, transparent);
	width: var(--instance-size, 16px);
	height: var(--instance-size, 16px);
}
	.cc-compass-icon::after {
		content: "";
		position: absolute;
		top: 1px; left: 1px; right: 0; bottom: 0;
		background-image: url("/images/mbhh_cove/d/de/T_Button_Compass_Node_Round_Color.png");
		background-position: center;
		background-size: 185% 185%;
	}
	.mw-body-content .cc-compass-icon img {
		position: relative;
		line-height: 0;
		font-size: 0;
		border-radius: 50%;
		z-index: 1;
		width: var(--instance-inner-size) !important;
		height: var(--instance-inner-size) !important;
	}
	.mw-body-content .cc-compass-icon a,
	.mw-body-content .cc-compass-icon span.mw-default-size {
		display: inline-flex;
		margin: 0;
		padding: 0;
		line-height: 0;
	}



.cc-infobox-resource {
	background-image: url("/images/mbhh_cove/1/15/T_BG_BlackPaperBackgroundWithCutEdges.png");
	background-size: cover;
	border-radius: 4px;
	padding-top: 0;
	padding-left: 2px;
	padding-right: 2px;
	padding-bottom: 4px;
	margin-left: 40px;
	margin-bottom: 40px;
}
	.cc-infobox-resource ul, p {
		list-style: none;
		margin-left: 8px;
		position: relative;
		z-index: 1;
	}
	.cc-infobox-resource > hr:first-child {
		border: none;
		background-color: transparent;
		height: 12px;
		background-image: url("/images/mbhh_cove/7/74/T_Divider_Small.png");
		background-size: 60% 70%;
		background-repeat: repeat-x;
		background-position: center;
		margin: -4px 20px -4px 20px;
	}
	.cc-infobox-resource-header + hr {
		border: none;
		background-color: transparent;
		height: 4px;
		background-image: url("/images/mbhh_cove/f/f1/T_Divider_Center.png");
		background-size: 60% 50%;
		background-repeat: repeat-x;
		background-position: center;
		margin: 0 30px 0 30px;
	}
	.cc-infobox-resource-header {
		position: relative;
		padding: 12px;
	}
		.cc-infobox-resource-header::before {
			content: "";
			pointer-events: none;
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
			z-index: 0;
			border-radius: 5px;
			background-image: url("/images/mbhh_cove/4/47/T_StoneMask.png");
			background-size: cover;
			opacity: 0.02;
			mask-image: linear-gradient(to right,  transparent, black 5px, black calc(100% - 5px), transparent),
						linear-gradient(to bottom, transparent, black 5px, black calc(100% - 5px), transparent);
			mask-composite: intersect;
			-webkit-mask-image: linear-gradient(to right,  transparent, black 5px, black calc(100% - 5px), transparent),
								linear-gradient(to bottom, transparent, black 5px, black calc(100% - 5px), transparent);
			-webkit-mask-composite: source-in;
			margin: 0 5px 0 5px;
		}
	.cc-infobox-resource-footer {
		position: relative;
		background-size: cover;
		padding: 8px;
		margin: 12px 4px 4px 4px;
	}
		.cc-infobox-resource-footer::before {
			content: "";
			pointer-events: none;
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
			z-index: 0;
			border-image-source: url("https://wiki.hoodedhorse.com/images/mbhh_cove/d/dd/T_BG_ContentBox.png");
			border-image-width: 5px;
			border-image-slice: 10 fill;
			border-image-repeat: stretch;
			border-image-outset: 0;
			opacity: 0.3;
		}
		.cc-infobox-resource-footer-label {
			display: block;
			text-align: center;
			position: relative;
			z-index: 1;
		}
		.cc-infobox-resource-footer > hr {
			border: none;
			background-color: transparent;
			height: 4px;
			background-image: url("/images/mbhh_cove/f/fa/T_unlock_Goldline.png");
			background-size: 60% 30%;
			background-repeat: repeat-x;
			background-position: center;
			margin: 0 4px 0 4px;
		}



.toc {
	border: none;
	background-color: transparent;
}
	.toc::before {
		content: "";
		display: block;
		width: 100%;
		height: 64px;
		background-image: url("/images/mbhh_cove/2/21/T_Divider_Top.png");
		background-position: center;
		background-size: 80% 60%;
		background-repeat: repeat-x;
	}
	.toc::after {
		content: "";
		display: block;
		width: 100%;
		height: 4px;
		background-image: url("/images/mbhh_cove/f/f1/T_Divider_Center.png");
		background-position: center;
		background-size: 70% 70%;
		background-repeat: repeat-x;
		margin-top: 16px;
	}
	.toc > .toctitle {
		border: none;
	}
		.toc > .toctitle::after {
			content: "";
			display: block;
			width: 100%;
			height: 12px;
			background-image: url("/images/mbhh_cove/7/74/T_Divider_Small.png");
			background-position: center;
			background-size: 70% 70%;
			background-repeat: repeat-x;
			margin-top: 12px;
		}



table.cc-flow-diagram {
	display: inline-block;
	border-collapse: collapse; 
	border-spacing: 0; 
	line-height: 0; 
	font-size: 0;
}
table.cc-flow-diagram td {
	padding: 0;
}


.cc-panel-banner {
	position: relative;
	display: inline-block;
	padding: 12px;
	min-width: 200px;
	line-height: 1.1;
}
	.cc-panel-banner::before {
		content: "";
		pointer-events: none;
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		z-index: 0;
		background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png");
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}
		.cc-panel-banner > span {
			position: relative;
			z-index: 1;
		}
	.cc-panel-recolor-gray::before{
		filter: brightness(0) saturate(100%) invert(4%) sepia(1%) saturate(1309%) hue-rotate(314deg) brightness(110%) contrast(75%);
	}
	.cc-panel-recolor-notoriety::before {
		filter: brightness(0) saturate(100%) invert(22%) sepia(35%) saturate(545%) hue-rotate(43deg) brightness(97%) contrast(96%);
	}
	.cc-panel-recolor-empire::before {
		filter: brightness(0) saturate(100%) invert(13%) sepia(89%) saturate(822%) hue-rotate(329deg) brightness(92%) contrast(90%);
	}
	.cc-panel-recolor-seafaring::before {
		filter: brightness(0) saturate(100%) invert(16%) sepia(33%) saturate(755%) hue-rotate(176deg) brightness(91%) contrast(88%);
	}
	.cc-panel-recolor-wealth::before {
		filter: brightness(0) saturate(100%) invert(11%) sepia(76%) saturate(1604%) hue-rotate(292deg) brightness(97%) contrast(105%);
	}