Difference between revisions of "MediaWiki:Vector.css"

From Holdfast: Nations At War
Jump to navigation Jump to search
Line 1: Line 1:
−
/* ===== Vector skin overrides for Holdfast Wiki ===== */
+
/* ===== Vector skin overrides for Holdfast Wiki – Neutral Theme ===== */
  
−
/* --- Brand variables --- */
+
/* --- Variables (single source of truth) --- */
−
:root {
+
:root{
−
   --hf-green: #3c553c;
+
   --hf-sidebar-w: 13em;         /* sidebar width */
−
  --hf-fg: #16181d;
+
   --hf-logo-h: 236px;           /* logo height */
−
  --hf-page-bg: #f4f1e6;  /* parchment */
 
−
   --hf-card-bg: #ffffff;   /* content card */
 
−
  --hf-card-border: #dad5c8;
 
  
 +
  /* 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: #1e4ed8;
 
   --hf-link-hover: #153ea8;
 
   --hf-link-hover: #153ea8;
 
   --hf-link-visited: #6b21a8;
 
   --hf-link-visited: #6b21a8;
  
−
   --hf-sidebar-w: 12em;   /* keep this in one place */
+
  /* headings / underline */
 +
  --hf-h2-fg: #1c1c1c;
 +
   --hf-h2-underline: #d8cfb8;
 
}
 
}
  
−
/* --- Logo block (don’t crop) --- */
+
/* --- Global page layout --- */
−
#p-logo { padding: .6rem .5rem; box-sizing: content-box; }
+
body{
−
#p-logo a, #p-logo img { max-width: 100%; height: auto; display: block; }
+
  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;
 +
}
  
−
/* --- Fixed full-height sidebar, single definition --- */
+
/* --- Sidebar (tan block, full height) --- */
−
#mw-panel {
+
#mw-panel{
 
   position: fixed;
 
   position: fixed;
 
   top: 0; left: 0; bottom: 0;
 
   top: 0; left: 0; bottom: 0;
 
   width: var(--hf-sidebar-w);
 
   width: var(--hf-sidebar-w);
−
   background: var(--hf-green);
+
   background: var(--hf-side-bg);
−
   padding-top: 5em;             /* space for logo & tabs */
+
   color: var(--hf-side-fg);
−
   border-right: 1px solid rgba(0,0,0,.2);
+
   border-right: 1px solid rgba(0,0,0,.15);
 +
  padding-top: calc(var(--hf-logo-h) + .75rem); /* room for logo */
 
   z-index: 1;
 
   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 --- */
+
/* Sidebar logo block */
−
#mw-head-base,
+
#p-logo{
−
#mw-head,
+
  background: var(--hf-side-bg);
−
#p-logo { background: var(--hf-green); }
+
  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-base,
−
#mw-head { margin-left: var(--hf-sidebar-w); }
+
#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);
 +
}
  
