MediaWiki:Fluent.css

/* ===== Echo header badge fixes for Fluent (place at end of Common.css or Fluent.css) ===== */

/* layout for the small header area only */
#p-personal-extra { display: flex !important; align-items: center !important; gap: 8px !important; }
#p-personal-extra > ul { display: flex !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; align-items: center !important; }

/* badge shell — do not use 'background' shorthand here (it would clear background-image) */
#p-personal-extra .mw-echo-notifications-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  margin: 0 4px !important;
  border-radius: 50% !important;
  position: relative !important;
  overflow: visible !important;
  background-color: transparent !important;   /* safe: does not clear background-image */
  color: #333 !important;
  text-decoration: none !important;
  font-size: 0 !important; /* hide any icon-font fallback glyphs */
}

/* hide any ::before/::after icon-font pseudo content in header badges */
#p-personal-extra .mw-echo-notifications-badge::before,
#p-personal-extra .mw-echo-notifications-badge::after,
#p-personal-extra .mw-echo-notifications-badge .oo-ui-iconElement-icon,
#p-personal-extra .mw-echo-notifications-badge .oo-ui-iconElement-icon::before,
#p-personal-extra .mw-echo-notifications-badge .oo-ui-iconElement-icon::after {
  display: none !important;
  content: none !important;
}

/* Bell icon (data-URI SVG) */
#p-personal-extra .mw-echo-notifications-badge.oo-ui-icon-bell {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTEyIDIyYTIuNSAyLjUgMCAwIDAgMi40NS0yaC00LjlBMi41IDIuNSAwIDAgMCAxMiAyMnp6Ni02VjExYzAtMy4wNy0xLjY0LTUuNjQtNC41LTYuMzJWNGEuNSAxLjUgMCAwIDAtMyAwdi42OEM3LjY0IDUuMzYgNiA3LjkyIDYgMTF2NWwtMS43IDEuN0ExIDEgMCAwIDAgNS4zIDE5aDEzLjRhMSAxIDAgMCAwIC43LTEuNkwxOCAxNnonLz48L3N2Zz4=") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 20px 20px !important;
  background-color: transparent !important;
}

/* Tray icon (data-URI SVG) */
#p-personal-extra .mw-echo-notifications-badge.oo-ui-icon-tray {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTE5IDNINWEyIDIgMCAwIDAtMiAydjZhMiAyIDAgMCAwIDIgMmg0bDIgMyAyLTNoNGEyIDIgMCAwIDAgMi0yVjVhMiAyIDAgMCAwLTItMnptLTcgOWEzIDMgMCAxIDEgMC02IDMgMyAwIDAgMSAwIDZ6Jy8+PC9zdmc+") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 20px 20px !important;
  background-color: transparent !important;
}

/* keep header textual label accessible but visually hidden in header (visible in dropdown menus) */
#p-personal-extra a > span {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ensure labels inside the personal menu dropdown remain visible */
#p-personal .mw-portlet-body ul a span,
#p-personal .mw-portlet-body a span {
  position: static !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* unread counter bubble */
#p-personal-extra .mw-echo-notifications-badge[data-counter-num]:after {
  content: attr(data-counter-text) !important;
  display: inline-block !important;
  position: absolute !important;
  top: 4px !important;
  right: 2px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: 10px !important;
  background: #d32f2f !important;
  color: #fff !important;
  font-size: 11px !important;
  line-height: 16px !important;
  text-align: center !important;
  font-weight: 600 !important;
  pointer-events: none !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.15) !important;
}
#p-personal-extra .mw-echo-notifications-badge-all-read[data-counter-num="0"]:after { display: none !important; }
#sp-contributions-footer-anon {
clear: both;
    margin: 0.2em 0;
    width: 100%;
    border: 1px solid #a2a9b1;
    background-color: var(--background-color-interactive-subtle, #f8f9fa);
    box-sizing: border-box;
    color: var(--color-base, #202122);
}
.mw-parser-output .fmbox .mbox-image {
    border: none;
    padding: 2px 0 2px 0.9em;
    text-align: center;
}
.mw-parser-output .fmbox .mbox-text {
    border: none;
    padding: 0.25em 0.9em;
    width: 100%;
}
/* Hide hidden categories in main namespace */
/* Hide hidden categories everywhere by default */
#mw-hidden-catlinks {
    display: none !important;
}

/* Show hidden categories only in main namespace + read mode */
body.action-view.ns-0 #mw-hidden-catlinks {
    display: block !important;
}

/* Style the whole category box */
#catlinks {
    background-color: var(--background-color-neutral-subtle, #f8f9fa);
    margin-top: 1em;
    border: 1px solid var(--border-color-base, #a2a9b1);
    padding: 5px;
    clear: both;
}

/* Inline categories with border separators */
#catlinks ul {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
}

#catlinks ul li {
    display: inline-block;
    line-height: 1.25em;
    margin: 0.125em 0;
    border-left: 1px solid var(--border-color-base, #a2a9b1);
    padding: 0 0.5em;
}

/* Remove border from the first item */
#catlinks ul li:first-child {
    border-left: none;
    padding-left: 0;
}
.new {
    color: #d40000;
}
.nav-toc-contents .tocnumber { 
  position: absolute; 
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  white-space: nowrap; 
  border: 0;
}