[gtk+/wip/dboles/emoji-css: 4/4] HighContrast: basic port of emoji CSS from Adwaita

[Daniel Boles <dboles src gnome org>]

commit fccd5ac434de5e6ffc3e870413bb48845d0055fd
Author: Daniel Boles <dboles src gnome org>
Date:   Sat Sep 2 14:48:10 2017 +0100

    HighContrast: basic port of emoji CSS from Adwaita
    
    https://bugzilla.gnome.org/show_bug.cgi?id=786956

 gtk/theme/HighContrast/_common.scss              |   51 ++++++++++++++++++++++
 gtk/theme/HighContrast/gtk-contained-inverse.css |   23 ++++++++++
 gtk/theme/HighContrast/gtk-contained.css         |   23 ++++++++++
 3 files changed, 97 insertions(+), 0 deletions(-)
---
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index d53f38b..d5b23fa 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -3410,3 +3410,54 @@ stackswitcher button.circular {
   min-width: 0px;
 }
 
+/*********
+ * Emoji *
+ ********/
+
+popover.emoji-picker { padding-left: 0; padding-right: 0; }
+
+button.emoji-section,
+button.emoji-section:backdrop { /* Avoid inherited button theming for backdrops */
+  border-color: transparent;
+  border-width: 3px;
+  border-style: none none solid;
+  border-radius: 0;
+
+  margin: 2px 4px 2px 4px;
+  padding: 3px 0 0;
+  min-width: 32px;
+  min-height: 28px;
+
+  /* reset props inherited from the button style */
+  background: none;
+  box-shadow: none;
+  text-shadow: none;
+
+  outline-offset: -5px;
+
+  &:backdrop:not(:checked) { border-color: transparent; }
+  &:hover { border-color: $borders_color; }
+  &:checked { border-color: $selected_bg_color; }
+
+  label {
+    padding: 0;
+
+    opacity: 0.55;
+  }
+
+  &:hover label { opacity: 0.775; }
+  &:checked label { opacity: 1; }
+
+  /* Dodge default inversion of colour to white for non-flat, selected button */
+  &:checked label { color: $fg_color; }
+}
+
+.emoji {
+  font-size: x-large;
+  padding: 6px;
+  border-radius: 6px;
+
+  &:hover {
+    background: $selected_bg_color;
+  }
+}
diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css 
b/gtk/theme/HighContrast/gtk-contained-inverse.css
index 7ed1c64..c2c39d9 100644
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -1580,3 +1580,26 @@ row:selected button.circular:active { color: #000; }
 stackswitcher button.text-button { min-width: 100px; }
 
 stackswitcher button.circular { min-width: 0px; }
+
+/********* Emoji * */
+popover.emoji-picker { padding-left: 0; padding-right: 0; }
+
+button.emoji-section, button.emoji-section:backdrop { /* Avoid inherited button theming for backdrops */ 
border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; margin: 2px 
4px 2px 4px; padding: 3px 0 0; min-width: 32px; min-height: 28px; /* reset props inherited from the button 
style */ background: none; box-shadow: none; text-shadow: none; outline-offset: -5px; /* Dodge default 
inversion of colour to white for non-flat, selected button */ }
+
+button.emoji-section:backdrop:not(:checked), button.emoji-section:backdrop:backdrop:not(:checked) { 
border-color: transparent; }
+
+button.emoji-section:hover, button.emoji-section:backdrop:hover { border-color: gray; }
+
+button.emoji-section:checked, button.emoji-section:backdrop:checked { border-color: #ddd; }
+
+button.emoji-section label, button.emoji-section:backdrop label { padding: 0; opacity: 0.55; }
+
+button.emoji-section:hover label, button.emoji-section:backdrop:hover label { opacity: 0.775; }
+
+button.emoji-section:checked label, button.emoji-section:backdrop:checked label { opacity: 1; }
+
+button.emoji-section:checked label, button.emoji-section:backdrop:checked label { color: #fff; }
+
+.emoji { font-size: x-large; padding: 6px; border-radius: 6px; }
+
+.emoji:hover { background: #ddd; }
diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
index e67ce48..0766551 100644
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -1586,3 +1586,26 @@ row:selected button.circular:active { color: #fff; }
 stackswitcher button.text-button { min-width: 100px; }
 
 stackswitcher button.circular { min-width: 0px; }
+
+/********* Emoji * */
+popover.emoji-picker { padding-left: 0; padding-right: 0; }
+
+button.emoji-section, button.emoji-section:backdrop { /* Avoid inherited button theming for backdrops */ 
border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; margin: 2px 
4px 2px 4px; padding: 3px 0 0; min-width: 32px; min-height: 28px; /* reset props inherited from the button 
style */ background: none; box-shadow: none; text-shadow: none; outline-offset: -5px; /* Dodge default 
inversion of colour to white for non-flat, selected button */ }
+
+button.emoji-section:backdrop:not(:checked), button.emoji-section:backdrop:backdrop:not(:checked) { 
border-color: transparent; }
+
+button.emoji-section:hover, button.emoji-section:backdrop:hover { border-color: gray; }
+
+button.emoji-section:checked, button.emoji-section:backdrop:checked { border-color: #000; }
+
+button.emoji-section label, button.emoji-section:backdrop label { padding: 0; opacity: 0.55; }
+
+button.emoji-section:hover label, button.emoji-section:backdrop:hover label { opacity: 0.775; }
+
+button.emoji-section:checked label, button.emoji-section:backdrop:checked label { opacity: 1; }
+
+button.emoji-section:checked label, button.emoji-section:backdrop:checked label { color: #000; }
+
+.emoji { font-size: x-large; padding: 6px; border-radius: 6px; }
+
+.emoji:hover { background: #000; }