Anandamakaranda

MediaWiki:Gadget-GrAnnotations.css: Difference between revisions

← Older editNewer edit →
No edit summary
No edit summary
Line 636: Line 636:
}
}
/* ══════════════════════════════════════════════════════════════════
/* ══════════════════════════════════════════════════════════════════
   ADDITIONS — append to end of MediaWiki:Gadget-GrAnnotations.css
   REPLACE the entire additions block at the bottom of
  MediaWiki:Gadget-GrAnnotations.css with this content.


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


 
/* ── #gra-toggle: sits above both siteNav FABs ─────────────────── */
/* ── 1. REPOSITION #gra-toggle ─────────────────────────────────── */
/* Override bottom:80px from section 7 of the existing stylesheet  */
/* 134 = 22 + 48 + 8 + 44 + 8 ... actually: 22(btn) + 48(h) + 8(gap) + 48(h) + 8(gap) = 134 */
#gra-toggle {
#gra-toggle {
   bottom: 78px !important;
   bottom: 134px !important;
   right: 20px !important;
   right: 20px !important;
}
}
#gra-panel.gra-panel-open ~ #gra-toggle {
#gra-panel.gra-panel-open ~ #gra-toggle {
   right: 356px !important;
   right: 356px !important;
}
}
@media (max-width: 768px) {
@media (max-width: 768px) {
   #gra-toggle {
   #gra-toggle {
     bottom: 122px !important;
     bottom: 122px !important;   /* 18 + 44 + 8 + 44 + 8 = 122 */
     right: 16px !important;
     right: 16px !important;
     width: 44px !important;
     width: 44px !important;
Line 669: Line 665:
}
}


 
/* ── Mobile annotation bar above all Minerva overlays ──────────── */
/* ── 2. CSS CUSTOM PROPERTY FALLBACKS ──────────────────────────── */
#gra-mobile-bar {
/* readerToolbar.js writes --gr-header-height, --gr-bar-h, --gr-bar-top to :root */
   z-index: 99999 !important;
:root {
  --gr-header-height: 50px;
  --gr-bar-h: 48px;
  --gr-bar-top: 50px;
}
 
/* Minerva: header scrolls, only bar is fixed */
body.skin-minerva {
  padding-top: calc(54px + var(--gr-bar-h)) !important;
}
 
 
/* ── 4. SCROLL-MARGIN for TOC anchor navigation ─────────────────── */
 
/* Vector: both header and bar are 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 once header scrolls away */
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);
}
 
/* First element of content on pages without headings (e.g. Main_Page) */
#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);
}
/* ══════════════════════════════════════════════════════════════════
  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;
  }
}
}


 
/* ── CSS custom property fallbacks ─────────────────────────────── */
/* ── 2. CSS custom property fallbacks ──────────────────────────── */
/* readerToolbar.js writes these at runtime; these are initial values */
:root {
:root {
   --gr-header-height: 50px;
   --gr-header-height: 50px;
Line 768: Line 678:
}
}


 
/* ── Scroll-margin: TOC anchor links clear the fixed bar ────────── */
/* ── 3. Scroll-margin for TOC anchor navigation ─────────────────── */
 
/* Vector: header + bar both fixed */
/* 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 h1[id],
Line 786: Line 694:
   scroll-margin-top: calc(var(--gr-header-height) + var(--gr-bar-h) + 12px);
   scroll-margin-top: calc(var(--gr-header-height) + var(--gr-bar-h) + 12px);
}
}
 
/* Minerva: only bar is fixed once header scrolls away */
/* 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 h1[id],
body.skin-minerva #mw-content-text .mw-parser-output h2[id],
body.skin-minerva #mw-content-text .mw-parser-output h2[id],
Line 796: Line 703:
   scroll-margin-top: calc(var(--gr-bar-h) + 12px);
   scroll-margin-top: calc(var(--gr-bar-h) + 12px);
}
}
#mw-content-text .mw-parser-output > *:first-child {
#mw-content-text .mw-parser-output > *:first-child {
   scroll-margin-top: calc(var(--gr-header-height) + var(--gr-bar-h) + 8px);
   scroll-margin-top: calc(var(--gr-header-height) + var(--gr-bar-h) + 8px);
Line 802: Line 708:
body.skin-minerva #mw-content-text .mw-parser-output > *:first-child {
body.skin-minerva #mw-content-text .mw-parser-output > *:first-child {
   scroll-margin-top: calc(var(--gr-bar-h) + 8px);
   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;
}
}
Retrieved from "https://dev.anandamakaranda.in/MediaWiki:Gadget-GrAnnotations.css"