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
     ========================================================= */
-:root { --bhc-bar-height: 0px; }
+@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;
-/* Base */
-body.bhc-branding{
-  padding-top: 0;
    overflow-x: hidden;
+}
+@media (max-width: 720px){
+  body.skin-timeless{ font-size: 16.5px; }
 }
 /* ---------------------------------------------------------
-    HEADER BAR (scrolls normally)
+    Global typography (content)
     --------------------------------------------------------- */
-body.bhc-branding .bhc-sitebar{
+body.skin-timeless,
-   position: static;
+body.skin-timeless .mw-body,
-   border-top: 5px solid rgb(165,174,121);
+body.skin-timeless .mw-parser-output{
-   border-bottom: 10px solid rgb(228,186,149);
+   font-family: var(--bhc-body-font);
-   background: rgb(130,156,149);
+   color: var(--bhc-text);
-   color: #fff;
+}
+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.bhc-branding .bhc-sitebar-inner{
+body.skin-timeless .mw-parser-output h3{
-   max-width: 1200px;
+   font-size: 1.25rem;
-   margin: 0 auto;
+   line-height: 1.25;
-   padding: 12px 16px;
+   margin: 1.2rem 0 0.45rem;
-  display: flex;
+}
-  align-items: center;
-   gap: 12px;
+body.skin-timeless .mw-parser-output h4{
-   font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
+   font-size: 1.1rem;
+   line-height: 1.3;
 }
-body.bhc-branding .bhc-logo{
+body.skin-timeless .mw-parser-output p{ margin: 0.75rem 0; }
-  width: 56px;
-  height: 56px;
+body.skin-timeless .mw-parser-output ul,
-  background: url(/extensions/BHCVectorBrand/resources/images/bhc-logo.png) center/contain no-repeat;
+body.skin-timeless .mw-parser-output ol{ margin: 0.6rem 0 0.9rem 1.25rem; }
-   border-radius: 6px;
+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;
 }
-body.bhc-branding .bhc-title{
+/* Optional accent class you can use in wiki content */
-   font-size: 18px;
+body.skin-timeless .bhc-script{ font-family: var(--bhc-accent-font); }
-   letter-spacing: 1px;
+/* =========================================================
+   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;
 }
-body.bhc-branding .bhc-strapline{
+/* Make all header text dark by default */
-   opacity: .95;
+body.skin-timeless #mw-header,
-  margin-top: 2px;
+body.skin-timeless #mw-header a{
+   color: var(--bhc-header-text) !important;
 }
-body.bhc-branding .bhc-test-badge{
+/* Make header a flex row */
-   margin-left: auto;
+body.skin-timeless #mw-header{
-   background: rgba(0,0,0,.18);
+   position: relative;
-   border: 1px solid rgba(255,255,255,.35);
+   display: flex;
-   padding: 4px 10px;
+   align-items: flex-start;
-   border-radius: 999px;
+   gap: 16px;
-   font-size: 12px;
-   letter-spacing: .06em;
+   /* a bit more vertical room for the larger logo + strapline */
+   padding-top: 14px;
+   padding-bottom: 34px;
 }
 /* ---------------------------------------------------------
-    FOOTER
+    Layout widths: make logo/title block wider, search narrower
     --------------------------------------------------------- */
-body.bhc-branding .bhc-footer{
+body.skin-timeless #p-logo-text{
-   margin-top: 2.25rem;
+   flex: 1 1 auto;
-  padding: 1.5rem 0;
+   min-width: 640px;        /* ~50% wider than before */
-   border-top: 6px solid rgb(228,186,149);
-  background: #f6f6f6;
-  color: #222;
-  clear: both;
-  width: 100%;
 }
-body.bhc-branding .bhc-footer-inner{
+body.skin-timeless #p-search{
-   max-width: 1200px;
+   flex: 0 0 auto;
-  margin: 0 auto;
+   width: 360px;            /* slightly narrower container */
-   padding: 0 16px;
+   max-width: 34vw;
-   font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
+   margin-left: auto;
-   font-size: .95rem;
-  line-height: 1.6;
 }
 /* ---------------------------------------------------------
-    Vector sticky UI should sit BELOW the BHC header (only while visible)
+    SITE TITLE + LOGO at left (logo 50% bigger)
-    JS sets --bhc-bar-height to header height when header is on-screen, else 0
+    Timeless uses: #p-logo-text a#p-banner
     --------------------------------------------------------- */
-body.bhc-branding .vector-sticky-header,
+body.skin-timeless #p-logo-text{
-body.bhc-branding .vector-page-toolbar{
+   position: relative;
-   top: var(--bhc-bar-height) !important;
 }
-/* Hide the original Vector search portlet/container now that we move the form */
+/* Bigger “logo + title” line */
-body.bhc-branding #p-search,
+body.skin-timeless #p-logo-text #p-banner{
-body.bhc-branding .vector-search-box,
+  display: inline-block;
-body.bhc-branding .vector-search-box-vue {
+  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;
 }
-/* Make the moved search sit nicely on the right */
+/* ---------------------------------------------------------
-body.bhc-branding .bhc-search-slot {
+   STRAPLINE (Option A): reuse #siteSub, position in header
-   margin-left: auto;
+   --------------------------------------------------------- */
-   display: flex;
-   align-items: center;
+body.skin-timeless #siteSub{
-   gap: .5rem;
+  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;
 }
-/* Basic styling for the moved search input */
+/* =========================================================
-body.bhc-branding .bhc-moved-search {
+   SEARCH: make icon OUTSIDE the input (to the right)
-   display: flex;
+   Timeless search is usually: #searchform > #simpleSearch > input + buttons
-  align-items: center;
+   ========================================================= */
-  gap: .5rem;
+/* Ensure the search area is positioned for the button */
+body.skin-timeless #p-search #simpleSearch{
+   position: relative;
 }
