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
+    Bellingham Heritage Centre – Timeless skin branding (CSS-only)
-   Scoped to body.bhc-branding only
+    Applies ONLY when the Timeless skin is in use.
-    Header is NON-STICKY and scrolls with the page
     ========================================================= */
-/* =========================================================
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;700&family=Satisfy&display=swap');
-   BHC Vector Brand – Typography + colour palette (starter)
-   Scoped to body.bhc-branding only
+body.skin-timeless{
-   ========================================================= */
+  /* Palette */
+  --bhc-teal: rgb(130,156,149);
+  --bhc-olive: rgb(165,174,121);
+  --bhc-sand: rgb(228,186,149);
-/* Font load (works if your CSP allows Google Fonts). If blocked, fallbacks still work. */
+  /* Heritage text colour (per your site) */
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;700&family=Satisfy&display=swap');
+  --bhc-maroon: rgb(93, 8, 58);
-body.bhc-branding{
+   --bhc-link: #005DB3;
-  /* Core palette (matches your current header colours + site accents) */
-  --bhc-teal: rgb(130,156,149);      /* header background */
-  --bhc-olive: rgb(165,174,121);     /* top border */
-  --bhc-sand: rgb(228,186,149);      /* bottom border / divider */
-  --bhc-maroon: #800020;             /* heritage accent (from your user.css) */
-   --bhc-link: #005DB3;               /* link blue (from your user.css) */
    --bhc-text: #202020;
+  /* Header now WHITE */
+  --bhc-header-bg: #ffffff;
+  --bhc-header-text: #202020;
    /* Fonts */
@@ Line 26: / Line 26: @@
    --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; }
 }
-/* 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{
+body.skin-timeless a:hover{ text-decoration: underline; }
-  color: var(--bhc-link);
-}
-body.bhc-branding a:hover{
-  text-decoration: underline;
-}
-/* Headings (heritage feel, closer to main site) */
+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 53: / Line 60: @@
 }
