MediaWiki:Gadget-GrAnnotations.css: Difference between revisions

Revision as of 07:33, 20 May 2026

/* ══════════════════════════════════════════════════════════════════
   ADDITIONS — append to end of MediaWiki:Gadget-GrAnnotations.css
   (replaces any previous additions block at the bottom)

   FAB stack (bottom → top, right: 20px on desktop, 16px on mobile):
     22px   [📚] #se-docnav-btn   docs navigator  (siteNav.js)
     78px   [↑]  #se-scrolltop    scroll to top   (siteNav.js)
     134px  [✎]  #gra-toggle      notes panel     (gr_annotations.js)

   Mobile (≤768px, 44px buttons):
     18px   [📚]
     70px   [↑]   18 + 44 + 8
     122px  [✎]   70 + 44 + 8
   ══════════════════════════════════════════════════════════════════ */


/* ── 1. #gra-toggle position in the stack ──────────────────────── */
/* Section 7 above sets bottom:78px — override to 134px to sit
   above both siteNav FABs (docs at 22px, scroll-top at 78px).    */
#gra-toggle {
  bottom: 134px !important;
  right: 20px !important;
}

/* When notes panel is open, toggle moves left to not overlap panel */
#gra-panel.gra-panel-open ~ #gra-toggle {
  right: 356px !important;
}

@media (max-width: 768px) {
  #gra-toggle {
    bottom: 122px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
  }
  #gra-panel.gra-panel-open ~ #gra-toggle {
    right: calc(100vw + 4px) !important;
  }
}


/* ── 2. CSS custom property fallbacks ──────────────────────────── */
:root {
  --gr-header-height: 50px;
  --gr-bar-h: 48px;
  --gr-bar-top: 50px;
}


/* ── 3. Scroll-margin for TOC anchor navigation ─────────────────── */

/* Vector: header + bar both fixed */
body.skin-vector #mw-content-text .mw-parser-output h1[id],
body.skin-vector #mw-content-text .mw-parser-output h2[id],
body.skin-vector #mw-content-text .mw-parser-output h3[id],
body.skin-vector #mw-content-text .mw-parser-output h4[id],
body.skin-vector #mw-content-text .mw-parser-output h5[id],
body.skin-vector #mw-content-text .mw-parser-output h6[id],
body.skin-vector-2022 #mw-content-text .mw-parser-output h1[id],
body.skin-vector-2022 #mw-content-text .mw-parser-output h2[id],
body.skin-vector-2022 #mw-content-text .mw-parser-output h3[id],
body.skin-vector-2022 #mw-content-text .mw-parser-output h4[id],
body.skin-vector-2022 #mw-content-text .mw-parser-output h5[id],
body.skin-vector-2022 #mw-content-text .mw-parser-output h6[id] {
  scroll-margin-top: calc(var(--gr-header-height) + var(--gr-bar-h) + 12px);
}

/* Minerva: only bar is fixed (header scrolls with page on Minerva) */
body.skin-minerva #mw-content-text .mw-parser-output h1[id],
body.skin-minerva #mw-content-text .mw-parser-output h2[id],
body.skin-minerva #mw-content-text .mw-parser-output h3[id],
body.skin-minerva #mw-content-text .mw-parser-output h4[id],
body.skin-minerva #mw-content-text .mw-parser-output h5[id],
body.skin-minerva #mw-content-text .mw-parser-output h6[id] {
  scroll-margin-top: calc(var(--gr-bar-h) + 12px);
}

#mw-content-text .mw-parser-output > *:first-child {
  scroll-margin-top: calc(var(--gr-header-height) + var(--gr-bar-h) + 8px);
}
body.skin-minerva #mw-content-text .mw-parser-output > *:first-child {
  scroll-margin-top: calc(var(--gr-bar-h) + 8px);
}


/* ── 4. Mobile annotation bar — ensure it's above everything ───── */
#gra-mobile-bar {
  z-index: 99999 !important;
}

/* Ensure FAB icons are visible (some themes filter them out) */
#gra-toggle .gra-icon,
.gra-fab-btn .gra-icon {
  filter: brightness(0) invert(1) !important;
}