MediaWiki:Gadget-GrAnnotations.css: Difference between revisions
Created page with "/* * gr_annotations.css — grantha.io inline comments + bookmarks * ═══════════════════════════════════════════════════════════════ * Standalone file. Include in MediaWiki:Common.css or via * ResourceModules in extension.json. * * Covers: * 1. Floating action strip (appears right of selection) * 2. Right panel (collapsible overlay,..." |
No edit summary |
||
| Line 436: | Line 436: | ||
left: 16px !important; | left: 16px !important; | ||
} | } | ||
} | |||
/* ══════════════════════════════════════════════════════════════════ | |||
PERSISTENT PANEL TOGGLE BUTTON | |||
Fixed to bottom-right corner, always visible. | |||
Shows a red badge with unread comment count. | |||
══════════════════════════════════════════════════════════════════ */ | |||
#gra-toggle { | |||
position: fixed; | |||
bottom: 28px; | |||
right: 20px; | |||
width: 48px; | |||
height: 48px; | |||
border-radius: 50%; | |||
background: #c0521a; | |||
border: none; | |||
cursor: pointer; | |||
z-index: 1050; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
box-shadow: 0 3px 12px rgba(0,0,0,0.22); | |||
transition: background 0.15s, transform 0.15s; | |||
} | |||
#gra-toggle:hover { | |||
background: #a0410e; | |||
transform: scale(1.07); | |||
} | |||
#gra-toggle .gra-icon { | |||
width: 22px; | |||
height: 22px; | |||
filter: brightness(0) invert(1); /* white icon */ | |||
} | |||
#gra-toggle-badge { | |||
position: absolute; | |||
top: -4px; | |||
right: -4px; | |||
background: #e53935; | |||
color: #fff; | |||
font-size: 10px; | |||
font-weight: 700; | |||
min-width: 16px; | |||
height: 16px; | |||
border-radius: 8px; | |||
padding: 0 4px; | |||
line-height: 16px; | |||
text-align: center; | |||
display: none; | |||
align-items: center; | |||
justify-content: center; | |||
font-family: system-ui, sans-serif; | |||
pointer-events: none; | |||
} | |||
/* Shift toggle left when panel is open so it doesn't overlap */ | |||
#gra-panel.gra-panel-open ~ #gra-toggle { | |||
right: 356px; | |||
transition: right 0.28s cubic-bezier(0.4,0,0.2,1), background 0.15s; | |||
} | } | ||