Revision as of 10:11, 22 August 2025

/* CSS placed here will be applied to all skins */
/* Generic hatnote style */
.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 #a2a9b1;  /* 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;
}