Anandamakaranda

MediaWiki:Gadget-GrAnnotations.css: Difference between revisions

← Older editNewer edit →
No edit summary
No edit summary
Line 564: Line 564:
#gra-mobile-bar {
#gra-mobile-bar {
   position: fixed;
   position: fixed;
  /* Sit above browser chrome — use env() for safe area + extra buffer */
   bottom: calc(env(safe-area-inset-bottom, 20px) + 60px);
   bottom: calc(env(safe-area-inset-bottom, 20px) + 60px);
   left: 12px;
   left: 12px;
   right: 12px;
   right: 12px;
   z-index: 10200;
   z-index: 10200;
   transform: translateY(calc(100% + 120px));
  /* Hidden via transform — NOT display:none so it can animate in */
  display: block !important;
   transform: translateY(calc(100% + 200px));
   transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   pointer-events: none;
   pointer-events: none;
Line 615: Line 616:
.gra-mob-dismiss:active { background: #fff0f0; color: #e53935; }
.gra-mob-dismiss:active { background: #fff0f0; color: #e53935; }


/* On desktop — hide mobile bar entirely */
/* JS controls which is shown via .gra-fab-visible and .gra-mobile-bar-visible
@media (min-width: 769px) {
  No media query hiding — avoids viewport width edge cases on mobile browsers */
  #gra-mobile-bar { display: none !important; }
}
/* On mobile — hide desktop FAB */
@media (max-width: 768px) {
  #gra-fab { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════════
/* ══════════════════════════════════════════════════════════════════
Retrieved from "https://dev.anandamakaranda.in/MediaWiki:Gadget-GrAnnotations.css"