Difference between revisions of "MediaWiki:Common.css"

From Holdfast: Nations At War
Jump to navigation Jump to search
Line 1: Line 1:
/*************************************************
+
/*****************************************************
  * Holdfast Wiki Global Theme (compact, fixed)
+
  * HOLDFAST WIKI MODERN THEME  (2025-10-10)
  * Banner (top-left) + Dark Left Column + Parchment
+
  * – Mobile-first, responsive banner & sidebar
  *************************************************/
+
*  – Vector 2010 + Vector 2022 + Minerva compatible
 +
  *****************************************************/
  
/* ===== Variables ===== */
+
/* ---------------------------------------------------
 +
  0.  GLOBAL TOKENS
 +
  --------------------------------------------------- */
 
:root{
 
:root{
   --hf-banner-w: 1250px;        /* banner width */
+
   /* spacing scale */
   --hf-banner-h: 300px;         /* banner height */
+
   --space-1: .25rem;
   --hf-sidebar-w: 200px;       /* actual sidebar width + content offset */
+
   --space-2: .5rem;
   --hf-parchment: #E1DCCE;      /* base page background */
+
   --space-3: 1rem;
  --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) */
+
  /* widths (desktop) */
    linear-gradient(to right, var(--hf-left-top) 0%, var(--hf-left-bot) 100%) left top no-repeat,
+
  --sidebar-w: 200px;        /* desktop off-canvas width */
 +
  --banner-h: 300px;        /* height of top gradient band */
  
    /* 3) Vertical dark column for sidebar */
+
  /* fonts */
    linear-gradient(to bottom, var(--hf-left-top) 0%, var(--hf-left-bot) 100%) left top repeat-y,
+
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
  --font-size-base: 1rem;          /* 16 px */
 +
  --font-size-nav: .6875rem;      /* 11 px */
  
    /* 4) Parchment base */
+
  /* colours */
    var(--hf-parchment);
+
  --color-parchment: #E1DCCE;
   background-size:
+
   --color-sidebar-top: #2F2D2B;
    var(--hf-banner-w) var(--hf-banner-h),  /* banner image */
+
  --color-sidebar-bot: #1E1E1D;
    100% 400px,                              /* dark top bar — extend higher */
+
   --color-text: #16181D;
    var(--hf-sidebar-w) 100%,                /* vertical sidebar column */
+
   --color-link: #1666FF;
    auto;                                   /* parchment fill */
+
   --color-link-visited: #3b46ff;
   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;
 
 
}
 
}
  
 +
/* ---------------------------------------------------
 +
  1.  BASE RESET  (small & safe)
 +
  --------------------------------------------------- */
 +
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
 +
html{scroll-behavior:smooth;}
 +
img{max-width:100%;height:auto;}
  
 +
/* ---------------------------------------------------
 +
  2.  BODY + BACKGROUND STACK
 +
  --------------------------------------------------- */
 +
body{
 +
  margin:0;
 +
  background:var(--color-parchment);
 +
  color:var(--color-text);
 +
  font:400 var(--font-size-base)/1.55 var(--font-sans);
 +
  -webkit-font-smoothing:antialiased;
 +
  text-rendering:optimizeLegibility;
 +
}
  
/* ===== Keep site chrome transparent so the page bg shows ===== */
+
/* Desktop / tablet: show banner + sidebar gradients */
#mw-page-base, #mw-head-base, #mw-head, .vector-header-container,
+
@media (min-width:720px){
#mw-panel, #column-one, .mw-sidebar { background: transparent !important; }
+
  body{
 
+
    background:
/* ===== Content is opaque parchment so the dark column doesn't bleed ===== */
+
      /* 1) banner */
#content, .mw-body, .vector-body .mw-body,
+
      url("/Special:FilePath/BannerImage.png") left top/40vw no-repeat,
.mw-workspace-container, .mw-content-container{
+
      /* 2) dark top strip (full-width) */
  background: var(--hf-parchment) !important;
+
      linear-gradient(to right,var(--color-sidebar-top)0%,var(--color-sidebar-bot)100%)
  position: relative;
+
        left top/100% var(--banner-h) no-repeat,
   z-index: 1;
+
      /* 3) vertical sidebar column */
 +
      linear-gradient(to bottom,var(--color-sidebar-top)0%,var(--color-sidebar-bot)100%)
 +
        left top/var(--sidebar-w) 100% repeat-y,
 +
      /* 4) parchment fill */
 +
      var(--color-parchment);
 +
    background-attachment:scroll; /* avoids iOS repaint jank */
 +
   }
 
}
 
}
  
