Difference between revisions of "MediaWiki:Common.css"

Revision as of 23:50, 10 October 2025

/*****************************************************
 *  HOLDFAST WIKI – MODERN THEME  (2025-10-10)
 *  Mobile-first • Responsive • Vector 2010/2022/Minerva
 *****************************************************/

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

  /* layout (desktop) */
  --sidebar-w: 200px;
  --banner-h : 300px;
  --hf-sidebar-hero-h: 210px;   /* photo height */

  /* 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.  RESET
   --------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
img{max-width:100%;height:auto;}

/* ---------------------------------------------------
   2.  BODY & GLOBAL BACKGROUND
   --------------------------------------------------- */
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: banner + gradients */
/* ---------------------------------------------------
   Banner: start after sidebar, run full remaining width
   --------------------------------------------------- */
@media (min-width:720px){
  body{
    background:
      /* 1) banner patch */
      url("/Special:FilePath/BannerImage.png")
        var(--sidebar-w) top/            /* x-offset = sidebar width  */
        calc(100% - var(--sidebar-w))     /* fill the rest of the page */
        no-repeat,

      /* keep the rest of the stack exactly as before */
      linear-gradient(to right,var(--color-sidebar-top)0%,var(--color-sidebar-bot)100%)
        left top/100% var(--banner-h) no-repeat,
      linear-gradient(to bottom,var(--color-sidebar-top)0%,var(--color-sidebar-bot)100%)
        left top/var(--sidebar-w) 100% repeat-y,
      var(--color-parchment);
  }
}

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

/* ---------------------------------------------------
   3.  SIDEBAR (mw-panel / column-one)
   --------------------------------------------------- */
body.skin-vector  #mw-panel,
body.skin-vector-2022 #mw-panel,
body.skin-vector  #column-one{
  position:fixed;              /* off-canvas by default */
  top:0; left:-100%;
  width:var(--sidebar-w);
  padding-top:calc(var(--hf-sidebar-hero-h) + var(--space-3));
  padding-left:var(--space-2);
  padding-right:var(--space-2);
  padding-bottom:var(--space-3);
  background:linear-gradient(180deg,
            var(--color-sidebar-top) 0%,
            var(--color-sidebar-bot) 100%) !important;
  color:#EEEDEB;
  transition:left .3s ease;
  overflow:hidden;
  z-index:1000;
}

/* Bring sidebar on-screen ≥ 720 px */
@media (min-width:720px){
  body.skin-vector  #mw-panel,
  body.skin-vector-2022 #mw-panel,
  body.skin-vector  #column-one{left:0;}
}

/* Mobile hamburger toggles .menu-open */
body.menu-open #mw-panel,
body.menu-open #column-one{left:0;}

/* --- Hero photo --- */
body.skin-vector  #mw-panel::before,
body.skin-vector-2022 #mw-panel::before,
body.skin-vector  #column-one::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;               /* top:0; left:0; width:100% */
  height:var(--hf-sidebar-hero-h);
  background:url("/wiki/Special:Redirect/file/Sidebar-Hero.jpg") center/cover no-repeat;
  filter:brightness(.82);
  z-index:0;
}

/* --- Compass logo (single, universal) --- */
body.skin-vector  #mw-panel::after,
body.skin-vector-2022 #mw-panel::after,
body.skin-vector  #column-one::after{
  content:"";
  position:absolute;
  top:0; left:50%;
  width:150px; height:150px;
  transform:translate(-50%, calc((var(--hf-sidebar-hero-h) - 150px)/2));
  background:url("/wiki/Special:Redirect/file/Holdfast_Logo_White_Gold_Compass.png")
            center/contain no-repeat;
  z-index:5;
  pointer-events:none;
}

/* --- 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) 0 var(--space-1);
  border:0;
}

/* --- List & link styling --- */
#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);}

/* Discord button */
#mw-panel a.external[href*="discord"]{
  display:block;
  text-align:center;
  background:#5A65EA;
  color:#fff!important;
  padding:8px 10px;
  margin:var(--space-3) 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.  CONTENT COLUMN
   --------------------------------------------------- */
#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));
  }
}

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

/* ---------------------------------------------------
   6.  PAGE TABS ALIGNMENT  (desktop only)
   --------------------------------------------------- */
@media (min-width:720px){
  /* Vector legacy */
  #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;
  }
}

/* ---------------------------------------------------
   7.  UTILITIES
   --------------------------------------------------- */
#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;}