MediaWiki:Bhcvectorbrand-css: Difference between revisions

← Older editNewer edit →
Steve (talk | contribs)
Bureaucrats, Interface administrators, Suppressors, Administrators
1,526 edits
No edit summary
No edit summary
Line 18: Line 18:


body.bhc-branding .bhc-sitebar{
body.bhc-branding .bhc-sitebar{
   position: static; /* non-sticky, in normal flow */
   position: static; /* non-sticky */
   margin: 0;
   margin: 0;
   border-top: 5px solid rgb(165,174,121);
   border-top: 5px solid rgb(165,174,121);
Line 26: Line 26:
   width: 100%;
   width: 100%;


   /* IMPORTANT: keep the branded header above Vector chrome */
   /* keep above Vector chrome */
  position: relative !important;
   z-index: 999999 !important;
   z-index: 999999 !important;
}
/* Because z-index needs a positioning context in many cases */
body.bhc-branding .bhc-sitebar{
  position: relative !important;
}
}


Line 73: Line 69:


/* ---------------------------------------------------------
/* ---------------------------------------------------------
   Vector chrome should sit BELOW the BHC header
   Push the page down below BHC bar + Vector clearance
   JS sets --bhc-bar-height to header height when visible
  (You tested ~10rem as "perfect")
   --------------------------------------------------------- */
 
body.bhc-branding .mw-page-container{
  padding-top: calc(var(--bhc-bar-height) + 10rem) !important;
}
 
/* ---------------------------------------------------------
  Vector sticky UI should sit BELOW the BHC header
   --------------------------------------------------------- */
   --------------------------------------------------------- */


/* Primary Vector sticky bits */
body.bhc-branding .vector-sticky-header,
body.bhc-branding .vector-sticky-header,
body.bhc-branding .vector-page-toolbar{
body.bhc-branding .vector-page-toolbar{
Line 83: Line 86:
}
}


/* Extra safety for other Vector header wrappers (varies by mode/version) */
body.bhc-branding .vector-header-container,
body.bhc-branding .vector-header-container,
body.bhc-branding .mw-header,
body.bhc-branding .mw-header,
Line 94: Line 96:
   --------------------------------------------------------- */
   --------------------------------------------------------- */


/* Hide the original Vector search containers now that we move the form */
body.bhc-branding #p-search,
body.bhc-branding #p-search,
body.bhc-branding .vector-search-box,
body.bhc-branding .vector-search-box,
Line 101: Line 102:
}
}


/* Search slot in header: keep it to the right */
body.bhc-branding .bhc-search-slot{
body.bhc-branding .bhc-search-slot{
   margin-left: auto;
   margin-left: auto;
Line 109: Line 109:
}
}


/* If badge exists, keep it at far right after search */
body.bhc-branding .bhc-search-slot + .bhc-test-badge{
body.bhc-branding .bhc-search-slot + .bhc-test-badge{
   margin-left: 12px;
   margin-left: 12px;
}
}


/* Basic styling for the moved search form */
body.bhc-branding .bhc-moved-search{
body.bhc-branding .bhc-moved-search{
   display: flex;
   display: flex;
Line 164: Line 162:
   font-size: .95rem;
   font-size: .95rem;
   line-height: 1.6;
   line-height: 1.6;
}
/* Create real space under the BHC bar so the page never starts underneath it */
body.bhc-branding .mw-page-container{
  padding-top: calc(var(--bhc-bar-height) + 10rem) !important;
}
/* Prevent double-push if something else already has top padding */
body.bhc-branding .mw-page-container > .vector-header-container{
  margin-top: 0 !important;
}
}

Revision as of 19:44, 23 January 2026

/* ========================================================= 

  BHC Vector Brand – presentation layer
  Scoped to body.bhc-branding only
  Header is NON-STICKY and scrolls with the page
  ========================================================= */
root { --bhc-bar-height: 0px; }

/* Base */ body.bhc-branding{ 

 padding-top: 0;
 overflow-x: hidden;

}

/* --------------------------------------------------------- 

  HEADER BAR (scrolls normally)
  --------------------------------------------------------- */

