Tip of the Day
Collectibles you find give 1 extra achievement point per item!

MediaWiki:Gadget-backToTop.css: Difference between revisions

From Walkscape Walkthrough
Created page with "#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; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity 150ms ease-in-out, transform 150ms ease-in-out; } #g..."
 
mNo edit summary
Line 20: Line 20:
   line-height: 1;
   line-height: 1;


  /* Hidden by default */
   opacity: 0;
   opacity: 0;
  visibility: hidden;
   pointer-events: none;
   pointer-events: none;
  transform: translateY(6px);
 
   transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
   transition: opacity 150ms ease-in-out, visibility 0s linear 150ms;
}
}


#gadget-backtotop.is-visible {
#gadget-backtotop.is-visible {
   opacity: 0.92;
   opacity: 0.92;
  visibility: visible;
   pointer-events: auto;
   pointer-events: auto;
   transform: translateY(0);
 
   transition: opacity 150ms ease-in-out, visibility 0s linear 0s;
}
}



Revision as of 12:44, 5 January 2026

#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:hover,
#gadget-backtotop: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;
  }
}