MediaWiki:Bhcvectorbrand-css: Difference between revisions

Latest revision as of 17:01, 24 January 2026

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

  Bellingham Heritage Centre – Timeless skin branding (CSS-only)
  Applies ONLY when the Timeless skin is in use.
  ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;700&family=Satisfy&display=swap');

body.skin-timeless{

 /* Palette */
 --bhc-teal: rgb(130,156,149);
 --bhc-olive: rgb(165,174,121);
 --bhc-sand: rgb(228,186,149);

 /* Heritage text colour (per your site) */
 --bhc-maroon: rgb(93, 8, 58);

 --bhc-link: #005DB3;
 --bhc-text: #202020;

 /* Header now WHITE */
 --bhc-header-bg: #ffffff;
 --bhc-header-text: #202020;

 /* Fonts */
 --bhc-body-font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
 --bhc-heading-font: "Roboto Condensed", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
 --bhc-accent-font: "Satisfy", cursive;

 /* Readability */
 font-size: 18px;
 line-height: 1.65;

 overflow-x: hidden;

}

@media (max-width: 720px){

 body.skin-timeless{ font-size: 16.5px; }

}

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

  Global typography (content)
  --------------------------------------------------------- */

body.skin-timeless, body.skin-timeless .mw-body, body.skin-timeless .mw-parser-output{

 font-family: var(--bhc-body-font);
 color: var(--bhc-text);

}

body.skin-timeless a{ color: var(--bhc-link); } body.skin-timeless a:hover{ text-decoration: underline; }

body.skin-timeless .mw-parser-output h1, body.skin-timeless .mw-parser-output h2, body.skin-timeless .mw-parser-output h3{

 font-family: var(--bhc-heading-font);
 letter-spacing: .02em;
 color: var(--bhc-maroon);

}

body.skin-timeless .mw-parser-output h1{

 font-size: 2.05rem;
 line-height: 1.15;
 margin: 0.25rem 0 0.75rem;
 font-weight: 700;

}

body.skin-timeless .mw-parser-output h2{

 font-size: 1.55rem;
 line-height: 1.2;
 margin: 1.6rem 0 0.6rem;
 border-bottom: 3px solid var(--bhc-sand);
 padding-bottom: .25rem;

}

body.skin-timeless .mw-parser-output h3{

 font-size: 1.25rem;
 line-height: 1.25;
 margin: 1.2rem 0 0.45rem;

}

body.skin-timeless .mw-parser-output h4{

 font-size: 1.1rem;
 line-height: 1.3;

}

body.skin-timeless .mw-parser-output p{ margin: 0.75rem 0; }

body.skin-timeless .mw-parser-output ul, body.skin-timeless .mw-parser-output ol{ margin: 0.6rem 0 0.9rem 1.25rem; }

body.skin-timeless .mw-parser-output li{ margin: 0.2rem 0; }

body.skin-timeless #toc, body.skin-timeless .toc, body.skin-timeless .mw-normal-catlinks, body.skin-timeless .catlinks, body.skin-timeless .mw-editsection, body.skin-timeless .mw-editsection a, body.skin-timeless .mw-changeslist, body.skin-timeless .mw-footer{

 font-size: 0.95rem;

}

/* Optional accent class you can use in wiki content */ body.skin-timeless .bhc-script{ font-family: var(--bhc-accent-font); }

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

  HEADER: Timeless header full-width + WHITE background + bars
  ========================================================= */

body.skin-timeless #mw-header-container{

 background: var(--bhc-header-bg) !important;      /* white */
 border-top: 5px solid var(--bhc-olive) !important;
 border-bottom: 10px solid var(--bhc-sand) !important;

}

/* Make all header text dark by default */ body.skin-timeless #mw-header, body.skin-timeless #mw-header a{

 color: var(--bhc-header-text) !important;

}

/* Make header a flex row */ body.skin-timeless #mw-header{

 position: relative;
 display: flex;
 align-items: flex-start;
 gap: 16px;

 /* a bit more vertical room for the larger logo + strapline */
 padding-top: 14px;
 padding-bottom: 34px;

}

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

  Layout widths: make logo/title block wider, search narrower
  --------------------------------------------------------- */

body.skin-timeless #p-logo-text{

 flex: 1 1 auto;
 min-width: 640px;        /* ~50% wider than before */

}

