Feature suggestion: hide action buttons until hover (with accompanying CSS)

[appel]

Hey Kevin,

Thanks so much for a great and indispensable extension!

I modified the way the action buttons on the right (edit, rename and delete) are displayed using the Stylus extension and figure I'd share it just in case you happen to like the change. All I did was hide the 3 icons by default by setting the opacity to 0, then on hover of the parent div set the opacity of the 3 icons to .7, and on hover of an icon set it to 1.

I thought this helps make it feel a little less cluttered, plus it mimics the way Gmail itself handles some inline action buttons when you hover over a message in your inbox (like Archive, Delete, etc.):

Here's a screenshot, hopefully clarifying the behavior:

As you can see, there are two Quick Links. My mouse is hovering over both the second link and the middle icon, so all icons for this link are shown (with opacity 0.7) and the middle one has an opacity of 1. The difference between .7 and 1.0 is not very clear, but if you see it live it makes sense.

Here's the CSS:

#listContainer div div span.glyph {
	opacity: 0;
}

#listContainer div div:hover span.glyph {
	opacity: 0.7;
}

#listContainer div div:hover span.glyph:hover {
	opacity: 1;
}

Hope this is useful! Thanks again for open sourcing your extension!

[Zanatoo]

Hi Appel,

You can achieve this yourself quite easily with a Chrome extension called Stylebot.

It allows you to add/overwrite any CSS to pages.

[appel]

Thanks for the suggestion, @Zanatoo. As I wrote in my post I'm actually already using a chrome extension called Stylus to do this. I just wanted to share my modifications here for others.

[Zanatoo]

Doh! My apologies. I should have read your post properly.

[appel]

No worries, I appreciate you trying to help.

[joxerg]

So much clean result!! would be nice to have this piece of software more integrated in Gmail's style: replace the "Add quick link" qith a "+" icon (like the Creta enew label one), change the blue "i" icong color, modify margins of links... Thank you!!

[joxerg]

Played with some CSS, so much cleaner :) (still can't remove "underline" or visited link purple color...)

[appel]

@joxerg Try this for the color and underline:

div#gmailQuickLinks a {
	color: inherit;
	text-decoration: none !important;
}

[joxerg]

Wow thank you very much appel!! am trying to have active link bold (like Gmail's when clicked), no luck...any ideas?

Tried (only bold the instant i click, then goes normal): div#gmailQuickLinks a:active { font-weight: bold !important; }

[appel]

There's no (reliable) way to apply styles for an active state because the anchors have no active classes. That's something that would need to be added to the extension.

The closest I could get is to use the :active pseudo selector via the code below, but it's only visible onclick.

div#gmailQuickLinks a:active {
	font-weight: bold;
}

Edit: oops, misread your code, thought you tried using an .active class, apologies.

[joxerg]

Yep thank you anyway!! well, looked into de default.css of the extension but did not find any "div#gmailQuickLinks", if found we could load the extension out of Chrome store...Anyway, so much clean-nice now: