MediaWiki:Gadget-headanchor.css

From BIONICLEsector01

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/*!
 * Vector HeadAnchors gadget, from <https://mediawiki.org/wiki/MediaWiki:Gadget-vector-headanchor.js>
 *
 * Copyright 2013 Timo Tijhof
 * @license MIT <https://opensource.org/licenses/MIT>
 */
/* Revision as of 2021-10-11 */

/* Edited for BS01 by Morris the Mata Nui Cow */

.tpl-headanchor::before {
  content: '§';
}

/*
Allow the section links to appear to the left of the headers even though they fall outside
the headers' box
*/
#content,
.tpl-headanchor-heading {
  overflow: visible;
}

.tpl-headanchor {
  display: inline-block;
  text-align: center;
  /* use opacity: 0; instead of display: none; so .tpl-headanchor is included in the width
  of .tpl-headanchor-heading, meaning hovering over the (invisible) .tpl-headanchor will
  trigger the :hover rule below and cause the .tpl-headanchor to appear */
  opacity: 0;
  /*
  In Refreshed,
  #content-wrapper has the same font size as the root and a padding-left of 1em,
  so a margin-left of -1rem will undo that padding and place the section link flush against the
  left side of #content-wrapper.
  In Vector, the analogous padding-left is not quite the same as 1em, but this effect still looks
  good, so there's no need to change it.
  */
  margin-left: -1rem;
  width: 1rem;
}

.tpl-headanchor-heading:hover .tpl-headanchor {
  opacity: initial;
}

.tpl-headanchor:hover {
  text-decoration: none;
}

/*
Don't show the link on a header with the .no-headanchor class
(or on a header that's inside some wrapper element with the class)
*/
.no-headanchor .tpl-headanchor {
  display: none;
}