Difference between revisions of "MediaWiki:Vector.css"

Revision as of 20:00, 24 September 2025

/* ===== Vector skin overrides for Holdfast Wiki ===== */

/* --- Brand variables --- */
:root {
  --hf-green: #3c553c;
  --hf-fg: #16181d;
  --hf-page-bg: #f4f1e6;   /* parchment */
  --hf-card-bg: #ffffff;   /* content card */
  --hf-card-border: #dad5c8;

  --hf-link: #1e4ed8;
  --hf-link-hover: #153ea8;
  --hf-link-visited: #6b21a8;

  --hf-sidebar-w: 11em;    /* keep this in one place */
}

/* --- Logo block (don’t crop) --- */
#p-logo { padding: .6rem .5rem; box-sizing: content-box; }
#p-logo a, #p-logo img { max-width: 100%; height: auto; display: block; }

/* --- Fixed full-height sidebar, single definition --- */
#mw-panel {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--hf-sidebar-w);
  background: var(--hf-green);
  padding-top: 5em;              /* space for logo & tabs */
  border-right: 1px solid rgba(0,0,0,.2);
  z-index: 1;
}
/* Sidebar links on dark bg */
#mw-panel .portal .body li a { color: #e9ebe5; display:block; padding:.25em .4em; border-radius:3px; }
#mw-panel .portal .body li a:hover { background: rgba(255,255,255,.08); color:#fff; }

/* --- Make top strip match green and shift right to clear sidebar --- */
#mw-head-base,
#mw-head,
#p-logo { background: var(--hf-green); }

#mw-head-base,
#mw-head { margin-left: var(--hf-sidebar-w); }

/* Vector tab text contrast on green */
.vector-menu-tabs a { color:#fff; }
.vector-menu-tabs a:hover { background: rgba(255,255,255,.08); color:#fff; }
.vector-menu-tabs .selected a { background: rgba(255,255,255,.12); }

/* --- Page + content backgrounds --- */
body { background: var(--hf-page-bg); color: var(--hf-fg); }

/* Content card */
#content {
  background: var(--hf-card-bg);
  border: 1px solid var(--hf-card-border);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  margin-left: var(--hf-sidebar-w);   /* line up with fixed sidebar */
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  position: relative; z-index: 2;
}

/* Optional: keep inner container from getting too wide */
.vector-body .mw-content-container { max-width: 1080px; padding-inline: 1rem; }

/* --- HeaderTemplate (your hero) --- */
:root {
  --hf-hero-bg: var(--hf-green);
  --hf-hero-fg: #fff;
  --hf-hero-border: #ccc;
}
.hf-hero { margin-top: .7em; }
.hf-hero-table {
  width: 100%;
  border: 1px solid var(--hf-hero-border);
  border-radius: 12px;
  background: var(--hf-hero-bg);
  overflow: hidden;
}
.hf-hero-left, .hf-hero-right { color: var(--hf-hero-fg); vertical-align: middle; padding: .6em .8em; }
.hf-hero-left { width:45%; text-align:center; white-space:nowrap; }
.hf-hero-right { font-size:125%; text-align:center; }
.hf-hero-title { font-size:195%; font-weight:700; margin:0; }

/* --- [Show]/[Hide] custom toggles styled like links --- */
span[class^="mw-customtoggle-"] { color:#0645ad; cursor:pointer; text-decoration:underline; font-weight:normal; }
span[class^="mw-customtoggle-"]:hover { color:#0b0080; }

/* --- Links (better contrast on parchment) --- */
.mw-parser-output a { color: var(--hf-link); }
.mw-parser-output a:hover { color: var(--hf-link-hover); text-decoration: underline; }
.mw-parser-output a:visited { color: var(--hf-link-visited); }