<blockquote>
<p>Does the double-selector work for both GTK+ versions?</p>
</blockquote>
<p>That's a good question. I would imagine it would work on < 3.20 too, but I only tested on 3.20.3 for the moment.</p>
<blockquote>
<p>Also, why the <code>margin: -2px;</code> is needed at all?</p>
</blockquote>
<p>Adwaita has the equivalent to <code>margin: 4px 4px 4px -4px;</code> on the button, which makes it take a lot of space, and be too close to the left element. The idea with <code>-2</code> was to not take space for the button's borders alike, prefering having it possibly overflow 1 pixel when hovered than taking more place.<br>
But that was a great question as it was actually mostly a hack, and you made me investigate further why it was larger than I believed was necessary, and I found out that Adwaita has a <code>min-width</code> and <code>min-height</code> of about 20 (IIRC) on the button. Resetting that makes the button actually smaller, removing any use for the negative margin.</p>
<div class="highlight highlight-source-diff"><pre>$ git diff
<span class="pl-c1">diff --git a/data/geany-3.20.css b/data/geany-3.20.css</span>
index 8388818..5cbde30 100644
<span class="pl-md">--- a/data/geany-3.20.css</span>
<span class="pl-mi1">+++ b/data/geany-3.20.css</span>
<span class="pl-mdr">@@ -4,5 +4,8 @@</span>
#geany-close-tab-button {
outline-offset: 0;
outline-width: 0;
<span class="pl-md">- border: 0;</span>
<span class="pl-mi1">+ margin: 0;</span>
<span class="pl-mi1">+ margin-left: 0.5em;</span>
<span class="pl-mi1">+ min-width: 0;</span>
<span class="pl-mi1">+ min-height: 0;</span>
}
<span class="pl-c1">diff --git a/data/geany.css b/data/geany.css</span>
index 2fb7964..5b7f322 100644
<span class="pl-md">--- a/data/geany.css</span>
<span class="pl-mi1">+++ b/data/geany.css</span>
<span class="pl-mdr">@@ -4,12 +4,14 @@</span>
#geany-close-tab-button {
padding: 0;
}
<span class="pl-md">-#geany-close-tab-button GtkImage {</span>
<span class="pl-mi1">+#geany-close-tab-button GtkImage /* GTK < 3.20 */ ,</span>
<span class="pl-mi1">+#geany-close-tab-button image /* GTK >= 3.20 */ {</span>
padding: 0;
}
/* use monospaced font in search entries for easier reading of regexp (#1907117) */
<span class="pl-md">-#GeanyDialogSearch GtkEntry {</span>
<span class="pl-mi1">+#GeanyDialogSearch GtkEntry /* GTK < 3.20 */,</span>
<span class="pl-mi1">+#GeanyDialogSearch entry /* GTK >= 3.20 */ {</span>
font-family: monospace;
}
</pre></div>
<p>With this, I get a prettier small button that scales down very well:<br>
<a href="https://cloud.githubusercontent.com/assets/793526/14677854/b8e934ae-0713-11e6-93b9-664ba37fa9af.png" target="_blank"><img src="https://cloud.githubusercontent.com/assets/793526/14677854/b8e934ae-0713-11e6-93b9-664ba37fa9af.png" alt="gctb_3 20 pr 2_1" style="max-width:100%;"></a> <a href="https://cloud.githubusercontent.com/assets/793526/14677862/bca9342c-0713-11e6-8068-43f73e464d52.png" target="_blank"><img src="https://cloud.githubusercontent.com/assets/793526/14677862/bca9342c-0713-11e6-8068-43f73e464d52.png" alt="gctb_3 20 pr 2_2" style="max-width:100%;"></a></p>
<p>The <code>margin-left: 0.5em</code> is not to get the button collapsed to the label, which I believe is prettier and more readable. Half an <code>em</code> seemed like a good visual spacing after a piece of text, but anything else would do.</p>
<hr>
<p>I also played further if we wanna get creative and pretty, to make the buttons on non-active tabs lighter. It's easy enough with the (new?) CSS, but maybe we wanna make sure it's great with more than just Adwaita, although as I just played with the opacity it shouldn't make anything much less nice.</p>
<p>GEdit-ish, always light but on button hover:</p>
<div class="highlight highlight-source-css"><pre><span class="pl-e">#geany-close-tab-button</span> {
<span class="pl-c1"><span class="pl-c1">opacity</span></span>: <span class="pl-c1">0.25</span>;
}
<span class="pl-e">#geany-close-tab-button</span><span class="pl-e">:hover</span> {
<span class="pl-c1"><span class="pl-c1">opacity</span></span>: <span class="pl-c1">1</span>;
}</pre></div>
<p>light-out only non-active tab, Adwaita-ish:</p>
<div class="highlight highlight-source-css"><pre>notebook tab <span class="pl-e">#geany-close-tab-button</span> {
<span class="pl-c1"><span class="pl-c1">opacity</span></span>: <span class="pl-c1">0.25</span>;
}
notebook tab<span class="pl-e">:hover</span> <span class="pl-e">#geany-close-tab-button</span> {
<span class="pl-c1"><span class="pl-c1">opacity</span></span>: <span class="pl-c1">0.5</span>;
}
notebook tab<span class="pl-e">:checked</span> <span class="pl-e">#geany-close-tab-button</span>,
notebook tab <span class="pl-e">#geany-close-tab-button</span><span class="pl-e">:hover</span> {
<span class="pl-c1"><span class="pl-c1">opacity</span></span>: <span class="pl-c1">1</span>;
}</pre></div>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />You are receiving this because you are subscribed to this thread.<br />Reply to this email directly or <a href="https://github.com/geany/geany/pull/994#issuecomment-212449004">view it on GitHub</a><img alt="" height="1" src="https://github.com/notifications/beacon/ABDrJwmKq9LEdPIa5vK0jNaQyIySz2b6ks5p5jjvgaJpZM4IEajJ.gif" width="1" /></p>
<div itemscope itemtype="http://schema.org/EmailMessage">
<div itemprop="action" itemscope itemtype="http://schema.org/ViewAction">
<link itemprop="url" href="https://github.com/geany/geany/pull/994#issuecomment-212449004"></link>
<meta itemprop="name" content="View Pull Request"></meta>
</div>
<meta itemprop="description" content="View this Pull Request on GitHub"></meta>
</div>