[gtk+] HC: Copy working tooltip code from Adwaita & tweak

[Daniel Boles <dboles src gnome org>]

commit 0fb4a018f59d1707aaac027ef7e9224d836bf4aa
Author: Daniel Boles <dboles src gnome org>
Date:   Thu Oct 5 19:09:19 2017 +0100

    HC: Copy working tooltip code from Adwaita & tweak
    
    There were various problems, like only selecting on .tooltip and not the
    widget node tooltip, not being specific enough for tooltip.csd, etc. So,
    specific theming was absent, and default popup window styles got applied
    
    This commit copies in the better working tooltip CSS from Adwaita, but
    applies a couple of changes to make it work better in the HC themes:
     • Reduce the transparency of the tooltip, so we achieve higher contrast
     • Drop the black text-shadow, as it is not useful on this more black bg
    
    Note: we may then need to re-add some of this to the .tooltip class. But
    it is unclear what needs done there. While Adwaita is not doing it, we
    are better not to confuse by keeping it in HC only; we should try to be
    as close as possible, to make it easier for HC to keep up with Adwaita.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=769879

 gtk/theme/HighContrast/_common.scss              |   33 +++++++++++++--------
 gtk/theme/HighContrast/gtk-contained-inverse.css |   10 ++++--
 gtk/theme/HighContrast/gtk-contained.css         |   10 ++++--
 3 files changed, 34 insertions(+), 19 deletions(-)
---
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index d03f320..7d42945 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -3085,23 +3085,30 @@ infobar {
  * Tooltips *
  ************/
 
-tooltip,
-.tooltip {
-  color: white;
+tooltip {
+  &.background {
+    // background-color needs to be set this way otherwise it gets drawn twice
+    // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
+    background-color: transparentize(black, 0.1);
+    background-clip: padding-box;
+    border: 1px solid $borders_color;
+  }
+
   padding: 4px; /* not working */
   border-radius: 5px;
-  background-color: transparentize(black,0.2);  //FIXME proper color
-  text-shadow: 0 1px black;
-  border: 1px solid $borders_color;
-}
+  box-shadow: none; // otherwise it gets inherited by windowframe.csd
 
-tooltip *,
-.tooltip * { //Yeah this is ugly
-  padding: 4px;
-  background-color: transparent;
-  color: inherit; // just to be sure
+  // FIXME: we need a border or tooltips vanish on black background.
+  decoration { background-color: transparent; }
+
+  * { // Yeah this is ugly
+    padding: 4px;
+    background-color: transparent;
+    color: white;
+  }
 }
 
+
 /*****************
  * Color Chooser *
  *****************/
@@ -3251,7 +3258,7 @@ decoration {
                 0 0 0 1px transparentize($_wm_border,0.1);
   }
 
-  .tooltip & {
+  tooltip.csd & {
     border-radius: 5px;
     box-shadow: none;
   }
diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css 
b/gtk/theme/HighContrast/gtk-contained-inverse.css
index 3f8b6f2..87f5427 100644
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -1399,9 +1399,13 @@ infobar { border-width: 0; border-style: none; }
 .info label:selected, .info label:selected:focus, .info label:selected:hover, .question label:selected, 
.question label:selected:focus, .question label:selected:hover, .warning label:selected, .warning 
label:selected:focus, .warning label:selected:hover, .error label:selected, .error label:selected:focus, 
.error label:selected:hover { background-color: white; }
 
 /************ Tooltips * */
-tooltip, .tooltip { color: white; padding: 4px; /* not working */ border-radius: 5px; background-color: 
rgba(0, 0, 0, 0.8); text-shadow: 0 1px black; border: 1px solid gray; }
+tooltip { padding: 4px; /* not working */ border-radius: 5px; box-shadow: none; }
 
-tooltip *, .tooltip * { padding: 4px; background-color: transparent; color: inherit; }
+tooltip.background { background-color: rgba(0, 0, 0, 0.9); background-clip: padding-box; border: 1px solid 
gray; }
+
+tooltip decoration { background-color: transparent; }
+
+tooltip * { padding: 4px; background-color: transparent; color: white; }
 
 /***************** Color Chooser * */
 colorswatch { box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px #000; }
@@ -1467,7 +1471,7 @@ decoration:backdrop { box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 3px 9px 1p
 
 .csd.popup decoration { border-radius: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 
0.13); }
 
-.tooltip decoration { border-radius: 5px; box-shadow: none; }
+tooltip.csd decoration { border-radius: 5px; box-shadow: none; }
 
 .solid-csd decoration { border-radius: 0; margin: 4px; background-color: #000; border: solid 1px #737373; 
box-shadow: none; }
 
diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
index 483026e..9a438bb 100644
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -1405,9 +1405,13 @@ infobar { border-width: 0; border-style: none; }
 .info label:selected, .info label:selected:focus, .info label:selected:hover, .question label:selected, 
.question label:selected:focus, .question label:selected:hover, .warning label:selected, .warning 
label:selected:focus, .warning label:selected:hover, .error label:selected, .error label:selected:focus, 
.error label:selected:hover { background-color: #333333; }
 
 /************ Tooltips * */
-tooltip, .tooltip { color: white; padding: 4px; /* not working */ border-radius: 5px; background-color: 
rgba(0, 0, 0, 0.8); text-shadow: 0 1px black; border: 1px solid gray; }
+tooltip { padding: 4px; /* not working */ border-radius: 5px; box-shadow: none; }
 
-tooltip *, .tooltip * { padding: 4px; background-color: transparent; color: inherit; }
+tooltip.background { background-color: rgba(0, 0, 0, 0.9); background-clip: padding-box; border: 1px solid 
gray; }
+
+tooltip decoration { background-color: transparent; }
+
+tooltip * { padding: 4px; background-color: transparent; color: white; }
 
 /***************** Color Chooser * */
 colorswatch { box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px #fff; }
@@ -1473,7 +1477,7 @@ decoration:backdrop { box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 3px 9px 1p
 
 .csd.popup decoration { border-radius: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 
0.13); }
 
-.tooltip decoration { border-radius: 5px; box-shadow: none; }
+tooltip.csd decoration { border-radius: 5px; box-shadow: none; }
 
 .solid-csd decoration { border-radius: 0; margin: 4px; background-color: #fff; border: solid 1px #8d8d8d; 
box-shadow: none; }