MediaWiki:Gadget-backToTop.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.

#gadget-backtotop {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 12px;
  border-radius: 999px;

  border: 1px solid rgba(0,0,0,0.25);
  background: #fff;
  color: #000;

  text-decoration: none;
  font-size: 14px;
  line-height: 1;

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 150ms ease-in-out, visibility 0s linear 150ms;
}

#gadget-backtotop.is-visible {
  opacity: 0.92;
  visibility: visible;
  pointer-events: auto;

  transition: opacity 150ms ease-in-out, visibility 0s linear 0s;
}

#gadget-backtotop.is-visible:hover,
#gadget-backtotop.is-visible:focus {
  opacity: 1;
}

#gadget-backtotop .btt-icon {
  font-size: 18px;
  line-height: 1;
}

/* Mobile/narrow: icon only */
@media (max-width: 720px) {
  #gadget-backtotop {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }

  #gadget-backtotop .btt-label {
    display: none;
  }
}