|
<div id="comment-navigator" style="
position: fixed;
topbottom: 50%0;
rightleft: 20px0;
transformright: translateY(-50%)0;
background: #f8f9fa;
border-top: 1px2px solid #a2a9b1;
border-radiuspadding: 4px8px 20px;
paddingbox-shadow: 8px0 -2px 4px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 1000;
font-size: 12px14px;
min-widthdisplay: 120pxflex;
align-items: center;
justify-content: center;
gap: 15px;
">
<divbutton styleid="textprev-align:comment" center;type="button" margin-bottom: 5px; font-weight: bold;style=">
Unreadbackground: Comments#0645ad;
</div> color: white;
<div style="text-align: center; margin-bottom: 8px; colorborder: #54595dnone;">
<span id="commentborder-counter">1</span> ofradius: ${highlights.length}3px;
</div> padding: 6px 12px;
<div style="display: flex; justify-content cursor: space-betweenpointer;">
<button id="prevfont-comment" type="button"size: style="14px;
backgroundmin-width: #0645ad60px;
color: white;">←</button>
border: none;
<span border-radius: 2px;style="
paddingfont-weight: 4px 8pxbold;
cursorcolor: pointer#222;
font-size: 11px16px;
">←min-width: Prev</button>80px;
<button id="nexttext-comment" type="button"align: style="center;
"><span id="comment-counter">1</span> / ${highlights.length}</span>
color: white;
<button id="next-comment" type="button" border: none;style="
border-radiusbackground: 2px#0645ad;
paddingcolor: 4px 8pxwhite;
cursorborder: pointernone;
fontborder-sizeradius: 11px3px;
">Nextpadding: →</button>6px 12px;
</div> cursor: pointer;
<div style="margin-top: 8px; text font-alignsize: center14px;">
<button id="closemin-navigator" type="button"width: style="60px;
background: #a2a9b1;">→</button>
color: #222;
<button id="close-navigator" type="button" border: none;style="
border-radiusbackground: 2px#a2a9b1;
paddingcolor: 2px 6px#222;
cursorborder: pointernone;
fontborder-sizeradius: 10px3px;
">Close</button>padding: 4px 8px;
</div> cursor: pointer;
▲ backgroundfont-size: #0645ad12px;
margin-left: 20px;
">✕</button>
</div>
`;
| 