Sav22999/websites-notes

Sticky note: Hide buttons when not hovered

xkr47 opened this issue · 1 comments

When showing the note in sticky mode, it would be nice to hide the buttons and slider when cursor is outside the sticky. I.e. only text would remain visible.

I implemented this in my browser using the following Stylus css snippet:

/* hide direct children elements of the sticky by default */
#sticky-notes-notefox-addon > * {
    visibility: hidden;
} 

/* .. except the text child element */
#text-container--sticky-notes-notefox-addon {
    visibility: inherit;
}

/* Only show all children elements when sticky is hovered by cursor */
#sticky-notes-notefox-addon:hover > * {
    visibility: inherit;
}

I hope you and/or users find it useful. If you want to make it a feature you can enable/disable, you could control the auto-hide by adding a class to the id="sticky-notes-notefox-addon" element conditionally, like class="auto-hide-buttons" and then replace all occurences of #sticky-notes-notefox-addon in the CSS snippet above with #sticky-notes-notefox-addon.auto-hide-buttons.

Thanks for your useful addon!

@xkr47 Thank you very much for this suggestion!

I'll add an option in the Settings in the next release.
Thanks ☺️