body.skin-timeless #p-search{

 flex: 0 0 auto;
 width: 360px;            /* slightly narrower container */
 max-width: 34vw;
 margin-left: auto;

}

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

  SITE TITLE + LOGO at left (logo 50% bigger)
  Timeless uses: #p-logo-text a#p-banner
  --------------------------------------------------------- */

body.skin-timeless #p-logo-text{

 position: relative;

}

/* Bigger “logo + title” line */ body.skin-timeless #p-logo-text #p-banner{

 display: inline-block;
 text-decoration: none;

 /* Title styling per your site */
 font-family: var(--bhc-heading-font) !important;
 font-weight: 700;
 font-size: 40px;                 /* requested */
 letter-spacing: .01em;
 color: var(--bhc-maroon) !important;

 /* Logo (50% bigger than 56px -> 84px) */
 background-image: url(/resources/assets/BHClogo.jpg);
 background-repeat: no-repeat;
 background-position: left center;
 background-size: 84px 84px;

 padding-left: 104px;             /* 84 + ~20 gap */
 min-height: 84px;
 line-height: 84px;

}

/* If Timeless forces uppercase / long styles, relax wrapping */ body.skin-timeless #p-logo-text #p-banner.long{

 white-space: normal;

}

/* Hide Timeless sidebar logo so we don’t double-brand */ body.skin-timeless #mw-site-navigation #p-logo{

 display: none !important;

}

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

  STRAPLINE (Option A): reuse #siteSub, position in header
  --------------------------------------------------------- */

body.skin-timeless #siteSub{

 position: absolute;

 /* Align under title start (104px = padding-left above) */
 left: 104px;
 top: 86px;

 margin: 0;
 padding: 0;

 font-family: var(--bhc-body-font);
 font-size: 18px;
 line-height: 1.25;
 font-style: normal;
 color: rgba(32,32,32,.78) !important;

 z-index: 2;
 pointer-events: none;

}

/* Prevent #siteSub reserving visible space in content area */ body.skin-timeless #bodyContentOuter #siteSub{

 height: 0;
 overflow: visible;

}

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

  SEARCH: make icon OUTSIDE the input (to the right)
  Timeless search is usually: #searchform > #simpleSearch > input + buttons
  ========================================================= */

/* Ensure the search area is positioned for the button */ body.skin-timeless #p-search #simpleSearch{

 position: relative;

}

/* Input: remove “in-field icon” spacing; keep clean white box */ body.skin-timeless #p-search input[type="search"], body.skin-timeless #p-search #searchInput{

 width: min(280px, 26vw);
 max-width: 100%;

 padding: .45rem .8rem;     /* no extra right padding now */
 border-radius: 10px;

 background: #fff !important;
 color: #202020 !important;
 caret-color: #202020 !important;

 border: 1px solid rgba(0,0,0,.18) !important;
 box-shadow: none !important;

 -webkit-appearance: none;
 appearance: none;

 float: right;

}

/* Placeholder */ body.skin-timeless #p-search input[type="search"]::placeholder, body.skin-timeless #p-search #searchInput::placeholder{

 color: rgba(0,0,0,.55) !important;

}

/* Hide any built-in WebKit search decorations */ body.skin-timeless #p-search input[type="search"]::-webkit-search-decoration, body.skin-timeless #p-search input[type="search"]::-webkit-search-cancel-button, body.skin-timeless #p-search input[type="search"]::-webkit-search-results-button, body.skin-timeless #p-search input[type="search"]::-webkit-search-results-decoration{

 -webkit-appearance: none;
 display: none;

}

/* Show ONE compact icon button to the right of the input (outside it) */ body.skin-timeless #p-search input#mw-searchButton, body.skin-timeless #p-search input#searchButton{

 position: absolute;
 top: 50%;
 right: 6px;
 transform: translateY(-50%);

 width: 38px;
 height: 38px;

 padding: 0;
 margin: 0;

 border-radius: 10px;
 border: 1px solid rgba(0,0,0,.18);
 background: #fff;

 cursor: pointer;

 /* hide any text on the button */
 text-indent: -9999px;
 overflow: hidden;

 /* simple inline SVG magnifier */
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M10 18a8 8 0 1 1 5.293-14.293A8 8 0 0 1 10 18m0-2a6 6 0 1 0-6-6a6 6 0 0 0 6 6m9.707 6.293l-5.1-5.1l1.414-1.414l5.1 5.1z'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: center;

}

/* If BOTH buttons exist, hide the “Go” one and keep “Search” */ body.skin-timeless #p-search input#searchButton{

 display: none !important;

}

