MediaWiki:Gadget-GrAnnotations.css: Difference between revisions
Undo revision 5744 by Chandrashekars (talk) Tag: Undo |
No edit summary |
||
| Line 718: | Line 718: | ||
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); | ||
} | |||
/* ══════════════════════════════════════════════════════════════════ | |||
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; | |||
} | } | ||