MediaWiki:Timeless.css: Difference between revisions

Revision as of 15:43, 24 January 2026

/* All CSS here will be loaded for users of the Timeless skin */
/* =========================================================
   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);
  --bhc-maroon: #800020;
  --bhc-link: #005DB3;
  --bhc-text: #202020;

  /* Header now WHITE (per request) */
  --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
   ========================================================= */

/* The overall header bar */
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;
}

/* Ensure header content can host absolute strapline */
body.skin-timeless #mw-header{
  position: relative;
  padding-top: 10px;
  padding-bottom: 22px; /* breathing room for strapline */
}

/* ---------------------------------------------------------
   Header layout: give p-logo-text more room, shrink p-search
   --------------------------------------------------------- */

/* Timeless header is within #mw-header; make it a flex row */
body.skin-timeless #mw-header{
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Logged-in / personal area stays at far right (Timeless markup varies),
   so we let main blocks flex and personal sits naturally. */
body.skin-timeless #p-logo-text{
  flex: 1 1 auto;          /* take remaining space */
  min-width: 420px;        /* wide enough for your title */
}

body.skin-timeless #p-search{
  flex: 0 0 auto;          /* do not grow */
  width: 420px;            /* container width (input will be smaller) */
  max-width: 38vw;         /* responsive */
  margin-left: auto;       /* push to the right */
}

/* ---------------------------------------------------------
   1) SITE TITLE + LOGO at left
   Timeless uses: #p-logo-text a#p-banner
   --------------------------------------------------------- */

body.skin-timeless #p-logo-text{
  position: relative;
}

body.skin-timeless #p-logo-text #p-banner{
  display: inline-block;
  font-family: var(--bhc-heading-font) !important;
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: .02em;
  text-decoration: none;

  background-image: url(/resources/assets/BHClogo.jpg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 56px 56px;

  padding-left: 72px;      /* logo + gap */
  min-height: 56px;
  line-height: 56px;

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

/* Hide Timeless sidebar logo so we don’t double-brand */
body.skin-timeless #mw-site-navigation #p-logo{
  display: none !important;
}

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

body.skin-timeless #siteSub{
  position: absolute;

  /* Align under the title start (72px = 56 logo + 16 gap) */
  left: 72px;
  top: 58px;

  margin: 0;
  padding: 0;

  font-family: var(--bhc-body-font);
  font-size: 1.0rem;
  line-height: 1.25;
  font-style: normal;
  color: rgba(32,32,32,.85) !important;

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

/* Prevent #siteSub reserving visible space in content area */
body.skin-timeless #bodyContentOuter #siteSub{
  height: 0;
  overflow: visible;
}

/* ---------------------------------------------------------
   3) SEARCH: smaller, right aligned, white background, dark text
   Also: keep room for search icon if Timeless overlays one
   --------------------------------------------------------- */

/* Tidy wrapper */
body.skin-timeless #p-search #simpleSearch,
body.skin-timeless #p-search #searchInput-container{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* The input itself */
body.skin-timeless #p-search input[type="search"],
body.skin-timeless #p-search #searchInput{
  width: min(320px, 28vw);
  max-width: 100%;

  padding: .45rem .9rem;   /* base padding */
  padding-right: 2.4rem;   /* leave space for a search icon inside the field */

  border-radius: 8px;

  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;            /* right-align within p-search container */
}

/* Placeholder */
body.skin-timeless #p-search input[type="search"]::placeholder,
body.skin-timeless #p-search #searchInput::placeholder{
  color: rgba(0,0,0,.55) !important;
}

/* Remove internal “X / decorations” in WebKit search fields */
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;
}

/* If Timeless shows a label, keep it subtle (dark) */
body.skin-timeless #p-search label{
  color: rgba(32,32,32,.75) !important;
}

/* If Timeless adds a search icon element inside the container, keep it visible.
   (These selectors are “best guess” safe overrides; harmless if not present.) */
body.skin-timeless #p-search .searchButton,
body.skin-timeless #p-search .mw-searchButton,
body.skin-timeless #p-search .mw-fallbackSearchButton{
  filter: none !important;
}

/* ---------------------------------------------------------
   Personal dropdown (#personal): text should be 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;
}

/* If the dropdown panel has a background, keep it white */
body.skin-timeless #personal .dropdown,
body.skin-timeless #personal .mw-portlet-body{
  background: #fff !important;
}

/* ---------------------------------------------------------
   4) 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;
}

/* ---------------------------------------------------------
   5) Spacing: ensure content doesn’t jam up under the header
   --------------------------------------------------------- */

body.skin-timeless #mw-content-container{
  padding-top: 1.1rem;
}