MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

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

/* 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: 95%;             /* 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;
}