Latest revision as of 20:55, 21 October 2025

/* CSS placed here will be applied to all skins */
/* Generic hatnote style */

.IPA { font-family: "Charis SIL", "Gentium Plus", "DejaVu Sans", "Noto Sans", serif; }

.icon-wikipedia {
  display: inline-block;
  width: 1em; height: 1em;         /* scales with text */
  background-image: url("https://en.wikipedia.org/static/favicon/wikipedia.ico");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: -0.15em;          /* nudge to baseline */
  margin-right: 0.35em;
}

.seealso {
  font-style: italic;
  font-size: 75%;
  color: #202122;              /* default text color; adapts well */
  margin: 2.0em 0 0.8em 0;     /* a little space below */
}

.seealso .label {
  font-style: normal;  /* keep label upright */
  opacity: .85;
  margin-right: .25em;
}
.seealso .icon {
  font-style: normal;
  opacity: .75;
  margin-right: .25em;
}

/* Category link hatnote style */
.catlink {
  /*display: flex;            /* icon + text on one line */
  align-items: center;
  gap: 0.35em;                /* spacing between icon and text */
  font-size: 80%;             /* slightly smaller than body */
  /*font-style: italic;        /* make it note-like */
  color: #202122;             /* matches normal text color */
  margin: 0.5em 0em 0.5em 0em;            /* some vertical breathing room */
  padding-bottom: 0.5em;
}

.catlink .icon {
  font-style: normal;         /* keep emoji upright */
  opacity: 0.85;              /* soften the icon a bit */
}

/* Preferred name / term box */
.prefname {
  display: flex;              /* puts icon + text inline */
  align-items: center;        /* vertically centers the icon */
  gap: 0.4em;                 /* spacing between icon and text */
  font-style: italic;         /* makes note-style text */
  font-size: 85%;             /* slightly smaller than body text */
  color: #202122;             /* matches Vector/Timeless default text */
  background: #f8f9fa;        /* light background (Wikipedia gray) */
  border-left: 3px solid #36c; /* colored accent bar (blue, like links) */
  padding: 0.4em 0.6em;
  margin: 0.5em 0;
  border-radius: 0.25em;      /* small rounding for modern feel */
}

.prefname .icon {
  font-style: normal;         /* keep icon upright */
  opacity: 0.75;              /* soften icon a bit */
}

.hatnote,
.dablink,
.rellink {
  font-style: italic;
  font-size: 75%;
  color: #202122;              /* default text color; adapts well to Vector/Timeless */
  margin: 0.2em 0 0.8em 0;     /* a little space below */
}

/* If a hatnote contains other blocks (rare), keep it inline-looking */
.hatnote > :first-child { margin-top: 0; }
.hatnote > :last-child  { margin-bottom: 0; }

/* When multiple hatnotes stack, tighten the gaps */
.hatnote + .hatnote,
.hatnote + .dablink,
.dablink + .hatnote,
.dablink + .dablink,
.rellink + .rellink,
.rellink + .hatnote {
  margin-top: -0.4em;
}

/* Ensure links inside hatnotes are clearly visible */
.hatnote a,
.dablink a,
.rellink a {
  text-decoration: none;
  border-bottom: 1px solid #ddd;  /* subtle underline like Wikipedia */
}
.hatnote a:hover,
.dablink a:hover,
.rellink a:hover {
  text-decoration: none;
  border-bottom-color: #54595d;
}

/* Optional: make small note text slightly grayer in dark modes without hard-coding colors */
@media (prefers-color-scheme: dark) {
  .hatnote, .dablink, .rellink { color: #eaecf0; }
}
.hatnote::before {
  content: "ⓘ";
  font-style: normal;
  margin-right: .35em;
  opacity: .65;
}

/* Hero image viewport (fixed 250px high, crop anything below) */
.main-hero {
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  margin: 1rem auto 0.75rem;
}

/* MediaWiki wraps images; make the wrapper fill the viewport */
.main-hero a.image,
.main-hero span.image {            /* some skins use span when link= is empty */
  display: block;
  width: 100%;
  height: 100%;
}

/* Target the real <img> MediaWiki renders */
.main-hero img.mw-file-element {
  display: block;
  width: 100% !important;         /* override any inline width */
  height: 100% !important;        /* force it to fill the 250px box */
  object-fit: cover;              /* crop while preserving aspect ratio */
  object-position: top;           /* show from the top down */
  border-radius: 8px;
  margin: 0;
  padding: 0;
}

/* Caption stays below the cropped area */
.main-hero-cap {
  text-align: center;
  color: #6f6f6f;
  font-size: 0.92rem;
  margin-top: 0.45rem;
  font-style: italic;
}