-/* Simple “site-like” section divider under H2 */
+body.skin-timeless .mw-parser-output h1{
-body.bhc-branding .mw-parser-output h2{
-  border-bottom: 3px solid var(--bhc-sand);
-  padding-bottom: .25rem;
-}
-/* Optional: make H1 feel more like the site’s hero heading */
-body.bhc-branding .mw-parser-output h1{
-  font-weight: 700;
-}
-/* Optional: a script accent class you can use in wiki content if you want */
-body.bhc-branding .bhc-script{
-  font-family: var(--bhc-accent-font);
-}
-/* =========================================================
-   BHC Vector Brand – Font sizing + readability
-   Scoped to body.bhc-branding only
-   ========================================================= */
-/* 1) Base text size + rhythm */
-body.bhc-branding{
-  font-size: 18px;          /* was ~14–16px in many Vector setups */
-  line-height: 1.65;
-}
-/* Ensure the main content follows the base size */
-body.bhc-branding .mw-parser-output,
-body.bhc-branding .mw-content-ltr,
-body.bhc-branding .mw-content-rtl{
-  font-size: 1rem;
-  line-height: 1.65;
-}
-/* 2) Heading scale (keeps “wiki feel”, but clearer hierarchy) */
-body.bhc-branding .mw-parser-output h1{
    font-size: 2.05rem;
    line-height: 1.15;
-   margin-top: 0.25rem;
+   margin: 0.25rem 0 0.75rem;
-   margin-bottom: 0.75rem;
+   font-weight: 700;
 }
-body.bhc-branding .mw-parser-output h2{
+body.skin-timeless .mw-parser-output h2{
    font-size: 1.55rem;
    line-height: 1.2;
-   margin-top: 1.6rem;
+   margin: 1.6rem 0 0.6rem;
-   margin-bottom: 0.6rem;
+  border-bottom: 3px solid var(--bhc-sand);
+   padding-bottom: .25rem;
 }
-body.bhc-branding .mw-parser-output h3{
+body.skin-timeless .mw-parser-output h3{
    font-size: 1.25rem;
    line-height: 1.25;
-   margin-top: 1.2rem;
+   margin: 1.2rem 0 0.45rem;
-  margin-bottom: 0.45rem;
 }
-/* Optional: keep lower headings tidy */
+body.skin-timeless .mw-parser-output h4{
-body.bhc-branding .mw-parser-output h4{
    font-size: 1.1rem;
    line-height: 1.3;
 }
-/* 3) Common “small” areas: make them slightly less tiny */
+body.skin-timeless .mw-parser-output p{ margin: 0.75rem 0; }
-body.bhc-branding #toc,
-body.bhc-branding .toc,
+body.skin-timeless .mw-parser-output ul,
-body.bhc-branding .mw-normal-catlinks,
+body.skin-timeless .mw-parser-output ol{ margin: 0.6rem 0 0.9rem 1.25rem; }
-body.bhc-branding .catlinks,
-body.bhc-branding .mw-editsection,
+body.skin-timeless .mw-parser-output li{ margin: 0.2rem 0; }
-body.bhc-branding .mw-editsection a,
-body.bhc-branding .mw-changeslist,
+body.skin-timeless #toc,
-body.bhc-branding .mw-footer{
+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;
 }
-/* 4) Tighten paragraph spacing slightly (readable but not airy) */
+/* Optional accent class you can use in wiki content */
-body.bhc-branding .mw-parser-output p{
+body.skin-timeless .bhc-script{ font-family: var(--bhc-accent-font); }
-  margin: 0.75rem 0;
-}
+/* =========================================================
+   HEADER: Timeless header full-width + WHITE background + bars
+   ========================================================= */
-/* 5) Lists: slightly more breathing room */
+body.skin-timeless #mw-header-container{
-body.bhc-branding .mw-parser-output ul,
+  background: var(--bhc-header-bg) !important;      /* white */
-body.bhc-branding .mw-parser-output ol{
+   border-top: 5px solid var(--bhc-olive) !important;
-   margin: 0.6rem 0 0.9rem 1.25rem;
+   border-bottom: 10px solid var(--bhc-sand) !important;
-}
-body.bhc-branding .mw-parser-output li{
-   margin: 0.2rem 0;
 }
-@media (max-width: 720px){
+/* Make all header text dark by default */
-   body.bhc-branding{ font-size: 16.5px; }
+body.skin-timeless #mw-header,
+body.skin-timeless #mw-header a{
+   color: var(--bhc-header-text) !important;
 }
-:root { --bhc-bar-height: 0px; }
+/* Make header a flex row */
+body.skin-timeless #mw-header{
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
-/* Base */
+  /* a bit more vertical room for the larger logo + strapline */
-body.bhc-branding{
+   padding-top: 14px;
-   padding-top: 0;
+   padding-bottom: 34px;
-   overflow-x: hidden;
 }
 /* ---------------------------------------------------------
-    HEADER BAR (scrolls normally)
+    Layout widths: make logo/title block wider, search narrower
     --------------------------------------------------------- */
-body.bhc-branding .bhc-sitebar{
+body.skin-timeless #p-logo-text{
-   position: static; /* non-sticky */
+   flex: 1 1 auto;
-  margin: 0;
+   min-width: 640px;        /* ~50% wider than before */
-   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 */
+body.skin-timeless #p-search{
-   position: relative !important;
+  flex: 0 0 auto;
-   z-index: 999999 !important;
+   width: 360px;            /* slightly narrower container */
+   max-width: 34vw;
+   margin-left: auto;
 }
-body.bhc-branding .bhc-sitebar-inner{
+/* ---------------------------------------------------------
-  max-width: 1200px;
+   SITE TITLE + LOGO at left (logo 50% bigger)
-  margin: 0 auto;
+   Timeless uses: #p-logo-text a#p-banner
-  padding: 12px 16px;
+   --------------------------------------------------------- */
-  display: flex;
-  align-items: center;
+body.skin-timeless #p-logo-text{
-  gap: 12px;
+  position: relative;
-  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
 }
-body.bhc-branding .bhc-logo{
+/* Bigger “logo + title” line */
-   width: 56px;
+body.skin-timeless #p-logo-text #p-banner{
-   height: 56px;
+   display: inline-block;
-   background: url(/extensions/BHCVectorBrand/resources/images/bhc-logo.png) center/contain no-repeat;
+  text-decoration: none;
-   border-radius: 6px;
-}
+  /* 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;
-body.bhc-branding .bhc-title{
+  padding-left: 104px;             /* 84 + ~20 gap */
-   font-size: 18px;
+   min-height: 84px;
-   letter-spacing: 1px;
+   line-height: 84px;
 }
-body.bhc-branding .bhc-strapline{
+/* If Timeless forces uppercase / long styles, relax wrapping */
-   opacity: .95;
+body.skin-timeless #p-logo-text #p-banner.long{
-  margin-top: 2px;
+   white-space: normal;
 }
-body.bhc-branding .bhc-test-badge{
+/* Hide Timeless sidebar logo so we don’t double-brand */
-   background: rgba(0,0,0,.18);
+body.skin-timeless #mw-site-navigation #p-logo{
-  border: 1px solid rgba(255,255,255,.35);
+   display: none !important;
-  padding: 4px 10px;
-  border-radius: 999px;
-  font-size: 12px;
-  letter-spacing: .06em;
-  white-space: nowrap;
 }
 /* ---------------------------------------------------------
-    Push the page down below BHC bar + Vector clearance
+    STRAPLINE (Option A): reuse #siteSub, position in header
-   (You tested ~10rem as "perfect")
     --------------------------------------------------------- */
-/* Bulletproof “push page down” spacer.
+body.skin-timeless #siteSub{
-   Creates real flow space below the BHC header. */
+   position: absolute;
-body.bhc-branding #content::before{
-   content: "";
+   /* Align under title start (104px = padding-left above) */
-  display: block;
+   left: 104px;
-   /* height: calc(var(--bhc-bar-height) + clamp(2rem, 4vh, 6rem));*/
+  top: 86px;
-   height: calc(var(--bhc-bar-height) + 10rem));
-}
+  margin: 0;
+  padding: 0;
-/* ---------------------------------------------------------
+  font-family: var(--bhc-body-font);
-   Vector sticky UI should sit BELOW the BHC header
+  font-size: 18px;
-   --------------------------------------------------------- */
+  line-height: 1.25;
+  font-style: normal;
+  color: rgba(32,32,32,.78) !important;
-body.bhc-branding .vector-sticky-header,
+  z-index: 2;
-body.bhc-branding .vector-page-toolbar{
+  pointer-events: none;
-  top: var(--bhc-bar-height) !important;
 }
-body.bhc-branding .vector-header-container,
+/* Prevent #siteSub reserving visible space in content area */
-body.bhc-branding .mw-header,
+body.skin-timeless #bodyContentOuter #siteSub{
-body.bhc-branding #mw-head{
+   height: 0;
-   top: var(--bhc-bar-height) !important;
+  overflow: visible;
 }