/* Give the input room so the external button doesn't overlap it */ body.skin-timeless #p-search input[type="search"], body.skin-timeless #p-search #searchInput{

 margin-right: 46px; /* makes space for the icon button */

}

/* Label styling */ body.skin-timeless #p-search label{

 color: rgba(32,32,32,.75) !important;

}

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

  Personal dropdown: ensure text is black
  ========================================================= */

body.skin-timeless #personal, body.skin-timeless #personal a, body.skin-timeless #personal h2, body.skin-timeless #personal h3, body.skin-timeless #personal .mw-portlet, body.skin-timeless #personal .mw-portlet *{

 color: #202020 !important;

}

/* Dropdown panel background */ body.skin-timeless #personal .dropdown, body.skin-timeless #personal .mw-portlet-body{

 background: #fff !important;

}

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

  FOOTER: keep full width, adopt palette
  ========================================================= */

body.skin-timeless #mw-footer-container{

 border-top: 6px solid var(--bhc-sand);
 background: #f6f6f6;

}

body.skin-timeless #mw-footer{

 font-family: var(--bhc-body-font);
 color: #222;

}

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

  Spacing: push content down a bit further under the header
  ========================================================= */

body.skin-timeless #mw-content-container{

 padding-top: 1.9rem;   /* increased */

}

Anonymous

Search

MediaWiki:Bhcvectorbrand-css: Difference between revisions

Namespaces

More

Page actions

Latest revision as of 17:01, 24 January 2026

Navigation

Other Heritage Centre Links

WIKI Navigation

WIKI Categories

Wiki tools

Wiki tools

@@ Line 1: / Line 1: @@
 /* =========================================================
-    BHC Vector Brand – presentation layer (Timeless-first)
+    Bellingham Heritage Centre – Timeless skin branding (CSS-only)
-    Scoped to body.bhc-branding only
+    Applies ONLY when the Timeless skin is in use.
     ========================================================= */
