Edit: Updated to replace missing backslashes.
I wrote this userstyle that better replicates the appearance of a regular toolbar button then the change made to "widget.css" to address "issue #21". I thought I should share it. Feel free to use it.
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url-prefix('chrome://') {
widget:jid1-BOjn8b0IM7kH2w@jetpack-main-widget {
-moz-appearance: toolbarbutton!important;
margin: 0 !important;
}
:-moz-any(#TabsToolbar, #addon-bar) #widget:jid1-BOjn8b0IM7kH2w@jetpack-main-widget {
-moz-appearance: none!important;
border-style: none!important;
padding: 0 3px!important;
}
TabsToolbar #widget:jid1-BOjn8b0IM7kH2w@jetpack-main-widget:not([disabled]):hover {
background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.5)),
linear-gradient(transparent, rgba(0,0,0,.25) 30%),
linear-gradient(transparent, rgba(0,0,0,.25) 30%)!important;
background-position: 1px -1px, 0 -1px, 100% -1px!important;
background-size: calc(100% - 2px) 100%, 1px 100%, 1px 100%!important;
background-repeat: no-repeat!important;
}
addon-bar #widget:jid1-BOjn8b0IM7kH2w@jetpack-main-widget:not([disabled]):hover {
background-image: linear-gradient(to top, transparent, rgba(0,0,0,.15)),
linear-gradient(to top, transparent, rgba(0,0,0,.15) 30%),
linear-gradient(to top, transparent, rgba(0,0,0,.15) 30%)!important;
background-position: left, left, right!important;
background-size: auto, 1px 100%, 1px 100%!important;
background-repeat: no-repeat!important;
}
}