−
/* Vector tab text contrast on green */
+
/* --- Headings (clean, underlined) --- */
−
.vector-menu-tabs a { color:#fff; }
+
.mw-parser-output h2{
−
.vector-menu-tabs a:hover { background: rgba(255,255,255,.08); color:#fff; }
+
  background: transparent !important;
−
.vector-menu-tabs .selected a { background: rgba(255,255,255,.12); }
+
  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;
 +
}
  
−
/* --- Page + content backgrounds --- */
+
/* SectionTemplate / old green bars */
−
body { background: var(--hf-page-bg); color: var(--hf-fg); }
+
.hf-section,
 +
#mf-content{
 +
  background: transparent !important;
 +
  color: var(--hf-h2-fg) !important;
 +
  border: 0 !important;
 +
  padding: 0 !important;
 +
  margin: 1.1rem 0 .6rem !important;
 +
  border-bottom: 2px solid var(--hf-h2-underline) !important;
 +
  border-radius: 0 !important;
 +
}
  
−
/* Content card */
+
/* Kill leftover inline #3c553c backgrounds */
−
#content {
+
.mw-parser-output [style*="#3c553c"]{
−
   background: var(--hf-card-bg);
+
   background: transparent !important;
−
   border: 1px solid var(--hf-card-border);
+
   color: inherit !important;
−
   border-radius: 10px;
+
   border-color: var(--hf-h2-underline) !important;
−
  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 */
+
/* --- Hero / HeaderTemplate --- */
−
.vector-body .mw-content-container { max-width: 1080px; padding-inline: 1rem; }
+
.hf-hero{ margin-top: .7em; }
−
 
+
.hf-hero-table{
−
/* --- 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%;
 
   width: 100%;
−
   border: 1px solid var(--hf-hero-border);
+
   border: 1px solid var(--hf-card-border);
 
   border-radius: 12px;
 
   border-radius: 12px;
−
   background: var(--hf-hero-bg);
+
   background: var(--hf-card-bg);
−
   overflow: hidden;
+
   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;
 
}
 
}
−
.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; }
+
/* --- Links --- */
−
.hf-hero-right { font-size:125%; text-align:center; }
+
.mw-parser-output a{ color: var(--hf-link); }
−
.hf-hero-title { font-size:195%; font-weight:700; margin:0; }
+
.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 --- */
 
/* --- [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-"]{
−
span[class^="mw-customtoggle-"]:hover { color:#0b0080; }
+
  color: #0645ad;
 +
  cursor: pointer;
 +
  text-decoration: underline;
 +
  font-weight: normal;
 +
}
 +
span[class^="mw-customtoggle-"]:hover{ color: #0b0080; }
  
−
/* --- Links (better contrast on parchment) --- */
+
/* --- Tables --- */
−
.mw-parser-output a { color: var(--hf-link); }
+
.wikitable{
−
.mw-parser-output a:hover { color: var(--hf-link-hover); text-decoration: underline; }
+
  background: #fffefa;
−
.mw-parser-output a:visited { color: var(--hf-link-visited); }
+
  border-color: var(--hf-card-border);
−
 
+
  border-radius: 10px;
−
/* ==== LOGO FIX (Vector) ==== */
+
  overflow: hidden;
−
/* Set a single source of truth for logo height */
+
}
−
:root { --hf-logo-h: 236px; }  /* adjust to your actual logo height */
+
.wikitable > * > tr > th{
−
 
+
  background: #f4eedb;
−
/* Logo container: keep your green bg, add a bit of padding */
+
   border-bottom-color: var(--hf-card-border);
−
#p-logo {
+
   font-weight: 700;
−
   background: var(--hf-green);
 
−
   padding: .5rem .5rem 0;   /* top/side padding above the logo */
 
 
}
 
}
 +
.wikitable tr:nth-child(even) td{ background: #fff9eb; }
  
−
/* The logo itself is a background on the <a> element; it needs height */
+
/* --- Code blocks --- */
−
#p-logo a {
+
pre,
−
  display: block;
+
.syntaxhighlight{
−
  height: var(--hf-logo-h);
+
   background: #232323 !important;
−
   background-size: contain;       /* scale to fit */
+
   color: #e7e7e7 !important;
−
   background-repeat: no-repeat;
+
   border: 1px solid #1a1a1a !important;
−
   background-position: left center;
+
   border-radius: 10px;
−
   text-indent: -9999px;           /* hide the “Main Page” text */
+
   padding: .8em 1em !important;
−
   overflow: hidden;
 
 
}
 
}

Revision as of 20:15, 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 / old green bars */
.hf-section,
#mf-content{
  background: transparent !important;
  color: var(--hf-h2-fg) !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 1.1rem 0 .6rem !important;
  border-bottom: 2px solid var(--hf-h2-underline) !important;
  border-radius: 0 !important;
}

/* 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;
}
Retrieved from "https://wiki.holdfastgame.com/index.php?title=MediaWiki:Vector.css&oldid=3726"