MediaWiki:Gadget-GrAnnotations.css: Difference between revisions

No edit summary
No edit summary
Line 564: Line 564:
#gra-mobile-bar {
#gra-mobile-bar {
   position: fixed;
   position: fixed;
   bottom: calc(env(safe-area-inset-bottom, 20px) + 60px);
   bottom: 0;
   left: 12px;
   left: 0;
   right: 12px;
   right: 0;
   z-index: 10200;
   z-index: 10200;
  /* Hidden via transform — NOT display:none so it can animate in */
   display: block !important;
   display: block !important;
   transform: translateY(calc(100% + 200px));
   transform: translateY(100%);
   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;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.25);
}
}
#gra-mobile-bar.gra-mobile-bar-visible {
#gra-mobile-bar.gra-mobile-bar-visible {
Line 583: Line 579:
#gra-mobile-bar-inner {
#gra-mobile-bar-inner {
   background: #fff;
   background: #fff;
   border: 1px solid #e0e0e0;
   border-top: 1px solid #e0e0e0;
   border-radius: 16px;
   border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.18);
   display: flex;
   display: flex;
   align-items: stretch;
   align-items: stretch;
   padding-bottom: 0;
  /* Pad for iPhone home indicator */
   padding-bottom: env(safe-area-inset-bottom, 0px);
}
}
.gra-mob-btn {
.gra-mob-btn {