MediaWiki:Mbhh.css: Difference between revisions
From Corsair Cove Official Wiki
Added style for tables that contain flow diagrams with new Arrow, Corner, and Segment templates |
fixed a missing hierarchy label |
||
| (40 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* All CSS here will be loaded for users of the MBHH skin */ | /* 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 { | body { | ||
background-image: url(/Corsair_Cove/skins/MBHH/resources/images/shade-right.png?9ba42), | 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-left.png?30070), | ||
url(/Corsair_Cove/skins/MBHH/resources/images/shade-bottom.png?ff4a7), | url(/Corsair_Cove/skins/MBHH/resources/images/shade-bottom.png?ff4a7), | ||
url(/Corsair_Cove/skins/MBHH/resources/images/game_bgs/COVE_bg.jpg?placeholder); | 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; | |||
}h | |||
#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; | |||
} | |||
.oo-ui-popupWidget-popup { | |||
background-color: black; | |||
} | } | ||
a, a:link, .toctogglelabel { | a, a:link, .toctogglelabel { | ||
color: #f4cf81 !important; | |||
} | } | ||
a.new { | a.new { | ||
color: #f35961 !important; | |||
} | } | ||
| Line 25: | Line 48: | ||
justify-content: center; | justify-content: center; | ||
width: 100%; | width: 100%; | ||
} | |||
#mw-content #toc ul a :not(img) { | |||
filter:none; | |||
} | |||
.mw-scribunto-normalOutput { | |||
font-family: monospace; | |||
color: white; | |||
} | } | ||
| Line 30: | Line 62: | ||
/* ART */ | /* 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 { | |||
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; | |||
} | |||
| Line 179: | Line 247: | ||
margin: 0 4px 0 4px; | margin: 0 4px 0 4px; | ||
} | } | ||
.cc-infobox-building { | |||
background-image: url("/images/mbhh_cove/0/03/T_MainMenuBackGroundWithContent.png"); | |||
background-size: 177% auto; | |||
background-position: center 0px; | |||
margin-top: 48px; | |||
margin-left: 48px; | |||
margin-bottom: 48px; | |||
padding-bottom: 48px; | |||
} | |||
.cc-infobox-building-header { | |||
position: relative; | |||
margin-top: 2px; | |||
padding: 8px 0 12px; | |||
background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png"); | |||
background-size: 100% 100%; | |||
color: black; | |||
} | |||
.cc-infobox-building-header > p { | |||
margin: 0; | |||
text-align: center; | |||
font-family: "Alegreya", serif; | |||
line-height: 1.1em; | |||
} | |||
.cc-infobox-building-header > p:first-of-type { | |||
font-size: 1.35em; | |||
} | |||
.cc-infobox-building-header-icon { | |||
position: absolute; | |||
z-index: 3; | |||
top: 0; | |||
transform: translateY(-100%); | |||
width: 100%; | |||
height: 40px; | |||
background-image: url("/images/mbhh_cove/4/48/T_PanelRoundTop.png"); | |||
background-size: 100% auto; | |||
background-position: center 0px; | |||
background-repeat: no-repeat; | |||
text-align: center; | |||
} | |||
.cc-infobox-building-header-icon::before { | |||
content: ""; | |||
position: absolute; | |||
z-index: 1; | |||
top: 0; left: 0; right: 0; bottom: 0; | |||
width: 100%; | |||
background-image: url("/images/mbhh_cove/2/2e/T_Deco_Panel.png"); | |||
background-size: contain; | |||
background-position: center 0px; | |||
background-repeat: no-repeat; | |||
} | |||
.cc-infobox-building-header-icon img { | |||
position: relative; | |||
z-index: 3; | |||
width: 48px; | |||
height: 48px; | |||
top: -14px; | |||
} | |||
.cc-infobox-building-header-theme-well { | |||
position: relative; | |||
z-index: 1; | |||
height: 115px; | |||
background-size: 100% auto; | |||
background-position: center center; | |||
background-repeat: no-repeat; | |||
} | |||
.cc-infobox-building-header-theme-generic { | |||
background-image: url("/images/mbhh_cove/c/c8/T_PanelBanner_Placeholder.png"); | |||
} | |||
.cc-infobox-building-header-theme-camp { | |||
background-image: url("/images/mbhh_cove/1/18/T_StructureBanner_PirateCamp.png"); | |||
} | |||
.cc-infobox-building-header-theme-galley { | |||
background-image: url("/images/mbhh_cove/a/a3/T_StructureBanner_galley.png"); | |||
} | |||
.cc-infobox-building-header-theme-tavern { | |||
background-image: url("/images/mbhh_cove/a/ae/T_StructureBanner_tavern.png"); | |||
} | |||
.cc-infobox-building-header-theme-pier { | |||
background-image: url("/images/mbhh_cove/f/fa/T_StructureBanner_pier.png"); | |||
} | |||
.cc-infobox-building-header-theme-defense { | |||
background-image: url("/images/mbhh_cove/7/71/T_StructureBanner_defense_towers.png"); | |||
} | |||
.cc-infobox-building-header-theme-notoriety { | |||
background-image: url("/images/mbhh_cove/7/75/T_StructureBanner_notoriety.png"); | |||
} | |||
.cc-infobox-building-header-theme-empire { | |||
background-image: url("/images/mbhh_cove/f/f9/T_StructureBanner_empire.png"); | |||
} | |||
.cc-infobox-building-header-theme-seafaring { | |||
background-image: url("/images/mbhh_cove/f/f9/T_StructureBanner_sea.png"); | |||
} | |||
.cc-infobox-building-header-theme-wealth { | |||
background-image: url("/images/mbhh_cove/4/4e/T_StructureBanner_wealth.png"); | |||
} | |||
.cc-infobox-building-header-theme-well::after { | |||
content: ""; | |||
position: absolute; | |||
top: -40px; left: -2px; right: -2px; bottom: 0; | |||
z-index: 2; | |||
background-image: url("/images/mbhh_cove/2/2c/T_BannerGlow.png"); | |||
background-size: 100% 100%; | |||
background-position: center center; | |||
background-repeat: no-repeat; | |||
opacity: 0.45; | |||
} | |||
.cc-infobox-building-description { | |||
padding: 16px; | |||
text-align: left; | |||
} | |||
.cc-infobox-building-section { | |||
margin-top: 36px; | |||
} | |||
.cc-infobox-building-section hr { | |||
border: none; | |||
background-color: transparent; | |||
height: 4px; | |||
background-image: url("/images/mbhh_cove/7/72/T_Deco_DividerlineGoldWide.png"); | |||
background-size: 50% 30%; | |||
background-repeat: repeat-x; | |||
background-position: center; | |||
margin: 0 10% 12px 10%; | |||
} | |||
.cc-infobox-building-section-production-table { | |||
margin: 36px 36px 0 36px; | |||
} | |||
.cc-infobox-quest { | |||
float: right; | |||
position: relative; | |||
z-index: 1; | |||
overflow: hidden; | |||
margin-left: 48px; | |||
margin-bottom: 48px; | |||
} | |||
.cc-infobox-quest-background-generic::before, | |||
.cc-infobox-quest-background-notoriety::before, | |||
.cc-infobox-quest-background-empire::before, | |||
.cc-infobox-quest-background-seafaring::before, | |||
.cc-infobox-quest-background-wealth::before { | |||
content: ""; | |||
pointer-events: none; | |||
position: absolute; | |||
z-index: 0; | |||
top: 0; right: 5px; bottom: 0; left: 5px; | |||
background-size: 100% auto; | |||
background-position: bottom center; | |||
} | |||
.cc-infobox-quest-background-generic::before { | |||
background-image: url("/images/mbhh_cove/d/d8/T_BG_JourneyComplete.png"); | |||
background-size: 100% 100%; | |||
bottom: -6px; | |||
opacity: 0.3; | |||
} | |||
.cc-infobox-quest-background-notoriety::before { | |||
background-image: url("/images/mbhh_cove/5/5a/T_BG_challenges_Notoriety.png"); | |||
} | |||
.cc-infobox-quest-background-empire::before { | |||
background-image: url("/images/mbhh_cove/4/4d/T_BG_challenges_Empire.png"); | |||
} | |||
.cc-infobox-quest-background-seafaring::before { | |||
background-image: url("/images/mbhh_cove/d/d3/T_BG_challenges_Sea.png"); | |||
} | |||
.cc-infobox-quest-background-wealth::before { | |||
background-image: url("/images/mbhh_cove/f/f0/T_BG_challenges_Wealth.png"); | |||
} | |||
.cc-infobox-quest-title { | |||
position: relative; | |||
z-index: 2; | |||
padding: 12px; | |||
margin-left: 2px; | |||
margin-right: 2px; | |||
line-height: 1.1; | |||
font-family: "Alegreya", serif; | |||
font-weight: bold; | |||
} | |||
.cc-infobox-quest-title::before { | |||
content: ""; | |||
pointer-events: none; | |||
position: absolute; | |||
z-index: 1; | |||
top: 0; right: 0; bottom: 0; left: 0; | |||
background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png"); | |||
background-size: 100% 100%; | |||
} | |||
.cc-infobox-quest-title > span { | |||
position: relative; | |||
z-index: 2; | |||
color: black; | |||
} | |||
.cc-infobox-quest-path-banner { | |||
position: relative; | |||
top: -10px; | |||
margin-bottom: -14px; | |||
z-index: 1; | |||
padding-top: 12px; | |||
padding-bottom: 4px; | |||
margin-left: 4px; | |||
margin-right: 4px; | |||
line-height: 1.0; | |||
font-family: "Alegreya", serif; | |||
font-size: 0.9em; | |||
text-align: center; | |||
} | |||
.cc-infobox-quest-path-banner::before { | |||
content: ""; | |||
pointer-events: none; | |||
position: absolute; | |||
top: 0; right: 0; bottom: 0; left: 0; | |||
z-index: 0; | |||
background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png"); | |||
background-size: 100% 100%; | |||
} | |||
.cc-infobox-quest-path-banner > span { | |||
position: relative; | |||
z-index: 2; | |||
color: white; | |||
} | |||
.cc-infobox-quest-illustration-well { | |||
position: relative; | |||
} | |||
.cc-infobox-quest-illustration-well::after { | |||
content: ""; | |||
position: absolute; | |||
top: -55px; left: 0; right: 0; bottom: 0; | |||
z-index: 2; | |||
background-image: url("/images/mbhh_cove/2/2c/T_BannerGlow.png"); | |||
background-size: 100% 100%; | |||
background-position: center center; | |||
background-repeat: no-repeat; | |||
opacity: 0.4; | |||
} | |||
.cc-infobox-quest-region { | |||
position: relative; | |||
margin-top: 8px; | |||
text-align: center; | |||
font-family: "Alegreya", serif; | |||
font-weight: bold; | |||
} | |||
.cc-infobox-quest-section-description { | |||
position: relative; | |||
padding: 12px 30px; | |||
line-height: 1.3; | |||
} | |||
.cc-infobox-quest-section-difficulty, .cc-infobox-quest-section-rewards { | |||
position: relative; | |||
text-align: center; | |||
margin: 0 24px 12px; | |||
padding-top: 12px; | |||
padding-bottom: 12px; | |||
} | |||
.cc-infobox-quest-section-difficulty span, .cc-infobox-quest-section-rewards span { | |||
position: relative; | |||
font-family: "Alegreya", serif; | |||
} | |||
.cc-infobox-quest-section-difficulty div, .cc-infobox-quest-section-rewards div { | |||
z-index: 2; | |||
font-family: "Alegreya Sans", sans-serif; | |||
} | |||
.cc-infobox-quest-section-difficulty hr, .cc-infobox-quest-section-rewards hr { | |||
border: none; | |||
background-color: transparent; | |||
height: 6px; | |||
background-image: url("/images/mbhh_cove/7/72/T_Deco_DividerlineGoldWide.png"); | |||
background-size: 50% 30%; | |||
background-repeat: repeat-x; | |||
background-position: center; | |||
margin: 0 10% 12px 10%; | |||
} | |||
.cc-infobox-ship { | |||
float: right; | |||
position: relative; | |||
max-width: 360px; | |||
margin-left: 48px; | |||
margin-bottom: 64px; | |||
margin-top: 58px; | |||
padding-bottom: 36px; | |||
background-image: url("/images/mbhh_cove/8/80/T_MainMenuBackGround.png"); | |||
background-size: 100% calc(100% + 10px);; | |||
background-position: top center; | |||
background-repeat: no-repeat; | |||
} | |||
.cc-infobox-ship::before { | |||
content: ""; | |||
position: absolute; | |||
z-index: 1; | |||
top: -46px; right: 0; bottom: 0; left: 0; | |||
border-image-source: url("/images/mbhh_cove/b/b8/T_BG_PanelLongWithGold.png"); | |||
border-image-slice: 50 9 10 9; | |||
border-image-width: auto; | |||
border-image-outset: 4px; | |||
border-image-repeat: stretch; | |||
opacity: 0.2; | |||
} | |||
.cc-infobox-ship hr { | |||
border: none; | |||
background-color: transparent; | |||
height: 6px; | |||
background-image: url("/images/mbhh_cove/7/72/T_Deco_DividerlineGoldWide.png"); | |||
background-size: 50% 30%; | |||
background-repeat: repeat-x; | |||
background-position: center; | |||
margin: 0 10% 12px 10%; | |||
opacity: 0.75; | |||
} | |||
.cc-infobox-ship-header::before { | |||
content: ""; | |||
position: absolute; | |||
z-index: 1; | |||
top: -50px; right: 0; bottom: 0; left: 0; | |||
background-image: url("/images/mbhh_cove/2/2e/T_Deco_Panel.png"); | |||
background-size: 75% auto; | |||
background-position: center 0px; | |||
background-repeat: no-repeat; | |||
} | |||
.cc-infobox-ship-header-tier { | |||
position: absolute; | |||
z-index: 3; | |||
width: 100%; | |||
top: -58px; | |||
text-align: center; | |||
} | |||
.cc-infobox-ship-header-name { | |||
position: relative; | |||
z-index: 2; | |||
padding-top: 4px; | |||
padding-bottom: 10px; | |||
font-family: "Alegreya", serif; | |||
font-weight: bold; | |||
color: black; | |||
text-align: center; | |||
} | |||
.cc-infobox-ship-header-name::before { | |||
content: ""; | |||
pointer-events: none; | |||
position: absolute; | |||
top: -6px; right: -6px; bottom: 0; left: -6px; | |||
z-index: -1; | |||
background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png"); | |||
background-size: 100% 100%; | |||
background-position: center; | |||
background-repeat: no-repeat; | |||
} | |||
.cc-infobox-ship-header-class { | |||
position: relative; | |||
z-index: 1; | |||
padding-top: 2px; | |||
padding-bottom: 8px; | |||
font-family: "Alegreya", serif; | |||
font-size: 0.9em; | |||
line-height: 1.0; | |||
text-align: center; | |||
} | |||
.cc-infobox-ship-header-class::before { | |||
content: ""; | |||
pointer-events: none; | |||
position: absolute; | |||
top: -12px; right: -2px; bottom: 0; left: -2px; | |||
z-index: -1; | |||
background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png"); | |||
background-size: 100% 100%; | |||
background-position: center; | |||
background-repeat: no-repeat; | |||
} | |||
.cc-infobox-ship-header-icon { | |||
text-align: center; | |||
} | |||
.cc-infobox-ship-header-description { | |||
margin: 12px 36px 0; | |||
font-size: 0.8em; | |||
line-height: 1.3em; | |||
} | |||
.cc-infobox-ship-stats-title, | |||
.cc-infobox-ship-crew-title, | |||
.cc-infobox-ship-construction-title, | |||
.cc-infobox-ship-unlock-title { | |||
text-align: center; | |||
font-family: "Alegreya", serif; | |||
margin-top: 24px; | |||
} | |||
.cc-infobox-ship-stats-fullrow { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
margin: 0 10% 6px; | |||
} | |||
.cc-infobox-ship-stats-fullrow div:nth-child(2) { | |||
font-weight: bold; | |||
} | |||
.cc-infobox-ship-stats-row { | |||
display: flex; | |||
justify-content: space-evenly; | |||
align-items: flex-end; | |||
margin: 24px 10% 0; | |||
} | |||
.cc-infobox-ship-stats-row-col { | |||
text-align: center; | |||
line-height: 1.3; | |||
} | |||
.cc-infobox-ship-stats-row-col div:not(:first-child) { | |||
font-weight: bold; | |||
} | |||
.cc-infobox-ship-crew-row { | |||
display: flex; | |||
justify-content: center; | |||
gap: 12px; | |||
} | |||
.cc-infobox-ship-crew-row-col { | |||
text-align: center; | |||
} | |||
.cc-infobox-ship-crew-row-col .cc-infobox-ship-crew-row-col-advanced { | |||
position: relative; | |||
z-index: 1; | |||
} | |||
.cc-infobox-ship-crew-row-col .cc-infobox-ship-crew-row-col-advanced::after { | |||
content :""; | |||
position: absolute; | |||
top: 0; right: 0; bottom: 0; left: 0; | |||
z-index: 5; | |||
background-image: url("/images/mbhh_cove/6/66/T_PremiumCrewIndicator.png"); | |||
background-size: 100% 100%; | |||
background-position: center center; | |||
} | |||
.cc-infobox-ship-crew-row-col div:first-child { | |||
font-size: 0.8em; | |||
} | |||
.cc-infobox-ship-crew-row-col div:not(:first-child) { | |||
font-weight: bold; | |||
} | |||
.cc-infobox-ship-construction-pier { | |||
text-align: center; | |||
margin-bottom: 16px; | |||
} | |||
.cc-infobox-ship-construction-table { | |||
margin: 0 10%; | |||
} | |||
.cc-infobox-ship-construction-table table { | |||
margin: 0 auto; | |||
width: fit-content; | |||
border-spacing: 3px; | |||
} | |||
.cc-infobox-ship-construction-table-qty { | |||
font-weight: bold; | |||
} | |||
.cc-infobox-ship-unlock-requirements { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
margin: 0 10%; | |||
} | |||
.cc-infobox-ship-unlock-requirements-points { | |||
display: flex; | |||
gap: 4px; | |||
} | |||
.cc-infobox-ship-unlock-requirements-points > div { | |||
display: flex; | |||
align-items: center; | |||
gap: 4px; | |||
padding: 0 4px; | |||
} | |||
.cc-infobox-ship-unlock-requirements-points-notoriety { | |||
background-color: #46592d; | |||
} | |||
.cc-infobox-ship-unlock-requirements-points-empire { | |||
background-color: #6f302a; | |||
} | |||
.cc-infobox-ship-unlock-requirements-points-seafaring { | |||
background-color: #334661; | |||
} | |||
.cc-infobox-ship-unlock-requirements-points-wealth { | |||
background-color: #69154a; | |||
} | |||
.cc-reward-card { | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: space-between; | |||
align-items: center; | |||
width: 84px; | |||
height: 116px; | |||
padding: 10px 6px 4px 6px; | |||
border-image-source: url("/images/mbhh_cove/0/0e/T_Button_ChoiceCard_Default.png"); | |||
border-image-slice: 11 fill; | |||
border-image-width: 4; | |||
font-size: 125%; | |||
} | |||
.cc-quest-page-timeline { | |||
margin-left: -36px; | |||
padding: 8px 0 18px 120px; | |||
background-image: url("/images/mbhh_cove/d/df/T_SubtitleBackground_Edge.png"); | |||
background-size: 100% 100%; | |||
background-position: -100px center; | |||
background-repeat: no-repeat; | |||
} | |||
.cc-page-notice-spoiler { | |||
position: relative; | |||
z-index: 1; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
gap: 8px; | |||
width: fit-content; | |||
margin: auto; | |||
padding: 8px 56px 12px; | |||
margin-bottom: 24px; | |||
} | |||
.cc-page-notice-spoiler::before { | |||
content: ""; | |||
pointer-events: none; | |||
position: absolute; | |||
z-index: 0; | |||
top: 0; right: 0; bottom: 0; left: 0; | |||
border-image-source: url("/images/mbhh_cove/a/a6/T_Banner_Medium_scaleable.png"); | |||
border-image-slice: 56 56 53 63 fill; | |||
border-image-width: 35px 55px; | |||
border-image-repeat: stretch; | |||
border-image-outset: 24px 2px 16px; | |||
filter: saturate(90%) invert(13%) sepia(90%) saturate(822%) hue-rotate(329deg) brightness(60%) contrast(95%); | |||
} | |||
.cc-page-notice-spoiler img { | |||
position: relative; | |||
background-image: url("/images/mbhh_cove/9/9a/T_warning_BloodStrong.png"); | |||
background-size: 100% 100%; | |||
} | |||
.cc-page-notice-spoiler div { | |||
position: relative; | |||
font-family: "Alegreya", serif; | |||
} | |||
| Line 225: | Line 837: | ||
table.cc-flow-diagram { | table.cc-flow-diagram { | ||
display: inline-block; | |||
border-collapse: collapse; | border-collapse: collapse; | ||
border-spacing: 0; | border-spacing: 0; | ||
| Line 232: | Line 845: | ||
table.cc-flow-diagram td { | table.cc-flow-diagram td { | ||
padding: 0; | padding: 0; | ||
} | |||
.cc-panel-banner { | |||
position: relative; | |||
display: inline-block; | |||
padding: 12px; | |||
min-width: 200px; | |||
line-height: 1.1; | |||
font-family: "Alegreya", serif; | |||
} | |||
.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: var(--instance-sized-border-width) solid transparent; | |||
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: 0; | |||
background-size: 99% 99%; | |||
background-position: center center; | |||
background-repeat: no-repeat; | |||
} | |||
.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"); | |||
} | |||
.cc-producer-icon { | |||
position: relative; | |||
z-index: 1; | |||
display: inline-block; | |||
padding: 4px; | |||
} | |||
.cc-producer-icon::before { | |||
content: ""; | |||
pointer-events: none; | |||
position: absolute; | |||
z-index: 0; | |||
top: 0; right: 0; bottom: 0; left: 0; | |||
background-image: url("/images/mbhh_cove/e/e3/T_BG_BlackSmoke_Round.png"), url("/images/mbhh_cove/a/a4/T_ICO_BuildingSign_Shield.png"); | |||
background-size: 100% 90%, 110% 100%; | |||
background-position: center center, center center; | |||
background-repeat: no-repeat; | |||
opacity: 0.5; | |||
} | |||
.cc-producer-icon img { | |||
position: relative; | |||
z-index: 1; | |||
} | |||
.cc-ship-tier-icon { | |||
display: inline-block; | |||
width: var(--instance-width); | |||
height: var(--instance-width); | |||
line-height: calc(var(--instance-width) * 0.9); | |||
background-size: 115% 115%; | |||
background-position: center center; | |||
background-repeat: no-repeat; | |||
text-align: center; | |||
font-weight: bold; | |||
font-size: var(--instance-font-size); | |||
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 2px 2px 0 #000; | |||
} | |||
.cc-ship-tier-icon.cc-ship-tier-icon-none { | |||
background-image: url("/images/mbhh_cove/4/4e/T_ICO_BuildingSign_ShieldFive.png"); | |||
} | |||
.cc-ship-tier-icon.cc-ship-tier-icon-notoriety { | |||
background-image: url("/images/mbhh_cove/6/63/T_Flag_Principle_Notoriety_Small.png"); | |||
} | |||
.cc-ship-tier-icon.cc-ship-tier-icon-empire { | |||
background-image: url("/images/mbhh_cove/2/25/T_Flag_Principle_Empire_Small.png"); | |||
background-position: calc(50% + 1px) calc(50% - 1px); | |||
} | |||
.cc-ship-tier-icon.cc-ship-tier-icon-seafaring { | |||
background-image: url("/images/mbhh_cove/d/db/T_Flag_Principle_Sea_Small.png"); | |||
} | |||
.cc-ship-tier-icon.cc-ship-tier-icon-wealth { | |||
background-image: url("/images/mbhh_cove/b/b1/T_Flag_Principle_Wealth_small.png"); | |||
} | |||
.cc-ship-stat-max { | |||
color: #34ff00; | |||
} | |||
.rotate-180 { | |||
transform: rotate(180deg); | |||
} | } | ||
Latest revision as of 03:48, 7 August 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;
}h
#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;
}
.oo-ui-popupWidget-popup {
background-color: black;
}
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 {
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;
}
.cc-infobox-building {
background-image: url("/images/mbhh_cove/0/03/T_MainMenuBackGroundWithContent.png");
background-size: 177% auto;
background-position: center 0px;
margin-top: 48px;
margin-left: 48px;
margin-bottom: 48px;
padding-bottom: 48px;
}
.cc-infobox-building-header {
position: relative;
margin-top: 2px;
padding: 8px 0 12px;
background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png");
background-size: 100% 100%;
color: black;
}
.cc-infobox-building-header > p {
margin: 0;
text-align: center;
font-family: "Alegreya", serif;
line-height: 1.1em;
}
.cc-infobox-building-header > p:first-of-type {
font-size: 1.35em;
}
.cc-infobox-building-header-icon {
position: absolute;
z-index: 3;
top: 0;
transform: translateY(-100%);
width: 100%;
height: 40px;
background-image: url("/images/mbhh_cove/4/48/T_PanelRoundTop.png");
background-size: 100% auto;
background-position: center 0px;
background-repeat: no-repeat;
text-align: center;
}
.cc-infobox-building-header-icon::before {
content: "";
position: absolute;
z-index: 1;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%;
background-image: url("/images/mbhh_cove/2/2e/T_Deco_Panel.png");
background-size: contain;
background-position: center 0px;
background-repeat: no-repeat;
}
.cc-infobox-building-header-icon img {
position: relative;
z-index: 3;
width: 48px;
height: 48px;
top: -14px;
}
.cc-infobox-building-header-theme-well {
position: relative;
z-index: 1;
height: 115px;
background-size: 100% auto;
background-position: center center;
background-repeat: no-repeat;
}
.cc-infobox-building-header-theme-generic {
background-image: url("/images/mbhh_cove/c/c8/T_PanelBanner_Placeholder.png");
}
.cc-infobox-building-header-theme-camp {
background-image: url("/images/mbhh_cove/1/18/T_StructureBanner_PirateCamp.png");
}
.cc-infobox-building-header-theme-galley {
background-image: url("/images/mbhh_cove/a/a3/T_StructureBanner_galley.png");
}
.cc-infobox-building-header-theme-tavern {
background-image: url("/images/mbhh_cove/a/ae/T_StructureBanner_tavern.png");
}
.cc-infobox-building-header-theme-pier {
background-image: url("/images/mbhh_cove/f/fa/T_StructureBanner_pier.png");
}
.cc-infobox-building-header-theme-defense {
background-image: url("/images/mbhh_cove/7/71/T_StructureBanner_defense_towers.png");
}
.cc-infobox-building-header-theme-notoriety {
background-image: url("/images/mbhh_cove/7/75/T_StructureBanner_notoriety.png");
}
.cc-infobox-building-header-theme-empire {
background-image: url("/images/mbhh_cove/f/f9/T_StructureBanner_empire.png");
}
.cc-infobox-building-header-theme-seafaring {
background-image: url("/images/mbhh_cove/f/f9/T_StructureBanner_sea.png");
}
.cc-infobox-building-header-theme-wealth {
background-image: url("/images/mbhh_cove/4/4e/T_StructureBanner_wealth.png");
}
.cc-infobox-building-header-theme-well::after {
content: "";
position: absolute;
top: -40px; left: -2px; right: -2px; bottom: 0;
z-index: 2;
background-image: url("/images/mbhh_cove/2/2c/T_BannerGlow.png");
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.45;
}
.cc-infobox-building-description {
padding: 16px;
text-align: left;
}
.cc-infobox-building-section {
margin-top: 36px;
}
.cc-infobox-building-section hr {
border: none;
background-color: transparent;
height: 4px;
background-image: url("/images/mbhh_cove/7/72/T_Deco_DividerlineGoldWide.png");
background-size: 50% 30%;
background-repeat: repeat-x;
background-position: center;
margin: 0 10% 12px 10%;
}
.cc-infobox-building-section-production-table {
margin: 36px 36px 0 36px;
}
.cc-infobox-quest {
float: right;
position: relative;
z-index: 1;
overflow: hidden;
margin-left: 48px;
margin-bottom: 48px;
}
.cc-infobox-quest-background-generic::before,
.cc-infobox-quest-background-notoriety::before,
.cc-infobox-quest-background-empire::before,
.cc-infobox-quest-background-seafaring::before,
.cc-infobox-quest-background-wealth::before {
content: "";
pointer-events: none;
position: absolute;
z-index: 0;
top: 0; right: 5px; bottom: 0; left: 5px;
background-size: 100% auto;
background-position: bottom center;
}
.cc-infobox-quest-background-generic::before {
background-image: url("/images/mbhh_cove/d/d8/T_BG_JourneyComplete.png");
background-size: 100% 100%;
bottom: -6px;
opacity: 0.3;
}
.cc-infobox-quest-background-notoriety::before {
background-image: url("/images/mbhh_cove/5/5a/T_BG_challenges_Notoriety.png");
}
.cc-infobox-quest-background-empire::before {
background-image: url("/images/mbhh_cove/4/4d/T_BG_challenges_Empire.png");
}
.cc-infobox-quest-background-seafaring::before {
background-image: url("/images/mbhh_cove/d/d3/T_BG_challenges_Sea.png");
}
.cc-infobox-quest-background-wealth::before {
background-image: url("/images/mbhh_cove/f/f0/T_BG_challenges_Wealth.png");
}
.cc-infobox-quest-title {
position: relative;
z-index: 2;
padding: 12px;
margin-left: 2px;
margin-right: 2px;
line-height: 1.1;
font-family: "Alegreya", serif;
font-weight: bold;
}
.cc-infobox-quest-title::before {
content: "";
pointer-events: none;
position: absolute;
z-index: 1;
top: 0; right: 0; bottom: 0; left: 0;
background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png");
background-size: 100% 100%;
}
.cc-infobox-quest-title > span {
position: relative;
z-index: 2;
color: black;
}
.cc-infobox-quest-path-banner {
position: relative;
top: -10px;
margin-bottom: -14px;
z-index: 1;
padding-top: 12px;
padding-bottom: 4px;
margin-left: 4px;
margin-right: 4px;
line-height: 1.0;
font-family: "Alegreya", serif;
font-size: 0.9em;
text-align: center;
}
.cc-infobox-quest-path-banner::before {
content: "";
pointer-events: none;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 0;
background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png");
background-size: 100% 100%;
}
.cc-infobox-quest-path-banner > span {
position: relative;
z-index: 2;
color: white;
}
.cc-infobox-quest-illustration-well {
position: relative;
}
.cc-infobox-quest-illustration-well::after {
content: "";
position: absolute;
top: -55px; left: 0; right: 0; bottom: 0;
z-index: 2;
background-image: url("/images/mbhh_cove/2/2c/T_BannerGlow.png");
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.4;
}
.cc-infobox-quest-region {
position: relative;
margin-top: 8px;
text-align: center;
font-family: "Alegreya", serif;
font-weight: bold;
}
.cc-infobox-quest-section-description {
position: relative;
padding: 12px 30px;
line-height: 1.3;
}
.cc-infobox-quest-section-difficulty, .cc-infobox-quest-section-rewards {
position: relative;
text-align: center;
margin: 0 24px 12px;
padding-top: 12px;
padding-bottom: 12px;
}
.cc-infobox-quest-section-difficulty span, .cc-infobox-quest-section-rewards span {
position: relative;
font-family: "Alegreya", serif;
}
.cc-infobox-quest-section-difficulty div, .cc-infobox-quest-section-rewards div {
z-index: 2;
font-family: "Alegreya Sans", sans-serif;
}
.cc-infobox-quest-section-difficulty hr, .cc-infobox-quest-section-rewards hr {
border: none;
background-color: transparent;
height: 6px;
background-image: url("/images/mbhh_cove/7/72/T_Deco_DividerlineGoldWide.png");
background-size: 50% 30%;
background-repeat: repeat-x;
background-position: center;
margin: 0 10% 12px 10%;
}
.cc-infobox-ship {
float: right;
position: relative;
max-width: 360px;
margin-left: 48px;
margin-bottom: 64px;
margin-top: 58px;
padding-bottom: 36px;
background-image: url("/images/mbhh_cove/8/80/T_MainMenuBackGround.png");
background-size: 100% calc(100% + 10px);;
background-position: top center;
background-repeat: no-repeat;
}
.cc-infobox-ship::before {
content: "";
position: absolute;
z-index: 1;
top: -46px; right: 0; bottom: 0; left: 0;
border-image-source: url("/images/mbhh_cove/b/b8/T_BG_PanelLongWithGold.png");
border-image-slice: 50 9 10 9;
border-image-width: auto;
border-image-outset: 4px;
border-image-repeat: stretch;
opacity: 0.2;
}
.cc-infobox-ship hr {
border: none;
background-color: transparent;
height: 6px;
background-image: url("/images/mbhh_cove/7/72/T_Deco_DividerlineGoldWide.png");
background-size: 50% 30%;
background-repeat: repeat-x;
background-position: center;
margin: 0 10% 12px 10%;
opacity: 0.75;
}
.cc-infobox-ship-header::before {
content: "";
position: absolute;
z-index: 1;
top: -50px; right: 0; bottom: 0; left: 0;
background-image: url("/images/mbhh_cove/2/2e/T_Deco_Panel.png");
background-size: 75% auto;
background-position: center 0px;
background-repeat: no-repeat;
}
.cc-infobox-ship-header-tier {
position: absolute;
z-index: 3;
width: 100%;
top: -58px;
text-align: center;
}
.cc-infobox-ship-header-name {
position: relative;
z-index: 2;
padding-top: 4px;
padding-bottom: 10px;
font-family: "Alegreya", serif;
font-weight: bold;
color: black;
text-align: center;
}
.cc-infobox-ship-header-name::before {
content: "";
pointer-events: none;
position: absolute;
top: -6px; right: -6px; bottom: 0; left: -6px;
z-index: -1;
background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.cc-infobox-ship-header-class {
position: relative;
z-index: 1;
padding-top: 2px;
padding-bottom: 8px;
font-family: "Alegreya", serif;
font-size: 0.9em;
line-height: 1.0;
text-align: center;
}
.cc-infobox-ship-header-class::before {
content: "";
pointer-events: none;
position: absolute;
top: -12px; right: -2px; bottom: 0; left: -2px;
z-index: -1;
background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.cc-infobox-ship-header-icon {
text-align: center;
}
.cc-infobox-ship-header-description {
margin: 12px 36px 0;
font-size: 0.8em;
line-height: 1.3em;
}
.cc-infobox-ship-stats-title,
.cc-infobox-ship-crew-title,
.cc-infobox-ship-construction-title,
.cc-infobox-ship-unlock-title {
text-align: center;
font-family: "Alegreya", serif;
margin-top: 24px;
}
.cc-infobox-ship-stats-fullrow {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 10% 6px;
}
.cc-infobox-ship-stats-fullrow div:nth-child(2) {
font-weight: bold;
}
.cc-infobox-ship-stats-row {
display: flex;
justify-content: space-evenly;
align-items: flex-end;
margin: 24px 10% 0;
}
.cc-infobox-ship-stats-row-col {
text-align: center;
line-height: 1.3;
}
.cc-infobox-ship-stats-row-col div:not(:first-child) {
font-weight: bold;
}
.cc-infobox-ship-crew-row {
display: flex;
justify-content: center;
gap: 12px;
}
.cc-infobox-ship-crew-row-col {
text-align: center;
}
.cc-infobox-ship-crew-row-col .cc-infobox-ship-crew-row-col-advanced {
position: relative;
z-index: 1;
}
.cc-infobox-ship-crew-row-col .cc-infobox-ship-crew-row-col-advanced::after {
content :"";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 5;
background-image: url("/images/mbhh_cove/6/66/T_PremiumCrewIndicator.png");
background-size: 100% 100%;
background-position: center center;
}
.cc-infobox-ship-crew-row-col div:first-child {
font-size: 0.8em;
}
.cc-infobox-ship-crew-row-col div:not(:first-child) {
font-weight: bold;
}
.cc-infobox-ship-construction-pier {
text-align: center;
margin-bottom: 16px;
}
.cc-infobox-ship-construction-table {
margin: 0 10%;
}
.cc-infobox-ship-construction-table table {
margin: 0 auto;
width: fit-content;
border-spacing: 3px;
}
.cc-infobox-ship-construction-table-qty {
font-weight: bold;
}
.cc-infobox-ship-unlock-requirements {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 10%;
}
.cc-infobox-ship-unlock-requirements-points {
display: flex;
gap: 4px;
}
.cc-infobox-ship-unlock-requirements-points > div {
display: flex;
align-items: center;
gap: 4px;
padding: 0 4px;
}
.cc-infobox-ship-unlock-requirements-points-notoriety {
background-color: #46592d;
}
.cc-infobox-ship-unlock-requirements-points-empire {
background-color: #6f302a;
}
.cc-infobox-ship-unlock-requirements-points-seafaring {
background-color: #334661;
}
.cc-infobox-ship-unlock-requirements-points-wealth {
background-color: #69154a;
}
.cc-reward-card {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 84px;
height: 116px;
padding: 10px 6px 4px 6px;
border-image-source: url("/images/mbhh_cove/0/0e/T_Button_ChoiceCard_Default.png");
border-image-slice: 11 fill;
border-image-width: 4;
font-size: 125%;
}
.cc-quest-page-timeline {
margin-left: -36px;
padding: 8px 0 18px 120px;
background-image: url("/images/mbhh_cove/d/df/T_SubtitleBackground_Edge.png");
background-size: 100% 100%;
background-position: -100px center;
background-repeat: no-repeat;
}
.cc-page-notice-spoiler {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
width: fit-content;
margin: auto;
padding: 8px 56px 12px;
margin-bottom: 24px;
}
.cc-page-notice-spoiler::before {
content: "";
pointer-events: none;
position: absolute;
z-index: 0;
top: 0; right: 0; bottom: 0; left: 0;
border-image-source: url("/images/mbhh_cove/a/a6/T_Banner_Medium_scaleable.png");
border-image-slice: 56 56 53 63 fill;
border-image-width: 35px 55px;
border-image-repeat: stretch;
border-image-outset: 24px 2px 16px;
filter: saturate(90%) invert(13%) sepia(90%) saturate(822%) hue-rotate(329deg) brightness(60%) contrast(95%);
}
.cc-page-notice-spoiler img {
position: relative;
background-image: url("/images/mbhh_cove/9/9a/T_warning_BloodStrong.png");
background-size: 100% 100%;
}
.cc-page-notice-spoiler div {
position: relative;
font-family: "Alegreya", serif;
}
.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;
font-family: "Alegreya", serif;
}
.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: var(--instance-sized-border-width) solid transparent;
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: 0;
background-size: 99% 99%;
background-position: center center;
background-repeat: no-repeat;
}
.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");
}
.cc-producer-icon {
position: relative;
z-index: 1;
display: inline-block;
padding: 4px;
}
.cc-producer-icon::before {
content: "";
pointer-events: none;
position: absolute;
z-index: 0;
top: 0; right: 0; bottom: 0; left: 0;
background-image: url("/images/mbhh_cove/e/e3/T_BG_BlackSmoke_Round.png"), url("/images/mbhh_cove/a/a4/T_ICO_BuildingSign_Shield.png");
background-size: 100% 90%, 110% 100%;
background-position: center center, center center;
background-repeat: no-repeat;
opacity: 0.5;
}
.cc-producer-icon img {
position: relative;
z-index: 1;
}
.cc-ship-tier-icon {
display: inline-block;
width: var(--instance-width);
height: var(--instance-width);
line-height: calc(var(--instance-width) * 0.9);
background-size: 115% 115%;
background-position: center center;
background-repeat: no-repeat;
text-align: center;
font-weight: bold;
font-size: var(--instance-font-size);
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 2px 2px 0 #000;
}
.cc-ship-tier-icon.cc-ship-tier-icon-none {
background-image: url("/images/mbhh_cove/4/4e/T_ICO_BuildingSign_ShieldFive.png");
}
.cc-ship-tier-icon.cc-ship-tier-icon-notoriety {
background-image: url("/images/mbhh_cove/6/63/T_Flag_Principle_Notoriety_Small.png");
}
.cc-ship-tier-icon.cc-ship-tier-icon-empire {
background-image: url("/images/mbhh_cove/2/25/T_Flag_Principle_Empire_Small.png");
background-position: calc(50% + 1px) calc(50% - 1px);
}
.cc-ship-tier-icon.cc-ship-tier-icon-seafaring {
background-image: url("/images/mbhh_cove/d/db/T_Flag_Principle_Sea_Small.png");
}
.cc-ship-tier-icon.cc-ship-tier-icon-wealth {
background-image: url("/images/mbhh_cove/b/b1/T_Flag_Principle_Wealth_small.png");
}
.cc-ship-stat-max {
color: #34ff00;
}
.rotate-180 {
transform: rotate(180deg);
}


