Difference between revisions of "MediaWiki:Common.css"

From Holdfast: Nations At War
Jump to navigation Jump to search
Line 1: Line 1:
/* === Holdfast header banner (full-width strip w/ right fade) === */
+
/* === Holdfast Banner - Left 40% of Header === */
:root { --hf-banner-h: 150px; }  /* tweak height here: 130–170px usually looks best */
+
:root { --hf-banner-h: 150px; }  /* Adjust height as needed */
  
/* Works for Vector (legacy) and Vector 2022 */
+
/* Works for both Vector & Vector-2022 */
 
#mw-head,
 
#mw-head,
 
.vector-header-container {
 
.vector-header-container {
   /* Two layers: 1) banner image, 2) right-side dark fade */
+
   background:
  background-image:
+
    /* layer 1: Holdfast banner image */
     url("/Special:FilePath/BannerImage.png"),
+
     url("/Special:FilePath/BannerImage.png") left top no-repeat,
     linear-gradient(to right, rgba(0,0,0,0) 65%, rgba(30,30,29,0.9) 100%);
+
    /* layer 2: smooth fade into page background */
 +
     linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(225,220,206,1) 100%);
 +
  background-size:
 +
    40vw var(--hf-banner-h),  /* banner width = 40% of viewport */
 +
    100% var(--hf-banner-h);  /* gradient width covers header */
 +
  background-position: left top, left top;
 
   background-repeat: no-repeat, no-repeat;
 
   background-repeat: no-repeat, no-repeat;
  background-position: left top, left top;
 
  /* Image fills the header; gradient is exactly banner height */
 
  background-size: cover, 100% var(--hf-banner-h);
 
 
   min-height: var(--hf-banner-h);
 
   min-height: var(--hf-banner-h);
   border-bottom: 0; /* remove any stray separator */
+
   border-bottom: 0;
 
}
 
}
  
/* Some skins paint base strips; kill them so the banner shows clean */
+
/* remove any default color strips */
 
#mw-page-base, #mw-head-base { background: transparent !important; }
 
#mw-page-base, #mw-head-base { background: transparent !important; }
  
/* Main content containers shouldn't overpaint the header */
+
/* ensure the body background matches your parchment tone */
#content, .mw-body, .vector-body .mw-body { background: transparent; }
+
body {
 +
  background-color: #E1DCCE;
 +
}

Revision as of 09:36, 10 October 2025

/* === Holdfast Banner - Left 40% of Header === */
:root { --hf-banner-h: 150px; }  /* Adjust height as needed */

/* Works for both Vector & Vector-2022 */
#mw-head,
.vector-header-container {
  background:
    /* layer 1: Holdfast banner image */
    url("/Special:FilePath/BannerImage.png") left top no-repeat,
    /* layer 2: smooth fade into page background */
    linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(225,220,206,1) 100%);
  background-size:
    40vw var(--hf-banner-h),  /* banner width = 40% of viewport */
    100% var(--hf-banner-h);  /* gradient width covers header */
  background-position: left top, left top;
  background-repeat: no-repeat, no-repeat;
  min-height: var(--hf-banner-h);
  border-bottom: 0;
}

/* remove any default color strips */
#mw-page-base, #mw-head-base { background: transparent !important; }

/* ensure the body background matches your parchment tone */
body {
  background-color: #E1DCCE;
}