MediaWiki:Timeless.css: Difference between revisions

Revision as of 17:03, 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);

  /* 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 */
}