MediaWiki:Mbhh.css: Difference between revisions

Revision as of 19:27, 29 July 2026

/* All CSS here will be loaded for users of the MBHH skin */
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&family=Alegreya:ital,wght@0,400..900;1,400..900&display=swap');

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);
	font-family: "Alegreya Sans", "Noto Sans", sans-serif;
	font-size: 18px;
}

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body .toctitle h2 {
font-family: "Alegreya", sans-serif;
}
#mw-site-navigation #site-navigation.sidebar-chunk .sidebar-inner h3,
#mw-site-navigation #site-tools.sidebar-chunk .sidebar-inner h3,
#mw-related-navigation #page-tools.sidebar-chunk .sidebar-inner h3 {
	font-family: "Alegreya", serif;
  font-size: 1.2em;
	font-weight: 300 !important;
	text-transform: unset;
}

input#wpSummary {
font-family: "Noto Sans", sans-serif;
}

a, a:link, .toctogglelabel {
	color: #f4cf81 !important;
}
a.new {
	color: #f35961 !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%;
}

#mw-content #toc ul a :not(img) {
	filter:none;
}

.mw-scribunto-normalOutput {
	font-family: monospace;
	color: white;
}



/* ART */



#mw-content {
  background-image: url("/images/mbhh_cove/1/15/T_BG_BlackPaperBackgroundWithCutEdges.png"), linear-gradient(to right, #131315, #0f0f11);
  background-repeat: no-repeat;
}



.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;
}



.mw-body-content hr {
  border: none;
  background-color: transparent;
  background-image: url("/images/mbhh_cove/8/89/T_Deco_DividerlineWhite.png");
  background-size: 100% 12px;
  height: 12px;
}



.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%);
	}



.cc-pirate-icon {
	position: relative;
	display: inline-block;
	border-image-source: url("/images/mbhh_cove/0/0e/T_Button_ChoiceCard_Default.png");
	border-image-width: var(--instance-sized-border-width);
	border-image-slice: 12;
	border-image-outset: var(--instance-sized-border-width);
}
	.cc-pirate-icon-color-red {
		background-image: url("/images/mbhh_cove/d/dd/T_PopulationBackground_Red.png");
	}
	.cc-pirate-icon-color-yellow {
		background-image: url("/images/mbhh_cove/0/0b/T_PopulationBackground_Yellow.png");
	}
	.cc-pirate-icon-color-green {
		background-image: url("/images/mbhh_cove/f/f0/T_PopulationBackground_Green.png");
	}
	.cc-pirate-icon-color-purple {
		background-image: url("/images/mbhh_cove/0/05/T_PopulationBackground_Pink.png");
	}
	.cc-pirate-icon-color-blue {
		background-image: url("/images/mbhh_cove/a/a4/T_PopulationBackground_Blue.png");
	}
	.cc-pirate-icon-color-gray {
		background-image: url("/images/mbhh_cove/7/76/T_PopulationBackground_Gray.png");
	}