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; | |||
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 { | .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 { | .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 { | .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 a, | ||
.mw-body-content .cc-compass-icon span.mw-default-size { | .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; | |||
} | |||
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;
}