-/* ---------------------------------------------------------
+/* =========================================================
-    SEARCH: moved into the BHC header
+    SEARCH: make icon OUTSIDE the input (to the right)
-    --------------------------------------------------------- */
+   Timeless search is usually: #searchform > #simpleSearch > input + buttons
+    ========================================================= */
-body.bhc-branding #p-search,
+/* Ensure the search area is positioned for the button */
-body.bhc-branding .vector-search-box,
+body.skin-timeless #p-search #simpleSearch{
-body.bhc-branding .vector-search-box-vue{
+   position: relative;
-   display: none !important;
 }
-body.bhc-branding .bhc-search-slot{
+/* Input: remove “in-field icon” spacing; keep clean white box */
-   margin-left: auto;
+body.skin-timeless #p-search input[type="search"],
-   display: flex;
+body.skin-timeless #p-search #searchInput{
-   align-items: center;
+   width: min(280px, 26vw);
-   gap: .5rem;
+  max-width: 100%;
-}
+   padding: .45rem .8rem;     /* no extra right padding now */
+   border-radius: 10px;
+  background: #fff !important;
+   color: #202020 !important;
+  caret-color: #202020 !important;
-body.bhc-branding .bhc-search-slot + .bhc-test-badge{
+  border: 1px solid rgba(0,0,0,.18) !important;
-   margin-left: 12px;
+   box-shadow: none !important;
-}
-body.bhc-branding .bhc-moved-search{
+  -webkit-appearance: none;
-  display: flex;
+   appearance: none;
-  align-items: center;
-   gap: .5rem;
-}
-body.bhc-branding .bhc-search-input{
+   float: right;
-   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{
+/* Placeholder */
-   color: rgba(255,255,255,.75);
+body.skin-timeless #p-search input[type="search"]::placeholder,
+body.skin-timeless #p-search #searchInput::placeholder{
+   color: rgba(0,0,0,.55) !important;
 }
-body.bhc-branding .bhc-search-submit{
+/* Hide any built-in WebKit search decorations */
-  padding: .45rem .7rem;
+body.skin-timeless #p-search input[type="search"]::-webkit-search-decoration,
-  border-radius: 6px;
+body.skin-timeless #p-search input[type="search"]::-webkit-search-cancel-button,
-  border: 1px solid rgba(255,255,255,.35);
+body.skin-timeless #p-search input[type="search"]::-webkit-search-results-button,
-   background: rgba(0,0,0,.12);
+body.skin-timeless #p-search input[type="search"]::-webkit-search-results-decoration{
-   color: #fff;
+   -webkit-appearance: none;
+   display: none;
 }
-/* ---------------------------------------------------------
+/* Show ONE compact icon button to the right of the input (outside it) */
-   FOOTER
+body.skin-timeless #p-search input#mw-searchButton,
-   --------------------------------------------------------- */
+body.skin-timeless #p-search input#searchButton{
+  position: absolute;
+  top: 50%;
+  right: 6px;
+  transform: translateY(-50%);
-body.bhc-branding .bhc-footer{
+   width: 38px;
-   margin-top: 2.25rem;
+   height: 38px;
-  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{
+   padding: 0;
-   max-width: 1200px;
+   margin: 0;
-   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;
-}
-/* =========================================================
+  border-radius: 10px;
-   Hide default Vector / MediaWiki site logo
+  border: 1px solid rgba(0,0,0,.18);
-   (BHC logo lives in the custom header)
+  background: #fff;
-   ========================================================= */
-/* Legacy + new Vector variants */
+   cursor: pointer;
-body.bhc-branding .mw-logo,
-body.bhc-branding .mw-wiki-logo,
-body.bhc-branding .vector-site-logo,
-body.bhc-branding .vector-header-start {
-   display: none !important;
-}
-/* =========================================================
+  /* hide any text on the button */
-   Footer should visually win over the sidebar on short pages
+  text-indent: -9999px;
-   (CSS-only stabiliser; avoids fighting Vector layout)
+  overflow: hidden;
-   ========================================================= */
-/* Ensure the footer forms a solid mask */
+  /* simple inline SVG magnifier */
-body.bhc-branding .bhc-footer{
+  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: #f6f6f6;
+   background-repeat: no-repeat;
-   position: relative;
+   background-position: center;
-  z-index: 9999;
 }
-/* Keep sidebar in a lower stacking layer */
+/* If BOTH buttons exist, hide the “Go” one and keep “Search” */
-body.bhc-branding .vector-sidebar,
+body.skin-timeless #p-search input#searchButton{
-body.bhc-branding .vector-sidebar-container,
+   display: none !important;
-body.bhc-branding .mw-sidebar{
-   position: relative;
-  z-index: 1;
 }
-body.bhc-branding #mw-navigation{
+/* Give the input room so the external button doesn't overlap it */
-   z-index: 1;
+body.skin-timeless #p-search input[type="search"],
+body.skin-timeless #p-search #searchInput{
+   margin-right: 46px; /* makes space for the icon button */
 }
-body.bhc-branding .bhc-footer{
-   z-index: 2;
+/* Label styling */
-  position: relative;
+body.skin-timeless #p-search label{
+   color: rgba(32,32,32,.75) !important;
 }
 /* =========================================================
-    FIX: Make Vector sidebar (#mw-panel) participate in layout
+    Personal dropdown: ensure text is black
-   so the footer can sit below it on short pages.
-   Branded mode only.
     ========================================================= */
-/* 1) Return sidebar panel to normal flow */
+body.skin-timeless #personal,
-body.bhc-branding #mw-navigation #mw-panel{
+body.skin-timeless #personal a,
-   position: static !important;
+body.skin-timeless #personal h2,
-  top: auto !important;
+body.skin-timeless #personal h3,
-  left: auto !important;
+body.skin-timeless #personal .mw-portlet,
-  right: auto !important;
+body.skin-timeless #personal .mw-portlet *{
-  bottom: auto !important;
+   color: #202020 !important;
-  height: auto !important;
-  overflow: visible !important;
 }
