[gtk/gtk-3-24: 1/2] Adwaita: Emoji picker adjustments

[Jakub Steiner <jimmac src gnome org>]

commit 1051c1fcadb9ea2cc7080d38e1306ec4016c8d31
Author: Alex Monday <monday15 gmx com>
Date:   Sun Nov 3 07:17:58 2019 +0000

    Adwaita: Emoji picker adjustments
    
    - Add margins for search entry;
    - Increase side margins for emoji-section buttons box;
    - Apply border-radius on hovered emoji;
    - Adjust indication of hovered emoji-section button.
    
    Closes https://gitlab.gnome.org/GNOME/gtk/issues/2026
    Closes https://gitlab.gnome.org/GNOME/gtk/issues/1704

 gtk/theme/Adwaita/_common.scss           | 14 +++++++++++---
 gtk/theme/Adwaita/gtk-contained-dark.css | 12 +++++++++---
 gtk/theme/Adwaita/gtk-contained.css      | 10 ++++++++--
 3 files changed, 28 insertions(+), 8 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index c3a91fda80..551269167a 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -4688,7 +4688,12 @@ stackswitcher button.text-button.circular { // FIXME aggregate with buttons
  * Emoji *
  ********/
 
-popover.emoji-picker { padding-left: 0; padding-right: 0; }
+popover.emoji-picker { 
+  padding-left: 0;
+  padding-right: 0;
+
+  entry.search { margin: 3px 5px 5px 5px; }
+}
 
 button.emoji-section {
   border-color: transparent;
@@ -4708,8 +4713,11 @@ button.emoji-section {
 
   outline-offset: -5px;
 
+  &:first-child { margin-left: 7px; }
+  &:last-child { margin-right: 7px; }
+
   &:backdrop:not(:checked) { border-color: transparent; }
-  &:hover { border-color: $borders_color; }
+  &:hover { border-color: if($variant == 'light', $borders_color, transparentize($fg_color, .9)); }
   &:checked { border-color: $selected_bg_color; }
 
   label {
@@ -4725,10 +4733,10 @@ button.emoji-section {
 popover.emoji-picker .emoji {
   font-size: x-large;
   padding: 6px;
-  border-radius: 6px;
 
   :hover {
     background: $selected_bg_color;
+    border-radius: 6px;
   }
 }
 
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index dc2a0791ad..ae481e2b52 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1971,11 +1971,17 @@ stackswitcher button.circular, stackswitcher button.text-button.circular { min-w
 /********* Emoji * */
 popover.emoji-picker { padding-left: 0; padding-right: 0; }
 
+popover.emoji-picker entry.search { margin: 3px 5px 5px 5px; }
+
 button.emoji-section { 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; }
 
+button.emoji-section:first-child { margin-left: 7px; }
+
+button.emoji-section:last-child { margin-right: 7px; }
+
 button.emoji-section:backdrop:not(:checked) { border-color: transparent; }
 
-button.emoji-section:hover { border-color: #1b1b1b; }
+button.emoji-section:hover { border-color: rgba(238, 238, 236, 0.1); }
 
 button.emoji-section:checked { border-color: #15539e; }
 
@@ -1985,9 +1991,9 @@ button.emoji-section:hover label { opacity: 0.775; }
 
 button.emoji-section:checked label { opacity: 1; }
 
-popover.emoji-picker .emoji { font-size: x-large; padding: 6px; border-radius: 6px; }
+popover.emoji-picker .emoji { font-size: x-large; padding: 6px; }
 
-popover.emoji-picker .emoji :hover { background: #15539e; }
+popover.emoji-picker .emoji :hover { background: #15539e; border-radius: 6px; }
 
 popover.emoji-completion arrow { border: none; background: none; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index aedea74a54..bd81969eb8 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1987,8 +1987,14 @@ stackswitcher button.circular, stackswitcher button.text-button.circular { min-w
 /********* Emoji * */
 popover.emoji-picker { padding-left: 0; padding-right: 0; }
 
+popover.emoji-picker entry.search { margin: 3px 5px 5px 5px; }
+
 button.emoji-section { 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; }
 
+button.emoji-section:first-child { margin-left: 7px; }
+
+button.emoji-section:last-child { margin-right: 7px; }
+
 button.emoji-section:backdrop:not(:checked) { border-color: transparent; }
 
 button.emoji-section:hover { border-color: #cdc7c2; }
@@ -2001,9 +2007,9 @@ button.emoji-section:hover label { opacity: 0.775; }
 
 button.emoji-section:checked label { opacity: 1; }
 
-popover.emoji-picker .emoji { font-size: x-large; padding: 6px; border-radius: 6px; }
+popover.emoji-picker .emoji { font-size: x-large; padding: 6px; }
 
-popover.emoji-picker .emoji :hover { background: #3584e4; }
+popover.emoji-picker .emoji :hover { background: #3584e4; border-radius: 6px; }
 
 popover.emoji-completion arrow { border: none; background: none; }