MediaWiki:Common.css: Difference between revisions
Hedgehoger97 (talk | contribs) Setup Home County wiki |
Hedgehoger97 (talk | contribs) Restore token icons after public URL move |
||
| Line 500: | Line 500: | ||
width: 1.25em; | width: 1.25em; | ||
height: 1.25em; | height: 1.25em; | ||
background: url('/images | background: url('/images/7/74/Home_County_Village_Token.png') center / contain no-repeat; | ||
} | } | ||
/* END HOME COUNTY CURRENCY */ | /* END HOME COUNTY CURRENCY */ | ||
Latest revision as of 15:55, 4 October 2026
/* Fancy Article List Table */
.articleList {
width: 100%;
box-sizing: border-box;
margin-top:1em;
overflow: auto;
border: 1px solid #41301C;
border-radius: 5px;
text-align: center;
font-size: 0.9em;
}
.articleList tr:nth-child(even):hover {
background-color: rgba(97,130,111,0.3);
}
.articleList tr:nth-child(even) {
background-color: rgba(228,211,198,0.18);
}
.articleList tr:nth-child(odd):hover {
background-color: rgba(97,130,111,0.3);
}
.articleList tr:nth-child(odd) {
background-color: rgba(228,204,184,0.3);
}
.articleList tr:nth-child(2).td {
border-top: 0;
}
.articleList tr:last-child.td {
border-bottom: 0;
}
.articleList th {
box-sizing: border-box;
border-bottom: solid 0.2em #cecece;
position: sticky;
top: 0;
background-color: rgba(214,194,177,0.35);
font-size: 0.9em;
font-weight: 700;
letter-spacing: 2px;
}
.articleList th:nth-child(1), .articleList td:nth-child(1) {
font-weight: 700;
width: 20%;
background-color: rgba(214, 194,177,0.3);
border-right: 0.1em double #cecece;
}
.articleList td {
padding: 0.2em;
box-sizing: border-box;
border-bottom: solid 0.05em #cecece;
border-left: solid 0.05em #cecece;
/*white-space: nowrap;*/
}
/*----------------------------------------------------------------
8. MISC --------------------------*/
/* Spoiler code */
.spoiler {
background-color: black;
color: black;
cursor: pointer;
}
.spoiler:hover {
color: white;
}
/* Native MediaWiki preview styling. */
:root { --background-color-base: #faf7f1; }
body { background: #e9e4da; }
.mw-page-container { background: #faf7f1; border-top: 6px solid #754556; }
h1, h2, h3, .portable-infobox .pi-title, .portable-infobox .pi-header { font-family: Georgia, serif; }
.portable-infobox { background: #f3ece1; border-color: #c4b79f; border-radius: 6px; }
.portable-infobox .pi-title, .portable-infobox .pi-header { background: #d9d3bd; color: #41301c; }
.portable-infobox .pi-data-label { color: #594832; }
.navbox { margin: 1em 0; padding: .5em; border: 1px solid #c4b79f; }
.dialogue-wrapper dd { margin-bottom: .5em; }
@media (max-width: 720px) { .portable-infobox { float: none; margin: 1em auto; max-width: 100%; } .articleList { display: block; overflow-x: auto; } }
/* BEGIN HOME COUNTY HOMEPAGE V1 */
@font-face {
font-family: 'Home County Menu';
src: url('/resources/assets/homecounty/source-serif4.ttf') format('truetype');
font-weight: 200 900;
font-display: swap;
}
/* Native MediaWiki tools stay available on articles and edit/history views. */
body, .mw-page-container { background: #e3d3c5; }
.mw-page-container { border-top: 0; }
.mw-body, .vector-header, .vector-page-toolbar, .mw-footer-container {
font-family: 'Home County Menu', Georgia, serif;
font-optical-sizing: none;
font-variation-settings: 'opsz' 20;
}
.mw-body h1, .mw-body h2, .mw-body h3 { font-family: 'Home County Menu', Georgia, serif; }
.portable-infobox { background: #e3d3c5; border-color: #b3a69b; }
.portable-infobox .pi-title, .portable-infobox .pi-header {
font-family: 'Home County Menu', Georgia, serif;
background: #d7cabf;
color: #000;
}
body.page-The_Home_County_Wiki.action-view .vector-header-container,
body.page-The_Home_County_Wiki.action-view .vector-column-start,
body.page-The_Home_County_Wiki.action-view .vector-column-end,
body.page-The_Home_County_Wiki.action-view .vector-page-toolbar,
body.page-The_Home_County_Wiki.action-view .mw-footer-container,
body.page-The_Home_County_Wiki.action-view #firstHeading,
body.page-The_Home_County_Wiki.action-view #siteSub,
body.page-The_Home_County_Wiki.action-view #contentSub,
body.page-The_Home_County_Wiki.action-view #catlinks { display: none; }
body.page-The_Home_County_Wiki.action-view .mw-page-container,
body.page-The_Home_County_Wiki.action-view .mw-page-container-inner,
body.page-The_Home_County_Wiki.action-view .mw-content-container,
body.page-The_Home_County_Wiki.action-view .mw-body {
display: block; max-width: none; width: 100%; padding: 0; margin: 0;
border: 0; background: #e3d3c5;
}
body.page-The_Home_County_Wiki.action-view .vector-page-titlebar::after { display: none; }
body.page-The_Home_County_Wiki.action-view .vector-body { padding: 0; }
body.page-The_Home_County_Wiki.action-view .mw-body-content { margin: 0; }
#hc-home {
--paper: #e3d3c5;
--panel: #dac6b3;
--control: #e6e7e5;
--outline: #423e36;
--ink: #000;
--muted: #59534d;
--link: #131b79;
--shadow: 3px 4px 3px rgba(38, 32, 25, .32);
width: min(1264px, calc(100% - 80px)); margin: 0 auto;
background: var(--paper); color: var(--ink);
font: 17px/1.5 'Home County Menu', Georgia, serif;
font-optical-sizing: none; font-variation-settings: 'opsz' 20;
-webkit-font-smoothing: antialiased;
}
#hc-home, #hc-home * { box-sizing: border-box; }
#hc-home a { color: var(--link); text-decoration: none; }
#hc-home a:hover { text-decoration: underline; text-underline-offset: 3px; }
#hc-home a.external { background: none; padding-right: 0; }
#hc-home a:focus-visible, #hc-home input:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
#hc-home p { margin: 0; }
#hc-home h1, #hc-home h2 { border: 0; color: var(--ink); font-family: inherit; }
#hc-home ul, #hc-home li { list-style: none; margin: 0; padding: 0; }
#hc-home .topbar {
display: flex; align-items: center; justify-content: space-between;
min-height: 74px; padding: 12px 0; border-bottom: 1px solid #b7a99b;
}
#hc-home .brand { flex: 0 0 auto; }
#hc-home .brand a, #hc-home .brand img { display: block; }
#hc-home .brand img { width: 108px; height: auto; }
#hc-home .page-tools { display: flex; gap: 23px; font-size: 13px; }
#hc-home .page-tools a { color: var(--muted); }
#hc-home .page-tools p, #hc-home .official-links p, #hc-home .wiki-links p { display: contents; }
#hc-home .masthead { text-align: center; padding: 27px 0 22px; }
#hc-home .masthead h1 { margin: 0; font-size: clamp(32px, 4vw, 53px); font-weight: 700; line-height: 1.15; letter-spacing: -.7px; }
/* Separate inset field and raised button, like the in-game Join village menu. */
#hc-home .hc-search { max-width: 790px; margin: 0 auto; }
#hc-home .hc-search .mw-inputbox-centered { margin: 0; text-align: left; }
#hc-home .hc-search form {
position: relative; display: flex; align-items: stretch; gap: 12px;
width: 100%; height: 55px; margin: 0; border: 0; background: transparent;
}
#hc-home .hc-search .cdx-text-input { flex: 1; min-width: 0; width: auto; }
#hc-home .hc-search input[name="search"] {
width: 100%; height: 100%; padding: 10px 18px; margin: 0;
border: 2px solid var(--outline); border-radius: 10px;
background: var(--control); color: var(--ink); font: inherit; font-size: 20px;
box-shadow: inset 1px 2px 3px rgba(49, 44, 37, .12);
}
#hc-home .hc-search input[name="search"]::placeholder { color: #777772; opacity: 1; }
#hc-home .hc-search input[type="submit"] {
width: 144px; min-width: 144px; height: auto; padding: 0 18px; margin: 0;
border: 2px solid var(--outline); border-radius: 10px;
background: var(--panel); color: var(--ink); font: inherit; font-size: 21px;
font-weight: 700; cursor: pointer; box-shadow: var(--shadow);
}
#hc-home .hc-search input[type="submit"]:hover { background: #e3cfbb; }
#hc-home .hc-search input[type="submit"]:active { transform: translate(1px, 2px); box-shadow: 1px 2px 2px #26201955; }
#hc-home .search-results {
position: absolute; z-index: 10; left: 0; right: 156px; top: calc(100% + 6px);
background: var(--paper); border: 2px solid var(--outline); border-radius: 10px;
padding: 5px 0; box-shadow: var(--shadow);
}
#hc-home .search-results a { display: block; padding: 9px 16px; font-size: 17px; }
#hc-home .search-results a:hover, #hc-home .search-results a:focus { background: var(--panel); }
#hc-home .official-links {
display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
gap: 12px 30px; padding: 24px 0 25px; font-size: 17px;
}
#hc-home .intro-grid { display: grid; grid-template-columns: 1.8fr 1fr; gap: 20px; margin-bottom: 24px; }
#hc-home .menu-panel, #hc-home .category, #hc-home .items-section {
min-width: 0; background: var(--panel); border: 2px solid var(--outline);
border-radius: 11px; box-shadow: var(--shadow);
}
#hc-home .menu-panel h2 {
margin: 0; padding: 13px 20px 11px; border-bottom: 1px solid #ac9784;
font-size: 25px; font-weight: 700; line-height: 1.2;
}
#hc-home .panel-content { padding: 15px 20px 18px; font-size: 16px; line-height: 1.55; }
#hc-home .game-panel .panel-content p + p { margin-top: 10px; }
#hc-home .update-list { margin-bottom: 9px; }
#hc-home .update-list li { display: flex; align-items: baseline; gap: 12px; margin-bottom: 7px; }
#hc-home .update-date { flex: 0 0 86px; color: var(--muted); font-size: 12px; white-space: nowrap; }
#hc-home .update-list a { min-width: 0; font-size: 15px; line-height: 1.3; }
#hc-home .updates-panel .panel-content > a { font-size: 13px; }
#hc-home .category-grid, #hc-home .items-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
#hc-home .category-grid { margin: 0 0 24px; }
#hc-home .category { padding: 18px 17px 14px; }
#hc-home .category h2 {
margin: 0 0 11px; padding: 0 0 12px; border-bottom: 1px solid #ac9784;
font-size: 25px; font-weight: 700; line-height: 1.2; letter-spacing: -.3px;
}
#hc-home .topic-entry { display: flex; align-items: center; gap: 11px; min-height: 47px; line-height: 1.25; }
#hc-home .topic-entry > span:last-child { min-width: 0; }
#hc-home .topic-entry > span:last-child a { color: var(--link); font-size: 17px; font-weight: 400; }
#hc-home .topic-list li.nested { padding-left: 16px; }
#hc-home .icon { width: 36px; height: 39px; display: flex; align-items: center; justify-content: center; flex: 0 0 36px; }
#hc-home .icon img { display: block; max-width: 36px; max-height: 36px; object-fit: contain; }
#hc-home .items-section { padding: 0 20px 17px; margin-bottom: 25px; }
#hc-home .section-heading { text-align: center; font-size: 27px; font-weight: 700; line-height: 1.2; margin: 0 -20px 10px; padding: 14px 20px 12px; border-bottom: 1px solid #ac9784; }
#hc-home .item-column { min-width: 0; padding: 0 15px 0 0; border-right: 1px solid #ac9784; }
#hc-home .item-column:last-child { border-right: 0; padding-right: 0; }
#hc-home .wiki-links { display: flex; justify-content: center; gap: 30px; font-size: 14px; padding: 17px 0; border-top: 1px solid #b7a99b; border-bottom: 1px solid #b7a99b; }
#hc-home .hc-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 11px; line-height: 1.8; padding: 20px 0 28px; color: var(--muted); }
#hc-home .hc-footer a { color: var(--muted); }
#hc-home .hc-footer > a { font-size: 13px; white-space: nowrap; }
@media (max-width: 1100px) {
#hc-home { width: calc(100% - 48px); }
#hc-home .category-grid, #hc-home .items-grid { gap: 16px; }
#hc-home .category { padding: 16px 13px 12px; }
#hc-home .category h2 { font-size: 22px; }
#hc-home .topic-entry { gap: 8px; }
#hc-home .topic-entry > span:last-child a { font-size: 16px; }
}
@media (max-width: 900px) {
#hc-home .intro-grid { grid-template-columns: 1fr; }
#hc-home .category-grid, #hc-home .items-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#hc-home .category { padding: 18px; }
#hc-home .category h2 { font-size: 25px; }
#hc-home .item-column:nth-child(even) { border-right: 0; padding-right: 0; }
}
@media (max-width: 620px) {
#hc-home { width: calc(100% - 28px); }
#hc-home .brand img { width: 82px; }
#hc-home .topbar { min-height: 65px; padding: 10px 0; }
#hc-home .page-tools { gap: 16px; font-size: 12px; }
#hc-home .masthead { padding: 23px 0 20px; }
#hc-home .masthead h1 { font-size: clamp(25px, 7.2vw, 38px); letter-spacing: -.5px; }
#hc-home .hc-search form { height: 48px; gap: 9px; }
#hc-home .hc-search input[name="search"] { font-size: 17px; padding: 9px 12px; border-radius: 9px; }
#hc-home .hc-search input[type="submit"] { width: 91px; min-width: 91px; padding: 0 10px; font-size: 18px; border-radius: 9px; }
#hc-home .search-results { right: 100px; }
#hc-home .search-results a { font-size: 15px; padding: 9px 12px; }
#hc-home .official-links { gap: 10px 21px; font-size: 15px; padding: 21px 6px 24px; }
#hc-home .intro-grid { gap: 16px; margin-bottom: 20px; }
#hc-home .menu-panel h2 { font-size: 23px; padding: 12px 15px 10px; }
#hc-home .panel-content { padding: 12px 15px 15px; font-size: 16px; }
#hc-home .category-grid { gap: 15px; margin-bottom: 20px; }
#hc-home .category { padding: 15px 12px 12px; }
#hc-home .category h2 { font-size: 22px; }
#hc-home .topic-entry { min-height: 44px; gap: 8px; }
#hc-home .topic-entry > span:last-child a { font-size: 15px; }
#hc-home .icon { width: 29px; flex-basis: 29px; }
#hc-home .icon img { max-width: 29px; max-height: 31px; }
#hc-home .topic-list li.nested { padding-left: 10px; }
#hc-home .items-section { padding: 0 13px 15px; }
#hc-home .section-heading { margin: 0 -13px 10px; font-size: 25px; }
#hc-home .items-grid { gap: 12px; }
#hc-home .item-column { padding-right: 10px; }
#hc-home .hc-footer { display: block; font-size: 10px; }
#hc-home .hc-footer > a { display: inline-block; margin-top: 12px; font-size: 12px; }
}
@media (max-width: 480px) {
#hc-home .category-grid { grid-template-columns: 1fr; }
#hc-home .category { padding: 17px; }
#hc-home .category h2 { font-size: 25px; }
#hc-home .category .topic-entry { min-height: 45px; gap: 13px; }
#hc-home .category .topic-entry > span:last-child a { font-size: 17px; }
#hc-home .category .icon { width: 34px; flex-basis: 34px; }
#hc-home .category .icon img { max-width: 34px; max-height: 34px; }
}
/* END HOME COUNTY HOMEPAGE V1 */
/* BEGIN HOME COUNTY ARTICLE THEME */
/* Shared game-menu palette. The approved homepage keeps its own layout. */
:root {
--hc-paper: #e3d3c5;
--hc-panel: #dac6b3;
--hc-rule: #b7a28f;
--hc-outline: #423e36;
--hc-ink: #000;
--hc-link: #131b79;
--hc-shadow: 3px 4px 3px rgba(38, 32, 25, .32);
--background-color-base: #e3d3c5;
--background-color-neutral: #dac6b3;
--background-color-interactive: #dac6b3;
--background-color-interactive-subtle: #dfccb9;
--color-base: #000;
--color-progressive: #131b79;
--border-color-base: #b7a28f;
}
body.skin-vector-2022 {
background: var(--hc-paper); color: var(--hc-ink);
font-family: 'Home County Menu', Georgia, serif;
font-optical-sizing: none; font-variation-settings: 'opsz' 20;
}
.skin-vector-2022 .mw-page-container { max-width: 1328px; margin: 0 auto; padding: 0 32px; background: var(--hc-paper); border: 0; }
.skin-vector-2022 .mw-page-container-inner { display: block; }
.skin-vector-2022 .mw-content-container { width: min(1040px, 100%); max-width: none; margin: 0 auto; }
.skin-vector-2022 .mw-body { border: 0; background: transparent; }
.skin-vector-2022 .mw-body .vector-body { font-size: 17px; line-height: 1.65; }
.skin-vector-2022 .mw-body a { color: var(--hc-link); }
.skin-vector-2022 .mw-body a.new { color: #8a1c43; }
.skin-vector-2022 a:focus-visible, .skin-vector-2022 button:focus-visible { outline: 2px solid var(--hc-link); outline-offset: 3px; }
.skin-vector-2022 .mw-body h1, .skin-vector-2022 .mw-body h2, .skin-vector-2022 .mw-body h3, .skin-vector-2022 .mw-body h4 { color: #000; font-family: 'Home County Menu', Georgia, serif; }
.skin-vector-2022 .firstHeading { font-size: 36px; font-weight: 700; line-height: 1.2; padding: 14px 0 10px; }
.skin-vector-2022 .mw-parser-output h2 { font-size: 27px; font-weight: 700; border-color: var(--hc-rule); }
.skin-vector-2022 .mw-parser-output h3 { font-size: 22px; font-weight: 700; }
.skin-vector-2022 .mw-heading { border-color: var(--hc-rule); }
.skin-vector-2022 .vector-page-titlebar::after { display: none; }
.skin-vector-2022 .mw-body-header { border-bottom: 1px solid var(--hc-rule); }
.skin-vector-2022 .vector-page-toolbar { border-color: var(--hc-rule); font-size: 14px; }
.skin-vector-2022 .vector-page-toolbar .vector-menu-content-list a { color: var(--hc-link); }
.skin-vector-2022 .vector-page-toolbar .selected a { color: #000; box-shadow: 0 2px var(--hc-outline); }
.skin-vector-2022 .vector-page-toolbar-container { background: transparent; }
/* No sidebar TOC, Appearance controls or pale sidebar fade strips. */
.skin-vector-2022 .vector-column-start,
.skin-vector-2022 .vector-column-end,
.skin-vector-2022 .vector-main-menu-landmark,
.skin-vector-2022 .vector-main-menu-container,
.skin-vector-2022 .vector-toc-landmark,
.skin-vector-2022 .vector-appearance-landmark,
.skin-vector-2022 #vector-appearance-dropdown,
.skin-vector-2022 #vector-appearance,
.skin-vector-2022 .vector-page-tools-landmark,
.skin-vector-2022 #vector-page-tools-dropdown,
.skin-vector-2022 .vector-sticky-header-toc-toggle { display: none; }
.skin-vector-2022 .vector-pinned-container::after { display: none; }
body.skin-vector-2022 .vector-page-titlebar .vector-toc-landmark,
body.skin-vector-2022 #vector-page-titlebar-toc { display: none; }
.skin-vector-2022 .vector-main-menu .vector-pinnable-header-toggle-button,
.skin-vector-2022 .vector-page-tools .vector-pinnable-header-toggle-button { display: none; }
/* Native header, genuine logo, search and dropdowns. */
.skin-vector-2022 .vector-header-container { background: var(--hc-paper); border: 0; }
.skin-vector-2022 .vector-header { width: min(1264px, calc(100% - 64px)); box-sizing: border-box; margin: 0 auto; min-height: 88px; background: transparent; border-bottom: 1px solid var(--hc-rule); padding: 12px 0; column-gap: 28px; }
.skin-vector-2022 .vector-header-start { min-width: 0; width: auto; flex: 0 0 auto; align-items: center; gap: 0; }
.skin-vector-2022 .mw-logo { position: relative; flex: 0 0 108px; width: 108px; height: 50px; margin: 0; }
.skin-vector-2022 .mw-logo::before { content: ''; display: block; width: 108px; height: 50px; background: url('/Special:Redirect/file/Logo.png') center / contain no-repeat; }
.skin-vector-2022 .mw-logo-container { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skin-vector-2022 .vector-header-end { align-items: center; gap: 20px; }
.skin-vector-2022 #p-search { min-width: 0; }
.skin-vector-2022 .vector-typeahead-search-container { max-width: 620px; }
.skin-vector-2022 .cdx-search-input { gap: 10px; border: 0; background: transparent; padding: 0; box-shadow: none; }
.skin-vector-2022 .cdx-search-input__input-wrapper { min-width: 0; }
.skin-vector-2022 .cdx-text-input__input { background: #e6e7e5; color: #000; border: 2px solid var(--hc-outline); border-radius: 9px; font-family: inherit; font-size: 16px; min-height: 42px; box-shadow: inset 1px 2px 3px rgba(49,44,37,.12); }
.skin-vector-2022 .cdx-search-input .cdx-text-input__input { border-radius: 9px; }
.skin-vector-2022 .cdx-search-input__end-button { border: 2px solid var(--hc-outline); border-radius: 9px; background: var(--hc-panel); color: #000; font-family: inherit; font-size: 17px; font-weight: 700; padding: 0 18px; box-shadow: var(--hc-shadow); }
.skin-vector-2022 .cdx-search-input__end-button:hover { background: #e3cfbb; }
.skin-vector-2022 .vector-dropdown-content, .skin-vector-2022 .cdx-menu { background: var(--hc-panel); color: #000; border: 2px solid var(--hc-outline); border-radius: 10px; box-shadow: var(--hc-shadow); }
.skin-vector-2022 .vector-dropdown-content .vector-menu-heading, .skin-vector-2022 .vector-pinnable-header { border-color: var(--hc-rule); }
.skin-vector-2022 .vector-dropdown-content a, .skin-vector-2022 .vector-user-links a { color: var(--hc-link); }
.skin-vector-2022 .vector-main-menu, .skin-vector-2022 .vector-page-tools { background: transparent; }
.skin-vector-2022 .vector-sticky-header { background: var(--hc-paper); border-bottom: 1px solid var(--hc-rule); box-shadow: none; }
/* In-article contents: native section links and numbering, with a hide/show control. */
.skin-vector-2022 .hc-contents, .skin-vector-2022 .mw-parser-output #toc {
display: table; max-width: 100%; background: var(--hc-panel);
border: 2px solid var(--hc-outline); border-radius: 10px;
box-shadow: var(--hc-shadow); padding: 14px 18px; margin: 22px 0 28px;
font-size: 16px; line-height: 1.5;
}
.skin-vector-2022 .hc-contents-title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.skin-vector-2022 .hc-contents-title strong { font-size: 21px; font-weight: 700; }
.skin-vector-2022 .hc-contents-toggle { appearance: none; border: 0; padding: 0; background: transparent; color: var(--hc-link); font: inherit; font-size: 14px; cursor: pointer; }
.skin-vector-2022 .hc-contents ul { list-style: none; margin: 0; padding: 0; }
.skin-vector-2022 .hc-contents li { margin: 5px 0; }
.skin-vector-2022 .hc-contents li ul { margin-left: 23px; }
.skin-vector-2022 .hc-contents-number { display: inline-block; min-width: 24px; margin-right: 6px; color: #000; }
.skin-vector-2022 .hc-contents a { text-decoration: none; }
.skin-vector-2022 .hc-contents a:hover { text-decoration: underline; }
.skin-vector-2022 .hc-contents [hidden] { display: none; }
/* Character and item infoboxes use the same panels, without inset highlights. */
.skin-vector-2022 .portable-infobox {
width: 280px; max-width: 100%; background: var(--hc-panel);
border: 2px solid var(--hc-outline); border-radius: 10px;
box-shadow: var(--hc-shadow); overflow: hidden; margin: 0 0 24px 28px;
font-family: inherit; font-size: 15px; line-height: 1.5;
}
.skin-vector-2022 .portable-infobox .pi-title { background: transparent; margin: 0; padding: 14px 16px 12px; border-bottom: 1px solid var(--hc-rule); font-size: 25px; font-weight: 700; }
.skin-vector-2022 .portable-infobox .pi-header { background: #d3bda8; color: #000; font-size: 18px; font-weight: 700; border: 0; padding: 10px 14px; }
.skin-vector-2022 .portable-infobox .pi-data { padding: 9px 14px; border-color: var(--hc-rule); }
.skin-vector-2022 .portable-infobox .pi-data-label { color: #000; font-size: 14px; flex: 0 0 36%; min-width: 0; }
.skin-vector-2022 .portable-infobox .pi-data-value { font-size: 14px; flex: 1 1 0; min-width: 0; }
.skin-vector-2022 .portable-infobox .pi-border-color { border-color: var(--hc-rule); }
.skin-vector-2022 .portable-infobox .pi-image { background: transparent; padding: 14px 0; }
/* Dense data tables remain real tables; mobile scroll is confined to their panel. */
.skin-vector-2022 .hc-table-scroll { max-width: 100%; overflow-x: auto; margin: 14px 0 28px; border: 2px solid var(--hc-outline); border-radius: 10px; background: var(--hc-panel); box-shadow: var(--hc-shadow); }
.skin-vector-2022 .hc-table-scroll > table { display: table; width: 100%; margin: 0; border: 0; border-radius: 0; border-collapse: collapse; background: var(--hc-panel); color: #000; font: 15px/1.5 'Home County Menu', Georgia, serif; text-align: left; }
.skin-vector-2022 .hc-table-scroll > table th { position: static; padding: 12px; background: #d3bda8; color: #000; border: 1px solid var(--hc-rule); font-size: 15px; font-weight: 700; letter-spacing: 0; }
.skin-vector-2022 .hc-table-scroll > table td { padding: 11px 12px; border: 1px solid var(--hc-rule); background: transparent; vertical-align: top; }
.skin-vector-2022 .hc-table-scroll > table tr:nth-child(even) { background: #dfccb9; }
.skin-vector-2022 .hc-table-scroll > table tr:hover { background: #e6d4c2; }
.skin-vector-2022 .hc-table-scroll > table th:first-child, .skin-vector-2022 .hc-table-scroll > table td:first-child { background: transparent; width: auto; }
.skin-vector-2022 .catlinks, .skin-vector-2022 .navbox { border: 2px solid var(--hc-outline); border-radius: 10px; background: var(--hc-panel); padding: 12px 16px; box-shadow: var(--hc-shadow); }
.skin-vector-2022 .catlinks, .skin-vector-2022 .mw-parser-output .navbox { box-sizing: border-box; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
.skin-vector-2022 .mw-parser-output table.navbox { border: 2px solid var(--hc-outline) !important; border-collapse: separate; border-spacing: 0; }
.skin-vector-2022 .navbox-title th { border-bottom: 1px solid var(--hc-rule) !important; }
.skin-vector-2022 .mw-footer-container { background: transparent; border-top: 1px solid var(--hc-rule); margin-top: 30px; }
.skin-vector-2022 .mw-footer { color: #59534d; padding: 24px 0; }
/* Keep native login, edit, history and special-page controls usable. */
.skin-vector-2022 .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button { background: var(--hc-panel); color: #000; border: 2px solid var(--hc-outline); border-radius: 8px; font-family: inherit; box-shadow: 2px 3px 2px rgba(38,32,25,.25); }
.skin-vector-2022 .oo-ui-textInputWidget .oo-ui-inputWidget-input, .skin-vector-2022 textarea { background: #e6e7e5; color: #000; border-color: var(--hc-outline); border-radius: 8px; }
.skin-vector-2022 .mw-ui-button { background: var(--hc-panel); color: #000; border: 2px solid var(--hc-outline); border-radius: 8px; font-family: inherit; }
.skin-vector-2022 .mw-ui-input { background: #e6e7e5; color: #000; border-color: var(--hc-outline); border-radius: 8px; font-family: inherit; }
.skin-vector-2022 .mw-search-profile-tabs { background: transparent; border-color: var(--hc-rule); }
@media (max-width: 1000px) {
.skin-vector-2022 .mw-page-container { padding: 0 24px; }
.skin-vector-2022 .vector-header { column-gap: 20px; }
}
@media (max-width: 720px) {
.skin-vector-2022 .mw-page-container { padding: 0 14px; }
.skin-vector-2022 .vector-header { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: calc(100% - 28px); min-height: 74px; column-gap: 12px; }
.skin-vector-2022 .vector-header-start { position: static; min-width: 0; width: auto; flex: 0 0 auto; gap: 8px; }
.skin-vector-2022 .mw-logo { flex-basis: 82px; width: 82px; height: 40px; }
.skin-vector-2022 .mw-logo::before { width: 82px; height: 40px; }
.skin-vector-2022 .vector-header-end { position: static; display: flex; justify-content: flex-end; width: auto; min-width: 0; flex: 1; gap: 8px; }
.skin-vector-2022 .vector-header #p-search { flex: 0 1 auto; width: auto; margin: 0; }
.skin-vector-2022 .vector-header .vector-button-flush-left { margin-left: 0; }
.skin-vector-2022 .vector-header .vector-button-flush-right { margin-right: 0; }
.skin-vector-2022 .firstHeading { font-size: 31px; }
.skin-vector-2022 .vector-page-toolbar-container { flex-wrap: wrap; }
.skin-vector-2022 #right-navigation { display: flex; max-width: 100%; margin-left: auto; }
.skin-vector-2022 #p-views { display: block; }
.skin-vector-2022 .mw-body .vector-body { font-size: 16px; }
.skin-vector-2022 .mw-parser-output h2 { font-size: 25px; }
.skin-vector-2022 .mw-parser-output h3 { font-size: 21px; }
.skin-vector-2022 .portable-infobox { float: none; margin: 20px auto 24px; }
.skin-vector-2022 .hc-contents { margin: 22px 0; }
.skin-vector-2022 .hc-table-scroll > table { min-width: 640px; }
.skin-vector-2022 .cdx-search-input__end-button { padding: 0 13px; }
}
/* END HOME COUNTY ARTICLE THEME */
/* BEGIN HOME COUNTY CURRENCY */
/* Floren_1: the original front-facing coin, 67x67 at (139,312)
in the unchanged 1146x811 game sprite sheet. */
.mw-parser-output .hc-price {
display: inline-flex;
align-items: center;
gap: .32em;
white-space: nowrap;
vertical-align: middle;
line-height: 1.35;
font-variant-numeric: tabular-nums;
}
.mw-parser-output .hc-floren-icon {
display: inline-block;
flex: 0 0 auto;
width: 1.25em;
height: 1.25em;
background-image: url('/Special:Redirect/file/Home_County_Floren_Sprites.png');
background-repeat: no-repeat;
background-size: 1710.447761% 1210.447761%;
background-position: 12.882298% 41.935484%;
}
.mw-parser-output .portable-infobox .pi-horizontal-group .hc-price {
margin: 2px 0;
}
/* Override Vector's small-screen block tables: price slots stay equally wide. */
.mw-parser-output .portable-infobox .pi-horizontal-group {
display: table;
width: 100%;
max-width: 100%;
table-layout: fixed;
border-collapse: collapse;
margin: 0;
}
.mw-parser-output .portable-infobox .pi-horizontal-group caption {
display: table-caption;
}
.mw-parser-output .portable-infobox .pi-horizontal-group th,
.mw-parser-output .portable-infobox .pi-horizontal-group td {
display: table-cell;
text-align: center;
}
/* Original game token artwork; match the floren's inline size and spacing. */
.mw-parser-output .hc-token-icon {
display: inline-block;
flex: 0 0 auto;
width: 1.25em;
height: 1.25em;
background: url('/images/7/74/Home_County_Village_Token.png') center / contain no-repeat;
}
/* END HOME COUNTY CURRENCY */
/* BEGIN HOME COUNTY WEATHER */
/* Original transparent game sprites, aligned with the existing floren treatment. */
.mw-parser-output .hc-weather {
display: inline-flex;
align-items: center;
gap: .35em;
vertical-align: middle;
white-space: nowrap;
line-height: 1.5;
margin-block: .08em;
}
.mw-parser-output .hc-weather-icon {
display: inline-block;
width: 1.8em;
height: 1.8em;
object-fit: contain;
flex: 0 0 auto;
}
.mw-parser-output .hc-weather-any-icons {
display: inline-flex;
align-items: center;
isolation: isolate;
padding-right: .08em;
}
.mw-parser-output .hc-weather-any-icons .hc-weather-icon {
width: 1.8em;
height: 1.8em;
}
.mw-parser-output .hc-weather-any-icons .hc-weather-icon + .hc-weather-icon { margin-left: -.45em; }
.mw-parser-output .hc-fish-entry {
display: inline-flex;
align-items: center;
gap: .7em;
white-space: nowrap;
min-height: 38px;
}
.mw-parser-output .hc-fish-entry > .mw-file-element {
display: inline-flex;
justify-content: center;
align-items: center;
width: 48px;
height: 36px;
flex: 0 0 48px;
}
.mw-parser-output .hc-fish-entry .mw-file-element img {
max-width: 48px;
max-height: 36px;
width: auto;
height: auto;
object-fit: contain;
}
.skin-vector-2022 .hc-table-scroll > .hc-fish-table td { vertical-align: middle; }
.skin-vector-2022 .hc-table-scroll > .hc-fish-table th:nth-child(4),
.skin-vector-2022 .hc-table-scroll > .hc-fish-table td:nth-child(4) { min-width: 170px; }
.mw-parser-output .hc-fish-entry small { white-space: normal; }
/* END HOME COUNTY WEATHER */
/* BEGIN HOME COUNTY ITEM TABLES */
/* Original inventory artwork in consistently sized table slots. */
.mw-parser-output .hc-item-entry {
display: inline-flex;
align-items: center;
gap: .7em;
min-height: 38px;
}
.mw-parser-output :is(.hc-item-entry, .hc-fish-entry) > span[typeof~="mw:File"] {
display: inline-flex;
justify-content: center;
align-items: center;
width: 48px;
height: 36px;
flex: 0 0 48px;
}
.mw-parser-output :is(.hc-item-entry, .hc-fish-entry) img.mw-file-element {
max-width: 48px;
max-height: 36px;
width: auto;
height: auto;
object-fit: contain;
}
.skin-vector-2022 .hc-item-table td { vertical-align: middle; }
.skin-vector-2022 .hc-item-table td:first-child { min-width: 150px; }
/* END HOME COUNTY ITEM TABLES */
/* BEGIN HOME COUNTY AREAS */
.mw-parser-output .hc-area-map { margin: 1.2em 0; max-width: 1100px; }
.mw-parser-output .hc-area-map > span { display: block; }
.mw-parser-output .hc-area-map img { display: block; width: 100%; height: auto; border-radius: 8px; }
.mw-parser-output .hc-area-back { margin: 0 0 1em; }
.mw-parser-output .hc-area-table td:first-child { min-width: 150px; font-weight: bold; }
/* END HOME COUNTY AREAS */
/* BEGIN HOME COUNTY ACCOUNT LINK STYLE */
/* Match the native account link to the homepage page tools. */
.skin-vector-2022 .vector-user-links a[href*="Special:UserLogin"] {
color: #59534d;
font: 400 13px/1.5 'Home County Menu', Georgia, serif;
font-optical-sizing: none;
font-variation-settings: 'opsz' 20;
-webkit-font-smoothing: antialiased;
text-decoration: none;
}
.skin-vector-2022 .vector-user-links a[href*="Special:UserLogin"]:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 620px) {
.skin-vector-2022 .vector-user-links a[href*="Special:UserLogin"] {
font-size: 12px;
}
}
/* END HOME COUNTY ACCOUNT LINK STYLE */