/* ===== Layout: single source of truth for widths/offsets ===== */
+
/* Keep site chrome transparent so bg shows through */
#mw-panel, .mw-sidebar, #column-one{ width: var(--hf-sidebar-w) !important; box-sizing: border-box; }
+
#mw-page-base,#mw-head-base,#mw-head,
#content, .mw-body, .vector-body, .mw-content-container{ margin-left: var(--hf-sidebar-w) !important; }
+
.vector-header-container,
 +
#mw-panel,#column-one,.mw-sidebar{background:transparent!important;}
  
/* ===== Sidebar: flat, compact; let background show through ===== */
+
/* ---------------------------------------------------
#mw-panel .vector-menu,
+
  3.  SIDEBAR (MW panel) – off-canvas on mobile
#mw-panel .vector-main-menu,
+
  --------------------------------------------------- */
#mw-panel .vector-menu-content,
+
body.skin-vector #mw-panel,
#mw-panel .vector-menu-content-list,
+
body.skin-vector-2022 #mw-panel,
#column-one .portlet, #column-one .pBody{
+
body.skin-vector #column-one{/* legacy Vector alias */
   background: transparent !important; border: 0 !important; padding: 0; margin: 0;
+
  position:fixed;
 +
  top:0;left:-100%;              /* hide out of view */
 +
  width:var(--sidebar-w);
 +
  padding:var(--space-3) var(--space-2) var(--space-3);
 +
   background:transparent;
 +
  color:#EEEDEB;
 +
  transition:left .3s ease;
 +
  z-index:1000;
 
}
 
}
  
#mw-panel, .mw-sidebar, #column-one{ color: #EEEDEB !important; padding: 10px 8px 24px; }
+
body.menu-open #mw-panel,
 +
body.menu-open #column-one{left:0;}     /* toggled via JS */
  
 +
/* Portal headings */
 
#mw-panel .portal .portal-title,
 
#mw-panel .portal .portal-title,
 
#mw-panel .vector-menu-heading,
 
#mw-panel .vector-menu-heading,
#column-one h3, .mw-sidebar h2{
+
#column-one h3{
   background: #63635B !important; color: #EEEDEB !important;
+
   background:#63635B;
   padding: 5px 8px; margin: 12px 4px 4px; border: 0 !important;
+
  color:#EEEDEB;
   font: 700 10px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .2px;
+
  font:700 var(--font-size-nav)/1.4 var(--font-sans);
 +
   padding:5px 8px;
 +
   margin:var(--space-2) var(--space-1) var(--space-1);
 +
  border:0;
 
}
 
}
  
#mw-panel .vector-menu-content-list, #column-one .pBody ul{ list-style: none; padding: 0; margin: 6px 0 0; }
+
/* Lists & links */
#mw-panel .vector-menu-content-list > li, #column-one .pBody ul li{ padding: 3px 6px; line-height: 1.35; }
+
#mw-panel .vector-menu-content-list,
 +
#column-one .pBody ul{list-style:none;padding:0;margin:var(--space-2) 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{
+
#mw-panel a,#column-one a{
   display: block; padding: 2px 4px;
+
   display:block;
   color: #EEEDEB !important; text-decoration: none;
+
  padding:2px 4px;
   font: 400 10px/1.35 "Helvetica Neue", Helvetica, Arial, sans-serif;
+
   color:#EEEDEB!important;
}
+
  text-decoration:none;
#mw-panel a:hover, #column-one a:hover, .mw-sidebar a:hover{
+
   font:400 var(--font-size-nav)/1.35 var(--font-sans);
  background: rgba(255,255,255,0.08); color: #EEEDEB !important; text-decoration: none;
 
 
}
 
}
 +
#mw-panel a:hover,#column-one a:hover{background:rgba(255,255,255,.08);}
  
