Difference between revisions of "MediaWiki:Common.css"

Revision as of 19:00, 10 October 2025

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

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

/* ===== Global background (drawn on the page only) =====
   Layer order: 1) banner patch (top-left), 2) dark column,
                3) parchment fill. No element sizing, no pushes. */
html, body {
  margin: 0 !important;
  background:
    url("/Special:FilePath/BannerImage.png") left top no-repeat,
    linear-gradient(to bottom, var(--hf-left-top), var(--hf-left-bot)) left top repeat-y,
    var(--hf-parchment);
  background-size:
    var(--hf-banner-w) var(--hf-banner-h),
    var(--hf-sidebar-w) 100%,
    auto;
  background-attachment: fixed, fixed, fixed;
  background-color: var(--hf-parchment);
}

/* ===== Site chrome kept 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; }

/* ===== Main content stays opaque parchment (so 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: sidebar width + content offset (single source of truth) ===== */
#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 look (flat, compact) ===== */
#mw-panel, .mw-sidebar, #column-one {
  background: linear-gradient(to bottom, #2F2D2B 0%, #1E1E1D 100%) !important;
  border-right: 1px solid rgba(217,215,209,0.20);
  padding: 10px 8px 24px;
  color: #EEEDEB !important;
}

#mw-panel .vector-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;
}

/* Section headers (flat grey bars) */
#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;
}

/* Sidebar lists + links (compact 10px) */
#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 dividers between groups */
#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-image: url("/Special:FilePath/Holdfast_Logo_White_Gold_Compass.png") !important;
  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;
}

/* Headings weight/spacing */
.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; }

/* --- Let the banner show through the left sidebar & logo area --- */
#mw-panel,
.mw-sidebar,
#column-one,
#p-logo,
#p-logo a,
.mw-wiki-logo,
#mw-panel .vector-menu,
#mw-panel .vector-main-menu,
#mw-panel .vector-menu-content,
#mw-panel .vector-menu-content-list {
  background: transparent !important;   /* stop covering the page background */
}

/* Keep sidebar width + content offset you already set */
#mw-panel, .mw-sidebar, #column-one { width: var(--hf-sidebar-w, 200px) !important; }
#content, .mw-body, .vector-body, .mw-content-container {
  margin-left: var(--hf-sidebar-w, 200px) !important;
}

/* Sidebar text/link colors remain readable over the dark column */
#mw-panel, .mw-sidebar, #column-one { color: #EEEDEB !important; }
#mw-panel a, .mw-sidebar a, #column-one a { color: #EEEDEB !important; text-decoration: none; font-size: 10px !important; }
#mw-panel a:hover, .mw-sidebar a:hover, #column-one a:hover { color: #5A65EA !important; text-decoration: underline; }