Difference between revisions of "MediaWiki:Common.css"

Latest revision as of 23:51, 10 October 2025

/*************************************************
 * Holdfast Wiki – Global Theme (compact, fixed)
 * Banner (top-left) + Dark Left Column + Parchment
 *************************************************/

/* ===== Variables ===== */
:root{
  --hf-banner-w: 1250px;        /* banner width */
  --hf-banner-h: 300px;         /* banner height */
  --hf-sidebar-w: 200px;        /* actual sidebar width + content offset */
  --hf-parchment: #E1DCCE;      /* base page background */
  --hf-left-top: #2F2D2B;       /* dark column gradient top */
  --hf-left-bot: #1E1E1D;       /* dark column gradient bottom */
}

/* ===== Page background only (no element sizing) =====
   Order: 1) banner patch, 2) dark column from top to bottom, 3) parchment fill */
/* ===== Page Background (banner + top dark strip + left column + parchment) ===== */
/* ===== Page Background (banner + extended dark top + dark column + parchment) ===== */
html, body {
  margin: 0 !important;
  background:
    /* 1) Holdfast banner (top-left) */
    url("/Special:FilePath/BannerImage.png") left top no-repeat,

    /* 2) Extended dark top gradient (covers full top band behind banner and header) */
    linear-gradient(to right, var(--hf-left-top) 0%, var(--hf-left-bot) 100%) left top no-repeat,

    /* 3) Vertical dark column for sidebar */
    linear-gradient(to bottom, var(--hf-left-top) 0%, var(--hf-left-bot) 100%) left top repeat-y,

    /* 4) Parchment base */
    var(--hf-parchment);
  background-size:
    var(--hf-banner-w) var(--hf-banner-h),   /* banner image */
    100% 400px,                              /* dark top bar — extend higher */
    var(--hf-sidebar-w) 100%,                /* vertical sidebar column */
    auto;                                   /* parchment fill */
  background-position:
    left top,
    left top,
    left top,
    left top;
  background-attachment: fixed, fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-color: var(--hf-parchment);
  z-index: 0;
}



/* ===== Keep site chrome transparent so the page bg shows ===== */
#mw-page-base, #mw-head-base, #mw-head, .vector-header-container,
#mw-panel, #column-one, .mw-sidebar { background: transparent !important; }

/* ===== Content is opaque parchment so the dark column doesn't bleed ===== */
#content, .mw-body, .vector-body .mw-body,
.mw-workspace-container, .mw-content-container{
  background: var(--hf-parchment) !important;
  position: relative;
  z-index: 1;
}

/* ===== Layout: single source of truth for widths/offsets ===== */
#mw-panel, .mw-sidebar, #column-one{ width: var(--hf-sidebar-w) !important; box-sizing: border-box; }
#content, .mw-body, .vector-body, .mw-content-container{ margin-left: var(--hf-sidebar-w) !important; }

/* ===== Sidebar: flat, compact; let background show through ===== */
#mw-panel .vector-menu,
#mw-panel .vector-main-menu,
#mw-panel .vector-menu-content,
#mw-panel .vector-menu-content-list,
#column-one .portlet, #column-one .pBody{
  background: transparent !important; border: 0 !important; padding: 0; margin: 0;
}

#mw-panel, .mw-sidebar, #column-one{ color: #EEEDEB !important; padding: 10px 8px 24px; }

#mw-panel .portal .portal-title,
#mw-panel .vector-menu-heading,
#column-one h3, .mw-sidebar h2{
  background: #63635B !important; color: #EEEDEB !important;
  padding: 5px 8px; margin: 12px 4px 4px; border: 0 !important;
  font: 700 10px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .2px;
}

#mw-panel .vector-menu-content-list, #column-one .pBody ul{ list-style: none; padding: 0; margin: 6px 0 0; }
#mw-panel .vector-menu-content-list > li, #column-one .pBody ul li{ padding: 3px 6px; line-height: 1.35; }

#mw-panel a, #column-one a, .mw-sidebar a{
  display: block; padding: 2px 4px;
  color: #EEEDEB !important; text-decoration: none;
  font: 400 10px/1.35 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#mw-panel a:hover, #column-one a:hover, .mw-sidebar a:hover{
  background: rgba(255,255,255,0.08); color: #EEEDEB !important; text-decoration: none;
}

/* Optional thin group divider */
#mw-panel .portal, #column-one .portlet{ margin-top: 10px; padding-top: 6px; border-top: 1px solid rgba(217,215,209,0.12); }
#mw-panel .portal:first-child, #column-one .portlet:first-child{ border-top: 0; margin-top: 0; padding-top: 0; }

/* Discord button (flat) */
#mw-panel a.external[href*="discord"]{
  background: #5A65EA; color: #fff !important;
  display: inline-block; padding: 8px 10px; margin: 6px 0 10px;
  border-radius: 4px; border: 1px solid rgba(0,0,0,0.15);
  font: 700 11px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#mw-panel a.external[href*="discord"]:hover{ background: #545DD9; }

/* ===== Branding: Holdfast compass logo ===== */
#p-logo a, .mw-wiki-logo{
  background: url("/Special:FilePath/Holdfast_Logo_White_Gold_Compass.png") center/contain no-repeat !important;
  width: 150px !important; height: 150px !important; display: block;
}
#p-logo-text, .mw-wiki-logo-text{ display: none !important; }

/* ===== Typography: Helvetica Neue (14px main / 10px sidebar) ===== */
html, body, .mw-body, .vector-body, .mw-content-text, #content,
.vector-header-container, .vector-menu, .vector-menu-content, .vector-menu-heading,
#p-logo-text, #firstHeading, .mw-parser-output, .mw-parser-output p,
.mw-parser-output li, .mw-parser-output td, .mw-parser-output th{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 14px !important; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-weight: 400; letter-spacing: .2px; color: #16181D;
}

.mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3,
.mw-parser-output h4, .mw-parser-output h5{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 600 !important; letter-spacing: .3px;
}

/* Code blocks keep monospace */
code, pre, .mw-code{ font-family: "Courier New", Courier, monospace !important; }

/* ===== Align page tabs with content edge (Vector legacy + Vector-2022) ===== */
:root {
  --hf-content-pad: 16px; /* left inner padding of the content column */
}

/* Your content gets this padding; keep it explicit so we can reuse it */
#content, .mw-body, .mw-content-container {
  padding-left: var(--hf-content-pad);
}

/* 1) Legacy Vector (tabs live in #left-navigation / #right-navigation) */
#mw-head #left-navigation,
#mw-head #right-navigation {
  position: relative;
  left: calc(var(--hf-sidebar-w) + var(--hf-content-pad)) !important;
  margin-left: 0 !important; /* nuke any default margin */
}

/* Also zero margins on the tab lists themselves so they don't re-offset */
#mw-head #p-views,
#mw-head .vectorTabs,
#mw-head .vector-menu-tabs {
  margin-left: 0 !important;
}

/* 2) Vector-2022 (tabs / page tools bar) */
.vector-header-container .vector-page-toolbar,
.vector-header-container .vector-menu-tabs {
  position: relative;
  left: calc(var(--hf-sidebar-w) + var(--hf-content-pad)) !important;
  margin-left: 0 !important;
  z-index: 5; /* stay above the banner image */
}