/* Optional thin group divider */
+
/* Call-out button (Discord) */
#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"]{
 
#mw-panel a.external[href*="discord"]{
   background: #5A65EA; color: #fff !important;
+
   background:#5A65EA;color:#fff!important;
   display: inline-block; padding: 8px 10px; margin: 6px 0 10px;
+
   padding:8px 10px;margin:var(--space-2) 0 var(--space-3);
   border-radius: 4px; border: 1px solid rgba(0,0,0,0.15);
+
   border-radius:4px;border:1px solid rgba(0,0,0,.15);
   font: 700 11px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
+
   font:700 .75rem/1 var(--font-sans);
 
}
 
}
#mw-panel a.external[href*="discord"]:hover{ background: #545DD9; }
+
#mw-panel a.external[href*="discord"]:hover{background:#545DD9;}
  
/* ===== Branding: Holdfast compass logo ===== */
+
/* ---------------------------------------------------
#p-logo a, .mw-wiki-logo{
+
  4.  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 a,.mw-wiki-logo{
 +
   background:url("/Special:FilePath/Holdfast_Logo_White_Gold_Compass.png")
 +
            center/contain no-repeat!important;
 +
   width:120px;height:120px;display:block;
 
}
 
}
#p-logo-text, .mw-wiki-logo-text{ display: none !important; }
+
#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,
+
  5.  CONTENT COLUMN  (offset only on ≥720 px)
.vector-header-container, .vector-menu, .vector-menu-content, .vector-menu-heading,
+
  --------------------------------------------------- */
#p-logo-text, #firstHeading, .mw-parser-output, .mw-parser-output p,
+
#content,.mw-body,.mw-content-container,
.mw-parser-output li, .mw-parser-output td, .mw-parser-output th{
+
.mw-workspace-container{
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
+
   background:var(--color-parchment)!important;
   font-size: 14px !important; line-height: 1.55;
+
   position:relative;
   -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
+
  z-index:1;
  font-weight: 400; letter-spacing: .2px; color: #16181D;
+
   padding:0 var(--space-3) var(--space-3);
 
}
 
}
  
.mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3,
+
@media (min-width:720px){
.mw-parser-output h4, .mw-parser-output h5{
+
  #content,.mw-body,.mw-content-container{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
+
    margin-left:calc(var(--sidebar-w) + var(--space-3));
   font-weight: 600 !important; letter-spacing: .3px;
+
   }
 
}
 
}
  
/* Code blocks keep monospace */
+
/* ---------------------------------------------------
code, pre, .mw-code{ font-family: "Courier New", Courier, monospace !important; }
+
  6.  TYPOGRAPHY
 +
  --------------------------------------------------- */
 +
.mw-parser-output p,
 +
.mw-parser-output li,
 +
.mw-parser-output td,
 +
.mw-parser-output th{
 +
  letter-spacing:.2px;
 +
}
  
/* ===== Align page tabs with content edge (Vector legacy + Vector-2022) ===== */
+
.mw-parser-output h1,
:root {
+
.mw-parser-output h2,
   --hf-content-pad: 16px; /* left inner padding of the content column */
+
.mw-parser-output h3,
 +
.mw-parser-output h4,
 +
.mw-parser-output h5{
 +
   font-family:var(--font-sans);
 +
  font-weight:600;letter-spacing:.3px;margin:var(--space-3) 0 var(--space-2);
 
}
 
}
  
/* Your content gets this padding; keep it explicit so we can reuse it */
+
#content a{color:var(--color-link);text-decoration-thickness:2px;}
#content, .mw-body, .mw-content-container {
+
#content a:visited{color:var(--color-link-visited);}
  padding-left: var(--hf-content-pad);
+
#content a:hover{color:#0046ff;}
}
+
 
 +
code,pre,.mw-code{font-family:"Courier New",Courier,monospace!important;}
  
/* 1) Legacy Vector (tabs live in #left-navigation / #right-navigation) */
+
/* ---------------------------------------------------
#mw-head #left-navigation,
+
  7.  PAGE TABS ALIGNMENT (Vector skins, desktop only)
#mw-head #right-navigation {
+
  --------------------------------------------------- */
  position: relative;
