MediaWiki:Gadget-GrAnnotations.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 634: | Line 634: | ||
} | } | ||
/* bm-composer already centered via its base CSS */ | /* bm-composer already centered via its base CSS */ | ||
} | |||
/* ══════════════════════════════════════════════════════════════════ | |||
ADDITIONS — append to end of MediaWiki:Gadget-GrAnnotations.css | |||
FAB stack (bottom → top, right: 20px): | |||
22px [📚] #se-docnav-btn docs navigator (siteNav.js) | |||
78px [↑] #se-scrolltop scroll to top (siteNav.js) | |||
134px [✎] #gra-toggle notes panel (gr_annotations.js) | |||
══════════════════════════════════════════════════════════════════ */ | |||
/* ── 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 { | |||
bottom: 134px !important; | |||
right: 20px !important; | |||
} | |||
#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 ──────────────────────────── */ | |||
/* readerToolbar.js writes --gr-header-height, --gr-bar-h, --gr-bar-top to :root */ | |||
:root { | |||
--gr-header-height: 50px; | |||
--gr-bar-h: 48px; | |||
--gr-bar-top: 50px; | |||
} | |||
/* ── 3. BODY PADDING — prevent content hiding under fixed bar ───── */ | |||
/* Vector: header fixed + bar fixed */ | |||
body.skin-vector, | |||
body.skin-vector-2022 { | |||
padding-top: calc(var(--gr-header-height) + var(--gr-bar-h)) !important; | |||
} | |||
/* 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); | |||
} | } | ||