-/* 2) Make navigation + content behave like two columns (grid) */
+/* Dropdown panel background */
-body.bhc-branding .mw-page-container{
+body.skin-timeless #personal .dropdown,
-   display: grid;
+body.skin-timeless #personal .mw-portlet-body{
-  grid-template-columns: 260px 1fr; /* adjust width later if desired */
+   background: #fff !important;
-  column-gap: 1.25rem;
-  align-items: start;
 }
-/* Put navigation in column 1 */
+/* =========================================================
-body.bhc-branding #mw-navigation{
+   FOOTER: keep full width, adopt palette
-   grid-column: 1;
+   ========================================================= */
-   align-self: start;
+body.skin-timeless #mw-footer-container{
+   border-top: 6px solid var(--bhc-sand);
+   background: #f6f6f6;
 }
-/* Put content in column 2 */
+body.skin-timeless #mw-footer{
-body.bhc-branding #content{
+   font-family: var(--bhc-body-font);
-   grid-column: 2;
+   color: #222;
-   min-width: 0; /* prevents overflow */
 }
-/* 3) Footer spans both columns and clears everything */
+/* =========================================================
-body.bhc-branding .bhc-footer{
+   Spacing: push content down a bit further under the header
-   grid-column: 1 / -1;
+   ========================================================= */
-   clear: both;
+body.skin-timeless #mw-content-container{
+   padding-top: 1.9rem;   /* increased */
 }

Anonymous

Search

MediaWiki:Bhcvectorbrand-css: Difference between revisions

Latest revision as of 17:01, 24 January 2026

Navigation

Wiki tools

Page tools