+
@media (min-width:720px){
  left: calc(var(--hf-sidebar-w) + var(--hf-content-pad)) !important;
+
  /* legacy Vector */
   margin-left: 0 !important; /* nuke any default margin */
+
  #mw-head #left-navigation,
}
+
  #mw-head #right-navigation{
 +
    position:relative;
 +
    left:calc(var(--sidebar-w) + var(--space-3));
 +
    margin-left:0!important;
 +
   }
 +
  #mw-head #p-views,
 +
  #mw-head .vectorTabs,
 +
  #mw-head .vector-menu-tabs{margin-left:0!important;}
  
/* Also zero margins on the tab lists themselves so they don't re-offset */
+
  /* Vector 2022 */
#mw-head #p-views,
+
  .vector-header-container .vector-page-toolbar,
#mw-head .vectorTabs,
+
  .vector-header-container .vector-menu-tabs{
#mw-head .vector-menu-tabs {
+
    position:relative;
  margin-left: 0 !important;
+
    left:calc(var(--sidebar-w) + var(--space-3));
 +
    margin-left:0!important;
 +
    z-index:5; /* above banner */
 +
  }
 
}
 
}
  
/* 2) Vector-2022 (tabs / page tools bar) */
+
/* ---------------------------------------------------
.vector-header-container .vector-page-toolbar,
+
  8. MISC UTILITIES
.vector-header-container .vector-menu-tabs {
+
  --------------------------------------------------- */
   position: relative;
+
/* Optional thin group divider */
  left: calc(var(--hf-sidebar-w) + var(--hf-content-pad)) !important;
+
#mw-panel .portal,#column-one .portlet{
   margin-left: 0 !important;
+
   margin-top:var(--space-2);
  z-index: 5; /* stay above the banner image */
+
  padding-top:var(--space-2);
 +
   border-top:1px solid rgba(217,215,209,.12);
 
}
 
}
 +
#mw-panel .portal:first-child,
 +
#column-one .portlet:first-child{border-top:0;margin-top:0;padding-top:0;}

Revision as of 23:25, 10 October 2025

/*****************************************************
 *  HOLDFAST WIKI – MODERN THEME  (2025-10-10)
 *  – Mobile-first, responsive banner & sidebar
 *  – Vector 2010 + Vector 2022 + Minerva compatible
 *****************************************************/

/* ---------------------------------------------------
   0.  GLOBAL TOKENS
   --------------------------------------------------- */
:root{
  /* spacing scale */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;

  /* widths (desktop) */
  --sidebar-w: 200px;        /* desktop off-canvas width */
  --banner-h: 300px;         /* height of top gradient band */

  /* fonts */
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-size-base: 1rem;          /* 16 px */
  --font-size-nav: .6875rem;       /* 11 px */

  /* colours */
  --color-parchment: #E1DCCE;
  --color-sidebar-top: #2F2D2B;
  --color-sidebar-bot: #1E1E1D;
  --color-text: #16181D;
  --color-link: #1666FF;
  --color-link-visited: #3b46ff;
}

/* ---------------------------------------------------
   1.  BASE RESET  (small & safe)
   --------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
img{max-width:100%;height:auto;}

/* ---------------------------------------------------
   2.  BODY + BACKGROUND STACK
   --------------------------------------------------- */