-/* Google Fonts (if CSP blocks, fallbacks still apply) */
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;700&family=Satisfy&display=swap');
-:root{
+body.skin-timeless{
-  --bhc-bar-height: 0px; /* set by JS */
-}
-body.bhc-branding{
    /* Palette */
    --bhc-teal: rgb(130,156,149);
    --bhc-olive: rgb(165,174,121);
    --bhc-sand: rgb(228,186,149);
-   --bhc-maroon: #800020;
+  /* Heritage text colour (per your site) */
+   --bhc-maroon: rgb(93, 8, 58);
    --bhc-link: #005DB3;
    --bhc-text: #202020;
+  /* Header now WHITE */
+  --bhc-header-bg: #ffffff;
+  --bhc-header-text: #202020;
    /* Fonts */
@@ Line 25: / Line 27: @@
    --bhc-accent-font: "Satisfy", cursive;
-   overflow-x: hidden;
+   /* Readability */
    font-size: 18px;
    line-height: 1.65;
+  overflow-x: hidden;
 }
 @media (max-width: 720px){
-   body.bhc-branding{ font-size: 16.5px; }
+   body.skin-timeless{ font-size: 16.5px; }
 }
-/* Body text */
+/* ---------------------------------------------------------
-body.bhc-branding,
+   Global typography (content)
-body.bhc-branding .mw-body,
+   --------------------------------------------------------- */
-body.bhc-branding .mw-parser-output{
+body.skin-timeless,
+body.skin-timeless .mw-body,
+body.skin-timeless .mw-parser-output{
    font-family: var(--bhc-body-font);
    color: var(--bhc-text);
 }
-/* Links */
+body.skin-timeless a{ color: var(--bhc-link); }
-body.bhc-branding a{ color: var(--bhc-link); }
+body.skin-timeless a:hover{ text-decoration: underline; }
-body.bhc-branding a:hover{ text-decoration: underline; }
-/* Headings */
+body.skin-timeless .mw-parser-output h1,
-body.bhc-branding .mw-parser-output h1,
+body.skin-timeless .mw-parser-output h2,
-body.bhc-branding .mw-parser-output h2,
+body.skin-timeless .mw-parser-output h3{
-body.bhc-branding .mw-parser-output h3{
    font-family: var(--bhc-heading-font);
    letter-spacing: .02em;
@@ Line 55: / Line 60: @@
 }
-body.bhc-branding .mw-parser-output h1{
+body.skin-timeless .mw-parser-output h1{
    font-size: 2.05rem;
    line-height: 1.15;
@@ Line 62: / Line 67: @@
 }
-body.bhc-branding .mw-parser-output h2{
+body.skin-timeless .mw-parser-output h2{
    font-size: 1.55rem;
    line-height: 1.2;
@@ Line 70: / Line 75: @@
 }
-body.bhc-branding .mw-parser-output h3{
+body.skin-timeless .mw-parser-output h3{
    font-size: 1.25rem;
    line-height: 1.25;
@@ Line 76: / Line 81: @@
 }
-body.bhc-branding .mw-parser-output h4{
+body.skin-timeless .mw-parser-output h4{
    font-size: 1.1rem;
    line-height: 1.3;
 }
-/* Paragraph rhythm */
+body.skin-timeless .mw-parser-output p{ margin: 0.75rem 0; }
-body.bhc-branding .mw-parser-output p{ margin: 0.75rem 0; }
-body.bhc-branding .mw-parser-output ul,
+body.skin-timeless .mw-parser-output ul,
-body.bhc-branding .mw-parser-output ol{ margin: 0.6rem 0 0.9rem 1.25rem; }
+body.skin-timeless .mw-parser-output ol{ margin: 0.6rem 0 0.9rem 1.25rem; }
-body.bhc-branding .mw-parser-output li{ margin: 0.2rem 0; }
+body.skin-timeless .mw-parser-output li{ margin: 0.2rem 0; }
-/* Small areas */
+body.skin-timeless #toc,
-body.bhc-branding #toc,
+body.skin-timeless .toc,
-body.bhc-branding .toc,
+body.skin-timeless .mw-normal-catlinks,
-body.bhc-branding .mw-normal-catlinks,
+body.skin-timeless .catlinks,
-body.bhc-branding .catlinks,
+body.skin-timeless .mw-editsection,
-body.bhc-branding .mw-editsection,
+body.skin-timeless .mw-editsection a,
-body.bhc-branding .mw-editsection a,
+body.skin-timeless .mw-changeslist,
-body.bhc-branding .mw-changeslist,
+body.skin-timeless .mw-footer{
-body.bhc-branding .mw-footer{
    font-size: 0.95rem;
 }
-/* Optional accent class for wiki content */
+/* Optional accent class you can use in wiki content */
-body.bhc-branding .bhc-script{ font-family: var(--bhc-accent-font); }
+body.skin-timeless .bhc-script{ font-family: var(--bhc-accent-font); }
 /* =========================================================
-    HEADER BAR (non-sticky; scrolls normally)
+    HEADER: Timeless header full-width + WHITE background + bars
     ========================================================= */
-body.bhc-branding .bhc-sitebar{
+body.skin-timeless #mw-header-container{
+  background: var(--bhc-header-bg) !important;      /* white */
+  border-top: 5px solid var(--bhc-olive) !important;
+  border-bottom: 10px solid var(--bhc-sand) !important;
+}
+/* Make all header text dark by default */
+body.skin-timeless #mw-header,
+body.skin-timeless #mw-header a{
+  color: var(--bhc-header-text) !important;
+}
+/* Make header a flex row */
+body.skin-timeless #mw-header{
    position: relative;
-   z-index: 9999;
+   display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  /* a bit more vertical room for the larger logo + strapline */
+  padding-top: 14px;
+  padding-bottom: 34px;
+}
+/* ---------------------------------------------------------
+   Layout widths: make logo/title block wider, search narrower
+   --------------------------------------------------------- */
+body.skin-timeless #p-logo-text{
+  flex: 1 1 auto;
+  min-width: 640px;        /* ~50% wider than before */
+}
+body.skin-timeless #p-search{
+  flex: 0 0 auto;
+  width: 360px;            /* slightly narrower container */
+  max-width: 34vw;
+  margin-left: auto;
+}
-  margin: 0;
+/* ---------------------------------------------------------
-  width: 100%;
+   SITE TITLE + LOGO at left (logo 50% bigger)
+   Timeless uses: #p-logo-text a#p-banner
+   --------------------------------------------------------- */
-  border-top: 5px solid var(--bhc-olive);
+body.skin-timeless #p-logo-text{
-  border-bottom: 10px solid var(--bhc-sand);
+   position: relative;
-   background: var(--bhc-teal);
-  color: #fff;
 }
-body.bhc-branding .bhc-sitebar-inner{
+/* Bigger “logo + title” line */
-   max-width: 1200px;
+body.skin-timeless #p-logo-text #p-banner{
-   margin: 0 auto;
+  display: inline-block;
-   padding: 12px 16px;
+  text-decoration: none;
+  /* Title styling per your site */
+  font-family: var(--bhc-heading-font) !important;
+  font-weight: 700;
+  font-size: 40px;                 /* requested */
+  letter-spacing: .01em;
+  color: var(--bhc-maroon) !important;
+  /* Logo (50% bigger than 56px -> 84px) */
+  background-image: url(/resources/assets/BHClogo.jpg);
+   background-repeat: no-repeat;
+   background-position: left center;
+   background-size: 84px 84px;
-   display: flex;
+   padding-left: 104px;             /* 84 + ~20 gap */
-   align-items: center;
+   min-height: 84px;
-   gap: 12px;
+   line-height: 84px;
+}
-  font-family: var(--bhc-body-font);
+/* If Timeless forces uppercase / long styles, relax wrapping */
+body.skin-timeless #p-logo-text #p-banner.long{
+  white-space: normal;
 }
-body.bhc-branding .bhc-logo{
+/* Hide Timeless sidebar logo so we don’t double-brand */
-   width: 56px;
+body.skin-timeless #mw-site-navigation #p-logo{
-  height: 56px;
+   display: none !important;
-  background: url(/extensions/BHCVectorBrand/resources/images/bhc-logo.png) center/contain no-repeat;
-  border-radius: 6px;
 }
-body.bhc-branding .bhc-title{
+/* ---------------------------------------------------------
-   font-family: var(--bhc-heading-font);
+   STRAPLINE (Option A): reuse #siteSub, position in header
+   --------------------------------------------------------- */
+body.skin-timeless #siteSub{
+  position: absolute;
+  /* Align under title start (104px = padding-left above) */
+  left: 104px;
+  top: 86px;
+  margin: 0;
+  padding: 0;
+   font-family: var(--bhc-body-font);
    font-size: 18px;
-   letter-spacing: 1px;
+   line-height: 1.25;
-}
+  font-style: normal;
+  color: rgba(32,32,32,.78) !important;
-body.bhc-branding .bhc-strapline{
+  z-index: 2;
-  opacity: .95;
+   pointer-events: none;
-   margin-top: 2px;
 }
-body.bhc-branding .bhc-test-badge{
+/* Prevent #siteSub reserving visible space in content area */
-   background: rgba(0,0,0,.18);
+body.skin-timeless #bodyContentOuter #siteSub{
-  border: 1px solid rgba(255,255,255,.35);
+   height: 0;
-   padding: 4px 10px;
+   overflow: visible;
-  border-radius: 999px;
-  font-size: 12px;
-  letter-spacing: .06em;
-  white-space: nowrap;
 }
 /* =========================================================
-    SEARCH: moved into the BHC header
+    SEARCH: make icon OUTSIDE the input (to the right)
-    (We hide Vector search in Vector only; Timeless uses different markup)
+    Timeless search is usually: #searchform > #simpleSearch > input + buttons
     ========================================================= */
-body.bhc-branding.skin-vector #p-search,
-body.bhc-branding.skin-vector .vector-search-box,
+/* Ensure the search area is positioned for the button */
-body.bhc-branding.skin-vector .vector-search-box-vue{
+body.skin-timeless #p-search #simpleSearch{
-   display: none !important;
+  position: relative;
+}
+/* Input: remove “in-field icon” spacing; keep clean white box */
+body.skin-timeless #p-search input[type="search"],
+body.skin-timeless #p-search #searchInput{
+  width: min(280px, 26vw);
+  max-width: 100%;
+  padding: .45rem .8rem;     /* no extra right padding now */
+  border-radius: 10px;
+  background: #fff !important;
+  color: #202020 !important;
+  caret-color: #202020 !important;
+  border: 1px solid rgba(0,0,0,.18) !important;
+  box-shadow: none !important;
+  -webkit-appearance: none;
+  appearance: none;
+  float: right;
+}
+/* Placeholder */
+body.skin-timeless #p-search input[type="search"]::placeholder,
+body.skin-timeless #p-search #searchInput::placeholder{
+  color: rgba(0,0,0,.55) !important;
+}
+/* Hide any built-in WebKit search decorations */
+body.skin-timeless #p-search input[type="search"]::-webkit-search-decoration,
+body.skin-timeless #p-search input[type="search"]::-webkit-search-cancel-button,
+body.skin-timeless #p-search input[type="search"]::-webkit-search-results-button,
+body.skin-timeless #p-search input[type="search"]::-webkit-search-results-decoration{
+  -webkit-appearance: none;
+   display: none;
 }
