MediaWiki:Gadget-GrAnnotations.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/*
* gr_annotations.css — grantha.io inline Notes + Bookmarks + Feedback (v3)
*/
/* ── Icon base ──────────────────────────────────────────────────── */
.gra-icon {
display: inline-block;
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}
/* comment.svg → Feedback (flag/report) */
.gra-icon-feedback { background-image: url('/images/feedback.svg'); }
/* notes.svg → Notes */
.gra-icon-note { background-image: url('/images/notes.svg'); }
.gra-icon-bookmark { background-image: url('/images/bookmark.svg'); }
.gra-icon-copy { background-image: url('/images/copy.svg'); }
.gra-icon-search { background-image: url('/images/search.svg'); }
.gra-icon-dismiss { background-image: url('/images/close.svg'); }
/* ══════════════════════════════════════════════════════════════════
1. FLOATING ACTION STRIP (desktop only)
══════════════════════════════════════════════════════════════════ */
#gra-fab {
position: fixed;
z-index: 10200;
display: none;
flex-direction: row;
background: #B14A2E !important;
border: none !important;
border-radius: 12px !important;
padding: 5px 4px !important;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08) !important;
gap: 20px !important;
}
#gra-fab.gra-fab-visible { display: flex; }
.gra-fab-btn {
height: 48px;
width: 48px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
transition: background 0.15s;
}
.gra-fab-btn-label {
font-family: 'Noto Sans Devanagari';
font-weight: 400;
font-size: 10px;
line-height: 100%;
letter-spacing: 0%;
color: #ffffff;
padding: 5px 0;
}
.gra-fab-btn:hover {
background: rgba(255, 255, 255, 0.12) !important; border-radius: 12px;
}
.gra-fab-btn:hover .gra-fab-tooltip { opacity: 1; transform: translateX(0) translateY(-50%); }
.gra-fab-tooltip {
position: absolute;
right: calc(100% + 8px);
top: 50%;
transform: translateX(4px) translateY(-50%);
white-space: nowrap;
background: rgba(30,30,30,0.82);
color: #fff;
font-size: 11px;
font-family: system-ui, sans-serif;
font-weight: 500;
padding: 3px 9px;
border-radius: 999px;
pointer-events: none;
opacity: 0;
transition: opacity 0.18s, transform 0.18s;
}
/* ══════════════════════════════════════════════════════════════════
2. RIGHT PANEL
══════════════════════════════════════════════════════════════════ */
#gra-panel {
position: fixed;
top: 0;
right: -360px;
width: 340px;
height: 100vh;
background: #fff;
box-shadow: -3px 0 20px rgba(0,0,0,0.15);
z-index: 10100;
display: flex;
flex-direction: column;
transition: right 0.28s cubic-bezier(0.4,0,0.2,1);
font-family: system-ui, sans-serif;
font-size: 13px;
overflow: hidden;
}
#gra-panel.gra-panel-open { right: 0; }
#gra-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.18);
z-index: 10099;
display: none;
cursor: pointer;
}
#gra-backdrop.gra-backdrop-visible { display: block; }
#gra-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 0;
flex-shrink: 0;
}
#gra-panel-close {
background: none;
border: none;
cursor: pointer;
font-size: 18px;
color: #666;
padding: 2px 6px;
border-radius: 4px;
line-height: 1;
}
#gra-panel-close:hover { background: #f5f5f5; color: #222; }
#gra-tabs {
display: flex;
border-bottom: 2px solid #f0f0f0;
margin: 10px 16px 0;
flex-shrink: 0;
}
.gra-tab {
flex: 1;
padding: 8px 4px;
background: none;
border: none;
cursor: pointer;
font-size: 13px;
font-family: inherit;
color: #777;
font-weight: 500;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: color 0.15s, border-color 0.15s;
}
.gra-tab .gra-icon { width: 16px; height: 16px; opacity: 0.5; }
.gra-tab:hover { color: #333; }
.gra-tab.gra-tab-active { color: #B14A2E; border-bottom-color: #B14A2E; }
.gra-tab.gra-tab-active .gra-icon {
opacity: 1;
filter: invert(33%) sepia(52%) saturate(1104%) hue-rotate(333deg) brightness(93%) contrast(90%);}
#gra-panel-body {
flex: 1;
overflow-y: auto;
padding: 12px 16px 16px;
}
.gra-pane { display: none; }
.gra-pane.gra-pane-active { display: block; }
/* ══════════════════════════════════════════════════════════════════
3. FEEDBACK COMPOSER — centered modal
══════════════════════════════════════════════════════════════════ */
.gra-composer {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 8px 40px rgba(0,0,0,0.22);
width: 420px;
max-width: calc(100vw - 32px);
padding: 20px 24px 16px;
position: fixed;
/* Centered on screen */
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 10150;
display: none;
flex-direction: column;
gap: 12px;
font-family: system-ui, sans-serif;
font-size: 13px;
}
.gra-composer.gra-composer-visible { display: flex; }
/* Feedback composer header row */
.gra-composer-header {
display: flex;
align-items: center;
gap: 8px;
}
.gra-composer-header strong {
flex: 1;
font-weight: 600;
color: #1C1A17;
font-size: 16px;
font-family: "Noto Sans Devanagari"
}
.gra-btn-x {
background: none;
border: none;
cursor: pointer;
font-size: 16px;
color: #666;
padding: 2px 5px;
border-radius: 4px;
line-height: 1;
}
.gra-btn-x:hover { background: #f5f5f5; color: #222; }
/* Feedback field labels */
.gra-fb-field-label {
font-size: 11px;
font-weight: 600;
color: #5f6368;
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: -6px; /* tighten gap to input below */
}
/* Selected text quote preview */
.gra-fb-quote-label {
font-size: 11px;
color: #9aa0a6;
margin-bottom: -4px;
}
.gra-fb-quote {
font-size: 12px;
color: #5f6368;
font-style: italic;
background: #fafafa;
border-left: 3px solid #fbbc04;
border-radius: 0 4px 4px 0;
padding: 6px 10px;
line-height: 1.45;
max-height: 56px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/* Issue type dropdown */
.gra-fb-select {
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 7px 10px;
font-size: 13px;
font-family: inherit;
color: #202124;
background: #fff;
outline: none;
transition: border-color 0.15s;
width: 100%;
box-sizing: border-box;
cursor: pointer;
}
.gra-fb-select:focus { border-color: #1a73e8; }
/* Email input */
.gra-fb-email-input {
min-height: unset !important;
height: 36px;
padding: 6px 10px !important;
}
/* Status message */
.gra-fb-status {
font-size: 12px;
min-height: 16px;
text-align: center;
}
.gra-fb-status.gra-fb-ok { color: #34a853; }
.gra-fb-status.gra-fb-err { color: #ea4335; }
/* ══════════════════════════════════════════════════════════════════
4. NOTE COMPOSER (local only)
══════════════════════════════════════════════════════════════════ */
.gra-composer-user {
display: flex;
align-items: center;
gap: 10px;
}
.gra-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: #1a73e8;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
flex-shrink: 0;
}
.gra-composer-uname { font-weight: 600; color: #202124; font-size: 13px; }
.gra-composer-input {
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 8px 10px;
font-size: 13px;
font-family: inherit;
resize: none;
width: 100%;
box-sizing: border-box;
min-height: 56px;
line-height: 1.5;
color: #202124;
outline: none;
transition: border-color 0.15s;
}
.gra-composer-input::placeholder { color: #aaa; }
.gra-composer-input:focus { border-color: #B14A2E; }
.gra-composer-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.gra-btn-cancel {
background: none;
border: none;
cursor: pointer;
color: #5f6368;
font-size: 14px;
font-family:"Noto Sans Devanagari";
font-weight: 500;
padding: 8px 12px;
border-radius: 4px;
}
.gra-btn-cancel:hover { background: #f5f5f5; }
.gra-btn-submit {
background: transparent;
color: #B14A2E;
border: none;
cursor: pointer;
font-size: 14px;
font-family:"Noto Sans Devanagari";
font-weight: 500;
padding: 8px 12px;
border-radius: 4px;
gap: 8px;
transition: background 0.15s;
}
.gra-btn-submit:hover { color: #8A351F; }
.gra-btn-submit:disabled { opacity: 0.4;
cursor: not-allowed; }
/* ── Note cards ── */
.gra-note-card {
border: 1px solid #e8eaed;
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 10px;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.07);
cursor: pointer;
transition: box-shadow 0.15s;
}
.gra-note-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.gra-note-card.gra-card-active {
border-color: #34a853;
box-shadow: 0 0 0 2px rgba(52,168,83,0.25);
}
.gra-card-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.gra-card-meta { flex: 1; }
.gra-card-ts { font-size: 11px; color: #80868b; }
.gra-card-quote {
font-size: 12px;
color: #5f6368;
border-left: 3px solid #34a853;
padding-left: 8px;
margin-bottom: 6px;
font-style: italic;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gra-card-text { font-size: 13px; color: #202124; line-height: 1.5; }
.gra-note-del {
background: none;
border: none;
cursor: pointer;
color: #ccc;
font-size: 15px;
padding: 0 2px;
line-height: 1;
flex-shrink: 0;
margin-left: auto;
}
.gra-note-del:hover { color: #e53935; }
.gra-empty-state {
color: #9aa0a6;
font-size: 13px;
text-align: center;
padding: 32px 16px;
line-height: 1.6;
}
/* ══════════════════════════════════════════════════════════════════
5. BOOKMARK CARDS + COMPOSER
══════════════════════════════════════════════════════════════════ */
.gra-bookmark-card {
border: 1px solid #e8eaed;
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 10px;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.07);
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
transition: box-shadow 0.15s;
}
.gra-bookmark-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.gra-bookmark-card .gra-icon { margin-top: 2px; flex-shrink: 0; }
.gra-bookmark-info { flex: 1; min-width: 0; }
.gra-bookmark-name {
font-weight: 600;
color: #202124;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gra-bookmark-quote {
font-size: 11px;
color: #80868b;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gra-bookmark-del {
background: none;
border: none;
cursor: pointer;
color: #ccc;
font-size: 15px;
padding: 0 2px;
line-height: 1;
flex-shrink: 0;
}
.gra-bookmark-del:hover { color: #e53935; }
.gra-bm-composer {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 8px 40px rgba(0,0,0,0.22);
width: 420px;
max-width: calc(100vw - 32px);
padding: 20px 24px 16px;
position: fixed;
/* Centered on screen — same as feedback composer */
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 10150;
display: none;
flex-direction: column;
gap: 10px;
font-family: system-ui, sans-serif;
font-size: 13px;
}
.gra-bm-composer.gra-composer-visible { display: flex; }
.gra-bm-composer-label {
color: #1C1A17;
font-size: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.gra-bm-composer-label .gra-icon, .gra-composer-header .gra-icon, .gra-tab .gra-icon, .gra-note-card .gra-icon, .gra-bookmark-card .gra-icon {filter: brightness(0) saturate(100%) invert(7%) sepia(8%) saturate(894%) hue-rotate(357deg) brightness(97%) contrast(92%);
}
/* ══════════════════════════════════════════════════════════════════
6. ANCHOR HIGHLIGHTS
══════════════════════════════════════════════════════════════════ */
/* Note highlight — green tint */
.gra-note-highlight {
background: rgba(52, 168, 83, 0.18);
border-radius: 2px;
cursor: pointer;
transition: background 0.15s;
}
.gra-note-highlight:hover,
.gra-note-highlight.gra-hl-active {
background: rgba(52, 168, 83, 0.4);
outline: 1.5px solid #34a853;
}
/* Bookmark highlight — blue underline */
.gra-bookmark-highlight {
background: rgba(26, 115, 232, 0.12);
border-radius: 2px;
cursor: pointer;
border-bottom: 1.5px solid #1a73e8;
transition: background 0.15s;
}
.gra-bookmark-highlight:hover { background: rgba(26, 115, 232, 0.22); }
/* ══════════════════════════════════════════════════════════════════
7. PERSISTENT TOGGLE BUTTON
══════════════════════════════════════════════════════════════════ */
#gra-toggle {
position: fixed;
bottom: 78px;
right: 20px;
width: 48px;
height: 48px;
border-radius: 50%;
background: #c0521a;
border: none;
cursor: pointer;
z-index: 9998;
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);
}
#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;
font-family: system-ui, sans-serif;
pointer-events: none;
}
#gra-panel.gra-panel-open ~ #gra-toggle {
right: 356px;
transition: right 0.28s cubic-bezier(0.4,0,0.2,1), background 0.15s;
}
/* ══════════════════════════════════════════════════════════════════
MOBILE BOTTOM ACTION BAR
Slides up from bottom — avoids clashing with browser copy menu.
Large tap targets (56px height buttons) with text labels.
Only shown on mobile (JS sets _mobile flag).
══════════════════════════════════════════════════════════════════ */
#gra-mobile-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 10200;
display: block !important;
transform: translateY(100%);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
#gra-mobile-bar.gra-mobile-bar-visible {
transform: translateY(0);
pointer-events: auto;
}
#gra-mobile-bar-inner {
background: #fff;
border-top: 1px solid #e0e0e0;
border-radius: 16px 16px 0 0;
box-shadow: 0 -4px 20px rgba(0,0,0,0.18);
display: flex;
align-items: stretch;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.gra-mob-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 14px 8px;
min-height: 72px;
background: none;
border: none;
border-right: 1px solid #f0f0f0;
cursor: pointer;
font-family: system-ui, sans-serif;
font-size: 11px;
color: #444;
font-weight: 500;
-webkit-tap-highlight-color: rgba(0,0,0,0.06);
transition: background 0.12s;
}
.gra-mob-btn:last-child { border-right: none; }
.gra-mob-btn:active { background: #f5f5f5; }
.gra-mob-btn .gra-icon { width: 24px; height: 24px; }
.gra-mob-label { font-size: 11px; line-height: 1.2; text-align: center; }
.gra-mob-dismiss { color: #999; }
.gra-mob-dismiss:active { background: #fff0f0; color: #e53935; }
/* ══════════════════════════════════════════════════════════════════
8. RESPONSIVE
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
#gra-panel { width: 100vw; right: -100vw; }
.gra-composer {
width: calc(100vw - 32px) !important;
max-width: 420px;
/* Override centering for note/bookmark on mobile — keep centered */
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
/* bm-composer already centered via its base CSS */
}
/* ══════════════════════════════════════════════════════════════════
REPLACE the entire additions block at the bottom of
MediaWiki:Gadget-GrAnnotations.css with this content.
FAB stack (right:20px desktop, right:16px mobile):
22px [📚] #se-docnav-btn docs navigator
78px [↑] #se-scrolltop scroll to top
134px [✎] #gra-toggle notes panel ← was wrongly 78px
══════════════════════════════════════════════════════════════════ */
/* ── #gra-toggle: sits above both siteNav FABs ─────────────────── */
#gra-toggle {
bottom: 78px !important;
right: 20px !important;
}
#gra-panel.gra-panel-open ~ #gra-toggle {
right: 356px !important;
}
@media (max-width: 768px) {
#gra-toggle {
bottom: 78px !important;
right: 16px !important;
width: 44px !important;
height: 44px !important;
}
#gra-panel.gra-panel-open ~ #gra-toggle {
right: calc(100vw + 4px) !important;
}
}
/* ── Mobile annotation bar above all Minerva overlays ──────────── */
#gra-mobile-bar {
z-index: 99999 !important;
}
/* ── CSS custom property fallbacks ─────────────────────────────── */
/* readerToolbar.js writes these at runtime; these are initial values */
:root {
--gr-header-height: 50px;
--gr-bar-h: 48px;
--gr-bar-top: 50px;
}
/* ── Scroll-margin: TOC anchor links clear the fixed bar ────────── */
/* 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 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);
}
#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);
}
/* Search icon in FAB using an inline SVG data-URI */
.gra-icon-search {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='22' y2='22'/%3E%3C/svg%3E") !important;
}
/* ══════════════════════════════════════════════════════════════════
MOBILE BOTTOM BAR — terracotta theme
══════════════════════════════════════════════════════════════════ */
#gra-mobile-bar-inner {
background: #b5451b !important;
border-top: none !important;
border-radius: 16px 16px 0 0 !important;
box-shadow: 0 -4px 20px rgba(181,69,27,0.35) !important;
}
.gra-mob-btn {
color: rgba(255,255,255,0.92) !important;
border-right-color: rgba(255,255,255,0.18) !important;
min-height: 76px !important;
padding: 16px 8px !important;
font-size: 12px !important;
}
.gra-mob-btn:active {
background: rgba(0,0,0,0.12) !important;
}
.gra-mob-btn .gra-icon {
width: 26px !important;
height: 26px !important;
filter: brightness(0) invert(1) !important;
}
.gra-mob-label {
color: rgba(255,255,255,0.88) !important;
font-size: 11px !important;
font-weight: 500 !important;
}
.gra-mob-dismiss {
color: rgba(255,255,255,0.70) !important;
}
.gra-mob-dismiss .gra-mob-label {
color: rgba(255,255,255,0.60) !important;
}
.gra-mob-dismiss span[style] {
color: rgba(255,255,255,0.70) !important;
}
@media (max-width: 767px) {
/* Bottom sheet — pinned to bottom via inset, animated via transform */
#gra-fb-composer.gra-composer,
#gra-nt-composer.gra-composer,
#gra-bm-composer.gra-bm-composer {
position: fixed !important;
inset: auto 0 0 0 !important; /* top:auto right:0 bottom:0 left:0 */
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
border-radius: 16px 16px 0 0 !important;
box-shadow: 0 -4px 24px rgba(0,0,0,0.18) !important;
padding: 20px 20px calc(20px + env(safe-area-inset-bottom)) !important;
box-sizing: border-box !important;
transform: translateY(100%) !important;
transition: transform 0.28s cubic-bezier(0.32,0.72,0,1) !important;
z-index: 10600 !important;
}
/* Slide up when visible */
#gra-fb-composer.gra-composer-visible,
#gra-nt-composer.gra-composer-visible,
#gra-bm-composer.gra-composer-visible {
transform: translateY(0) !important;
}
/* Grab handle */
#gra-fb-composer::before,
#gra-nt-composer::before,
#gra-bm-composer::before {
content: "";
display: block;
width: 36px; height: 4px;
border-radius: 2px;
background: #d0d0d0;
margin: -6px auto 14px;
}
.gra-composer .gra-composer-input,
.gra-bm-composer .gra-composer-input {
font-size: 16px !important; /* no iOS zoom on focus */
}
.gra-composer-actions { display: flex; gap: 10px; }
.gra-composer-actions .gra-btn-submit,
.gra-composer-actions .gra-btn-cancel { flex: 1; min-height: 44px; }
}
@media (max-width: 767px) {
/* Docked toolbar below the reader header */
#gra-fab.gra-fab-mobile-docked {
position: fixed !important;
top: var(--gr-toc-top, 99px) !important; /* sits just below reader toolbar */
left: 0 !important;
right: 0 !important;
height: 52px !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-around !important;
border-radius: 0 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
z-index: 2147483646 !important; /* below native menu, above content */
}
#gra-fab.gra-fab-mobile-docked .gra-fab-btn {
flex: 1;
flex-direction: column;
height: 44px;
background: transparent !important;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
#gra-fab.gra-fab-mobile-docked .gra-fab-btn-label {
display: block;
font-size: 10px;
margin-top: 2px;
}
}