Clipper is SO hard to see!

[KimSR 1]

I use both Chrome and Firefox, and on both, the Evernote Clipper is grey and so hard to see on all but plain, pale backgrounds. I can easily see the icons for every other plugin and bookmark.

 

Why can't you put a green box behind it or a border or something that isn't grey, so it's easy to see? At the moment, when I clip, I just have to aim for the blank space in my plugins bar, and considering that you're supposed to be so bloody easy to use, that seems a bit silly.

 

This is a screenshot of the icon on Firefox: http://screencast.com/t/gcw9hp0MFR

 

Here is a screenshot of the icon on a totally different type of background on Chrome: http://screencast.com/t/lrpfNkJh

 

Again, ALL of my other icons stand up to varied backgrounds and themes except Evernote.

[wastrel 1]

I'm using this CSS with Firefox 35. It makes the button icon background green except when the mouse cursor hovers it:

 

@namespace url(hxxp://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#nav-bar toolbarbutton[id^=action-button][id$=evernote-button] image
{ transition-property: background-image !important; transition-duration: 150ms !important; }
#nav-bar toolbarbutton[id^=action-button][id$=evernote-button]:not(:hover) image
{ background-image: linear-gradient(#a6e868,#87ca48) !important; }

 

I don't use Chrome, but I'm not aware of user CSS being able to modify the browser's chrome. You can use this CSS with Firefox either with the Stylish add-on or by using the userChrome.css file. (If you don't know how to use either, then "Google search is your friend.".)

 

Hope this helps.

 

(You'll have to change the "hxxp" in the first line to "http" when you use it. The forum here--like most forums--breaks the URL when it's posted.)

 

Edit: Here's something similar for someone also using Clearly:

 

toolbarbutton[id^=action-button][id$=evernote-button] > image,
toolbarbutton#readable_by_evernote__button > image
{ transition-property: background-image !important; transition-duration: 150ms !important; }
toolbarbutton[id^=action-button][id$=evernote-button]:not(:hover) > image
{ background-image: radial-gradient(closest-side,#fff,#97ca58) !important; }
toolbarbutton#readable_by_evernote__button:not(:hover) > image
{ background-image: radial-gradient(closest-side,#fff,#b4c5e7) !important; }

 

(It uses a radial gradient instead.)

 

Edit #2: Here's a note with example image:

https://www.evernote.com/shard/s532/sh/b0c04452-8fe8-4b57-adfc-3a2b2b4a0aee/2f750196919b9436a52f0dc1f72df35d