-body.bhc-branding .bhc-search-slot{
+/* Show ONE compact icon button to the right of the input (outside it) */
-   margin-left: auto;
+body.skin-timeless #p-search input#mw-searchButton,
-   display: flex;
+body.skin-timeless #p-search input#searchButton{
-   align-items: center;
+  position: absolute;
-   gap: .5rem;
+  top: 50%;
+  right: 6px;
+  transform: translateY(-50%);
+  width: 38px;
+  height: 38px;
+  padding: 0;
+   margin: 0;
+  border-radius: 10px;
+  border: 1px solid rgba(0,0,0,.18);
+   background: #fff;
+   cursor: pointer;
+  /* hide any text on the button */
+  text-indent: -9999px;
+   overflow: hidden;
+  /* simple inline SVG magnifier */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M10 18a8 8 0 1 1 5.293-14.293A8 8 0 0 1 10 18m0-2a6 6 0 1 0-6-6a6 6 0 0 0 6 6m9.707 6.293l-5.1-5.1l1.414-1.414l5.1 5.1z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
 }
-body.bhc-branding .bhc-search-slot + .bhc-test-badge{ margin-left: 12px; }
+/* If BOTH buttons exist, hide the “Go” one and keep “Search” */
+body.skin-timeless #p-search input#searchButton{
+  display: none !important;
+}
-body.bhc-branding .bhc-moved-search{
+/* Give the input room so the external button doesn't overlap it */
-   display: flex;
+body.skin-timeless #p-search input[type="search"],
-  align-items: center;
+body.skin-timeless #p-search #searchInput{
-  gap: .5rem;
+   margin-right: 46px; /* makes space for the icon button */
 }
