Difference between revisions of "MediaWiki:Vector.css"

Revision as of 20:17, 24 September 2025

/* ===== Vector skin overrides for Holdfast Wiki – Neutral Theme ===== */

/* --- Variables (single source of truth) --- */
:root{
  --hf-sidebar-w: 13em;          /* sidebar width */
  --hf-logo-h: 236px;            /* logo height */

  /* page & cards */
  --hf-page-bg: #eae1cc;         /* parchment */
  --hf-card-bg: #fffdf6;         /* content card */
  --hf-card-border: #d6ceb9;
  --hf-shadow: 0 1px 2px rgba(0,0,0,.06);

  /* sidebar */
  --hf-side-bg: #c5b08a;         /* tan */
  --hf-side-fg: #2b2b2b;
  --hf-side-link: #1b1b1b;
  --hf-side-link-hover: #000;

  /* text & links */
  --hf-fg: #1e1e1e;
  --hf-link: #1e4ed8;
  --hf-link-hover: #153ea8;
  --hf-link-visited: #6b21a8;

  /* headings / underline */
  --hf-h2-fg: #1c1c1c;
  --hf-h2-underline: #d8cfb8;
}

/* --- Global page layout --- */
body{
  background: var(--hf-page-bg);
  color: var(--hf-fg);
}
.vector-body .mw-content-container{
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* --- 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);   /* clear the fixed sidebar */
  box-shadow: var(--hf-shadow);
  position: relative;
  z-index: 2;
}

/* --- Sidebar (tan block, full height) --- */
#mw-panel{
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--hf-sidebar-w);
  background: var(--hf-side-bg);
  color: var(--hf-side-fg);
  border-right: 1px solid rgba(0,0,0,.15);
  padding-top: calc(var(--hf-logo-h) + .75rem); /* room for logo */
  z-index: 1;
}

/* Sidebar logo block */
#p-logo{
  background: var(--hf-side-bg);
  padding: .75rem .6rem 0;
}
#p-logo a{
  display: block;
  height: var(--hf-logo-h);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  text-indent: -9999px;  /* hide link text */
  overflow: hidden;
}

/* Sidebar links */
#mw-panel .portal .body li a{
  color: var(--hf-side-link);
  display: block;
  padding: .25em .45em;
  border-radius: 4px;
  text-decoration: none;
}
#mw-panel .portal .body li a:hover{
  background: rgba(0,0,0,.06);
  color: var(--hf-side-link-hover);
}

/* --- Top header & tabs --- */
#mw-head-base,
#mw-head{
  background: linear-gradient(#d9c9a6, #cbb78f);
  margin-left: var(--hf-sidebar-w);
}
.vector-menu-tabs a{
  color: #1b1b1b;
}
.vector-menu-tabs a:hover{
  background: rgba(0,0,0,.06);
}
.vector-menu-tabs .selected a{
  background: rgba(255,255,255,.35);
  border-color: rgba(0,0,0,.15);
}

/* --- Headings (clean, underlined) --- */
.mw-parser-output h2{
  background: transparent !important;
  color: var(--hf-h2-fg);
  font-weight: 800;
  letter-spacing: .2px;
  margin: 1.1rem 0 .6rem;
  padding: .1em 0;
  border-bottom: 2px solid var(--hf-h2-underline);
  border-radius: 0;
}
.mw-parser-output h3{
  border-bottom: 1px solid var(--hf-h2-underline);
  padding-bottom: .15em;
  margin-top: .9rem;
}

/* SectionTemplate / custom section bars → solid tan */
.hf-section,
#mf-content {
  background: #c5b08a !important;     /* tan */
  color: #1b1b1b !important;          /* dark text */
  font-weight: 700;
  font-variant: small-caps;
  padding: 0.35em 0.6em !important;
  margin: 1rem 0 .6rem !important;
  border: 1px solid #b3a07c !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}


/* Kill leftover inline #3c553c backgrounds */
.mw-parser-output [style*="#3c553c"]{
  background: transparent !important;
  color: inherit !important;
  border-color: var(--hf-h2-underline) !important;
}

/* --- Hero / HeaderTemplate --- */
.hf-hero{ margin-top: .7em; }
.hf-hero-table{
  width: 100%;
  border: 1px solid var(--hf-card-border);
  border-radius: 12px;
  background: var(--hf-card-bg);
  color: var(--hf-fg);
  box-shadow: var(--hf-shadow);
}
.hf-hero-left,
.hf-hero-right{
  padding: .7em .9em;
}
.hf-hero-title{
  font-size: 195%;
  font-weight: 800;
  margin: 0;
}

/* --- Links --- */
.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); }

/* --- [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; }

/* --- Tables --- */
.wikitable{
  background: #fffefa;
  border-color: var(--hf-card-border);
  border-radius: 10px;
  overflow: hidden;
}
.wikitable > * > tr > th{
  background: #f4eedb;
  border-bottom-color: var(--hf-card-border);
  font-weight: 700;
}
.wikitable tr:nth-child(even) td{ background: #fff9eb; }

/* --- Code blocks --- */
pre,
.syntaxhighlight{
  background: #232323 !important;
  color: #e7e7e7 !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 10px;
  padding: .8em 1em !important;
}