[Github-comments] [geany/geany] ui-utils: Load per-version GTK+ CSS file (#994)

[Colomban Wendling]

> Does the double-selector work for both GTK+ versions?

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.

> Also, why the `margin: -2px;` is needed at all?

Adwaita has the equivalent to `margin: 4px 4px 4px -4px;` on the button, which makes it take a lot of space, and be too close to the left element.  The idea with `-2` was to not take space for the button's borders alike, prefering having it possibly overflow 1 pixel when hovered than taking more place.
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 `min-width` and `min-height` of about 20 (IIRC) on the button.  Resetting that makes the button actually smaller, removing any use for the negative margin.

```diff
$ git diff
diff --git a/data/geany-3.20.css b/data/geany-3.20.css
index 8388818..5cbde30 100644
--- a/data/geany-3.20.css
+++ b/data/geany-3.20.css
@@ -4,5 +4,8 @@
 #geany-close-tab-button {
     outline-offset: 0;
     outline-width: 0;
-    border: 0;
+    margin: 0;
+    margin-left: 0.5em;
+    min-width: 0;
+    min-height: 0;
 }
diff --git a/data/geany.css b/data/geany.css
index 2fb7964..5b7f322 100644
--- a/data/geany.css
+++ b/data/geany.css
@@ -4,12 +4,14 @@
 #geany-close-tab-button {
     padding: 0;
 }
-#geany-close-tab-button GtkImage {
+#geany-close-tab-button GtkImage /* GTK < 3.20 */ ,
+#geany-close-tab-button image /* GTK >= 3.20 */ {
     padding: 0;
 }
 
 /* use monospaced font in search entries for easier reading of regexp (#1907117) */
-#GeanyDialogSearch GtkEntry {
+#GeanyDialogSearch GtkEntry /* GTK < 3.20 */,
+#GeanyDialogSearch entry /* GTK >= 3.20 */ {
     font-family: monospace;
 }
 
```

With this, I get a prettier small button that scales down very well:
![gctb_3 20 pr 2_1](https://cloud.githubusercontent.com/assets/793526/14677854/b8e934ae-0713-11e6-93b9-664ba37fa9af.png) ![gctb_3 20 pr 2_2](https://cloud.githubusercontent.com/assets/793526/14677862/bca9342c-0713-11e6-8068-43f73e464d52.png)

The `margin-left: 0.5em` is not to get the button collapsed to the label, which I believe is prettier and more readable. Half an `em` seemed like a good visual spacing after a piece of text, but anything else would do.

----
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.

GEdit-ish, always light but on button hover:
```css
#geany-close-tab-button {
	opacity: 0.25;
}
#geany-close-tab-button:hover {
	opacity: 1;
}
```

light-out only non-active tab, Adwaita-ish:
```css
notebook tab #geany-close-tab-button {
	opacity: 0.25;
}
notebook tab:hover #geany-close-tab-button {
	opacity: 0.5;
}
notebook tab:checked #geany-close-tab-button,
notebook tab #geany-close-tab-button:hover {
	opacity: 1;
}
```

---
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/geany/geany/pull/994#issuecomment-212449004
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.geany.org/pipermail/github-comments/attachments/20160420/9c4750b5/attachment.html>