body.bhc-branding .bhc-sitebar{ 

 position: static; /* non-sticky */
 margin: 0;
 border-top: 5px solid rgb(165,174,121);
 border-bottom: 10px solid rgb(228,186,149);
 background: rgb(130,156,149);
 color: #fff;
 width: 100%;

 /* keep above Vector chrome */
 position: relative !important;
 z-index: 999999 !important;

}

body.bhc-branding .bhc-sitebar-inner{ 

 max-width: 1200px;
 margin: 0 auto;
 padding: 12px 16px;
 display: flex;
 align-items: center;
 gap: 12px;
 font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

}

body.bhc-branding .bhc-logo{ 

 width: 56px;
 height: 56px;
 background: url(/extensions/BHCVectorBrand/resources/images/bhc-logo.png) center/contain no-repeat;
 border-radius: 6px;

}

body.bhc-branding .bhc-title{ 

 font-size: 18px;
 letter-spacing: 1px;

}

body.bhc-branding .bhc-strapline{ 

 opacity: .95;
 margin-top: 2px;

}

body.bhc-branding .bhc-test-badge{ 

 background: rgba(0,0,0,.18);
 border: 1px solid rgba(255,255,255,.35);
 padding: 4px 10px;
 border-radius: 999px;
 font-size: 12px;
 letter-spacing: .06em;
 white-space: nowrap;

}

/* --------------------------------------------------------- 

  Push the page down below BHC bar + Vector clearance
  (You tested ~10rem as "perfect")
  --------------------------------------------------------- */

body.bhc-branding .mw-page-container{ 

 padding-top: calc(var(--bhc-bar-height) + 10rem) !important;

}

/* --------------------------------------------------------- 

  Vector sticky UI should sit BELOW the BHC header
  --------------------------------------------------------- */

body.bhc-branding .vector-sticky-header, body.bhc-branding .vector-page-toolbar{ 

 top: var(--bhc-bar-height) !important;

}

body.bhc-branding .vector-header-container, body.bhc-branding .mw-header, body.bhc-branding #mw-head{ 

 top: var(--bhc-bar-height) !important;

}

/* --------------------------------------------------------- 

  SEARCH: moved into the BHC header
  --------------------------------------------------------- */

body.bhc-branding #p-search, body.bhc-branding .vector-search-box, body.bhc-branding .vector-search-box-vue{ 

 display: none !important;

}

body.bhc-branding .bhc-search-slot{ 

 margin-left: auto;
 display: flex;
 align-items: center;
 gap: .5rem;

}

body.bhc-branding .bhc-search-slot + .bhc-test-badge{ 

 margin-left: 12px;

}

body.bhc-branding .bhc-moved-search{ 

 display: flex;
 align-items: center;
 gap: .5rem;

}

body.bhc-branding .bhc-search-input{ 

 width: min(340px, 40vw);
 max-width: 100%;
 padding: .45rem .6rem;
 border-radius: 6px;
 border: 1px solid rgba(255,255,255,.45);
 background: rgba(255,255,255,.12);
 color: #fff;

}

body.bhc-branding .bhc-search-input::placeholder{ 

 color: rgba(255,255,255,.75);

}

body.bhc-branding .bhc-search-submit{ 

 padding: .45rem .7rem;
 border-radius: 6px;
 border: 1px solid rgba(255,255,255,.35);
 background: rgba(0,0,0,.12);
 color: #fff;

}

/* --------------------------------------------------------- 

  FOOTER
  --------------------------------------------------------- */

body.bhc-branding .bhc-footer{ 

 margin-top: 2.25rem;
 padding: 1.5rem 0;
 border-top: 6px solid rgb(228,186,149);
 background: #f6f6f6;
 color: #222;
 clear: both;
 width: 100%;

}

body.bhc-branding .bhc-footer-inner{ 

 max-width: 1200px;
 margin: 0 auto;
 padding: 0 16px;
 font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
 font-size: .95rem;
 line-height: 1.6;

}

Retrieved from "https://wiki.bellingham-heritage.org.uk:443/index.php?title=MediaWiki:Bhcvectorbrand-css&oldid=1421"