-body.bhc-branding .bhc-search-input{
+/* Label styling */
-   width: min(340px, 40vw);
+body.skin-timeless #p-search label{
-  max-width: 100%;
+   color: rgba(32,32,32,.75) !important;
-  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); }
+/* =========================================================
+   Personal dropdown: ensure text is black
+   ========================================================= */
+body.skin-timeless #personal,
+body.skin-timeless #personal a,
+body.skin-timeless #personal h2,
+body.skin-timeless #personal h3,
+body.skin-timeless #personal .mw-portlet,
+body.skin-timeless #personal .mw-portlet *{
+  color: #202020 !important;
+}
-body.bhc-branding .bhc-search-submit{
+/* Dropdown panel background */
-  padding: .45rem .7rem;
+body.skin-timeless #personal .dropdown,
-  border-radius: 6px;
+body.skin-timeless #personal .mw-portlet-body{
-  border: 1px solid rgba(255,255,255,.35);
+   background: #fff !important;
-   background: rgba(0,0,0,.12);
-  color: #fff;
 }
 /* =========================================================
-    FOOTER
+    FOOTER: keep full width, adopt palette
     ========================================================= */
-body.bhc-branding .bhc-footer{
-  margin-top: 2.25rem;
+body.skin-timeless #mw-footer-container{
-  padding: 1.5rem 0;
    border-top: 6px solid var(--bhc-sand);
    background: #f6f6f6;
-  color: #222;
-  width: 100%;
 }
-body.bhc-branding .bhc-footer-inner{
+body.skin-timeless #mw-footer{
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 16px;
    font-family: var(--bhc-body-font);
-   font-size: .95rem;
+   color: #222;
-  line-height: 1.6;
 }
 /* =========================================================
-    Hide default site logo (BHC logo lives in the custom header)
+    Spacing: push content down a bit further under the header
-   Scoped to branded mode only
     ========================================================= */
-body.bhc-branding .mw-logo,
-body.bhc-branding .mw-wiki-logo,
+body.skin-timeless #mw-content-container{
-body.bhc-branding #p-logo,
+   padding-top: 1.9rem;   /* increased */
-body.bhc-branding .vector-site-logo,
-body.bhc-branding .vector-header-start{
-   display: none !important;
 }

Anonymous

Search

MediaWiki:Bhcvectorbrand-css: Difference between revisions

Latest revision as of 17:01, 24 January 2026

Navigation

Wiki tools

Page tools