MediaWiki:Mbhh.css: Difference between revisions

From Corsair Cove Official Wiki
added frame art for compass icons
Added resource infobox styling; cleaned up tabs and added space between art sections
Line 34: Line 34:


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


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

Revision as of 17:29, 26 July 2026

/* 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 */



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