-body.bhc-branding .bhc-search-input {
+/* Input: remove “in-field icon” spacing; keep clean white box */
-   width: min(340px, 40vw);
+body.skin-timeless #p-search input[type="search"],
+body.skin-timeless #p-search #searchInput{
+   width: min(280px, 26vw);
    max-width: 100%;
-   padding: .45rem .6rem;
-   border-radius: 6px;
+   padding: .45rem .8rem;     /* no extra right padding now */
-   border: 1px solid rgba(255,255,255,.45);
+   border-radius: 10px;
-   background: rgba(255,255,255,.12);
-   color: #fff;
+  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;
 }
-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;
 }
-/* If there’s a submit button, keep it subtle */
+/* Hide any built-in WebKit search decorations */
-body.bhc-branding .bhc-search-submit {
+body.skin-timeless #p-search input[type="search"]::-webkit-search-decoration,
-  padding: .45rem .7rem;
+body.skin-timeless #p-search input[type="search"]::-webkit-search-cancel-button,
-  border-radius: 6px;
+body.skin-timeless #p-search input[type="search"]::-webkit-search-results-button,
-  border: 1px solid rgba(255,255,255,.35);
+body.skin-timeless #p-search input[type="search"]::-webkit-search-results-decoration{
-   background: rgba(0,0,0,.12);
+   -webkit-appearance: none;
-   color: #fff;
+   display: none;
 }
-/* Ensure the BHC bar is fully visible and not clipped by Vector layout */
+/* Show ONE compact icon button to the right of the input (outside it) */
-body.bhc-branding #content .bhc-sitebar {
+body.skin-timeless #p-search input#mw-searchButton,
-   margin-top: 0 !important;
+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 Vector sticky header overlaps, add a safe spacer above BHC bar */
+/* If BOTH buttons exist, hide the “Go” one and keep “Search” */
-body.bhc-branding #content {
+body.skin-timeless #p-search input#searchButton{
-   padding-top: 0 !important;
+  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;
 }
-/* Make sure the BHC bar stays on-screen within #content */
+/* =========================================================
-body.bhc-branding .bhc-sitebar {
+   Personal dropdown: ensure text is black
-   position: relative !important;
+   ========================================================= */
-   top: 0 !important;
+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

Latest revision as of 17:01, 24 January 2026

Navigation

Wiki tools

Page tools