body{
  margin:0;
  background:var(--color-parchment);
  color:var(--color-text);
  font:400 var(--font-size-base)/1.55 var(--font-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Desktop / tablet: show banner + sidebar gradients */
@media (min-width:720px){
  body{
    background:
      /* 1) banner */
      url("/Special:FilePath/BannerImage.png") left top/40vw no-repeat,
      /* 2) dark top strip (full-width) */
      linear-gradient(to right,var(--color-sidebar-top)0%,var(--color-sidebar-bot)100%)
        left top/100% var(--banner-h) no-repeat,
      /* 3) vertical sidebar column */
      linear-gradient(to bottom,var(--color-sidebar-top)0%,var(--color-sidebar-bot)100%)
        left top/var(--sidebar-w) 100% repeat-y,
      /* 4) parchment fill */
      var(--color-parchment);
    background-attachment:scroll; /* avoids iOS repaint jank */
  }
}

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

/* ---------------------------------------------------
   3.  SIDEBAR (MW panel) – off-canvas on mobile
   --------------------------------------------------- */
body.skin-vector #mw-panel,
body.skin-vector-2022 #mw-panel,
body.skin-vector #column-one{/* legacy Vector alias */
  position:fixed;
  top:0;left:-100%;              /* hide out of view */
  width:var(--sidebar-w);
  padding:var(--space-3) var(--space-2) var(--space-3);
  background:transparent;
  color:#EEEDEB;
  transition:left .3s ease;
  z-index:1000;
}

body.menu-open #mw-panel,
body.menu-open #column-one{left:0;}     /* toggled via JS */

/* Portal headings */
#mw-panel .portal .portal-title,
#mw-panel .vector-menu-heading,
#column-one h3{
  background:#63635B;
  color:#EEEDEB;
  font:700 var(--font-size-nav)/1.4 var(--font-sans);
  padding:5px 8px;
  margin:var(--space-2) var(--space-1) var(--space-1);
  border:0;
}

/* Lists & links */
#mw-panel .vector-menu-content-list,
#column-one .pBody ul{list-style:none;padding:0;margin:var(--space-2) 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{
  display:block;
  padding:2px 4px;
  color:#EEEDEB!important;
  text-decoration:none;
  font:400 var(--font-size-nav)/1.35 var(--font-sans);
}
#mw-panel a:hover,#column-one a:hover{background:rgba(255,255,255,.08);}

/* Call-out button (Discord) */
#mw-panel a.external[href*="discord"]{
  background:#5A65EA;color:#fff!important;
  padding:8px 10px;margin:var(--space-2) 0 var(--space-3);
  border-radius:4px;border:1px solid rgba(0,0,0,.15);
  font:700 .75rem/1 var(--font-sans);
}
#mw-panel a.external[href*="discord"]:hover{background:#545DD9;}

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

/* ---------------------------------------------------
   5.  CONTENT COLUMN  (offset only on ≥720 px)
   --------------------------------------------------- */
#content,.mw-body,.mw-content-container,
.mw-workspace-container{
  background:var(--color-parchment)!important;
  position:relative;
  z-index:1;
  padding:0 var(--space-3) var(--space-3);
}

@media (min-width:720px){
  #content,.mw-body,.mw-content-container{
    margin-left:calc(var(--sidebar-w) + var(--space-3));
  }
}

/* ---------------------------------------------------
   6.  TYPOGRAPHY
   --------------------------------------------------- */
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output td,
.mw-parser-output th{
  letter-spacing:.2px;
}

.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5{
  font-family:var(--font-sans);
  font-weight:600;letter-spacing:.3px;margin:var(--space-3) 0 var(--space-2);
}

#content a{color:var(--color-link);text-decoration-thickness:2px;}
#content a:visited{color:var(--color-link-visited);}
#content a:hover{color:#0046ff;}

code,pre,.mw-code{font-family:"Courier New",Courier,monospace!important;}

/* ---------------------------------------------------
   7.  PAGE TABS ALIGNMENT (Vector skins, desktop only)
   --------------------------------------------------- */
@media (min-width:720px){
  /* legacy Vector */
  #mw-head #left-navigation,
  #mw-head #right-navigation{
    position:relative;
    left:calc(var(--sidebar-w) + var(--space-3));
    margin-left:0!important;
  }
  #mw-head #p-views,
  #mw-head .vectorTabs,
  #mw-head .vector-menu-tabs{margin-left:0!important;}

  /* Vector 2022 */
  .vector-header-container .vector-page-toolbar,
  .vector-header-container .vector-menu-tabs{
    position:relative;
    left:calc(var(--sidebar-w) + var(--space-3));
    margin-left:0!important;
    z-index:5; /* above banner */
  }
}

/* ---------------------------------------------------
   8.  MISC UTILITIES
   --------------------------------------------------- */
/* Optional thin group divider */
#mw-panel .portal,#column-one .portlet{
  margin-top:var(--space-2);
  padding-top:var(--space-2);
  border-top:1px solid rgba(217,215,209,.12);
}
#mw-panel .portal:first-child,
#column-one .portlet:first-child{border-top:0;margin-top:0;padding-top:0;}