[gtk: 1/2] Adwaita: Fix emoji picker styling

[Emmanuele Bassi <ebassi src gnome org>]

commit e05f404fc52ea8dfae31462377e62f863feb1083
Author: nana-4 <hnmaigo gmail com>
Date:   Fri Nov 15 00:04:18 2019 +0900

    Adwaita: Fix emoji picker styling
    
    - Adjust the emoji picker appearance to be the same as gtk3's.
    - Fix button.emoji-section margins in RTL.
    - Prevent the .emoji hover effect from being applied to the entire
      nested popover.

 gtk/theme/Adwaita/_common.scss           | 17 ++++++++---------
 gtk/theme/Adwaita/gtk-contained-dark.css | 14 +++++++-------
 gtk/theme/Adwaita/gtk-contained.css      | 14 +++++++-------
 3 files changed, 22 insertions(+), 23 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 25e7615057..7b6500e1ae 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -4711,11 +4711,10 @@ stackswitcher.circular {
  * Emoji *
  ********/
 
-popover.emoji-picker { 
-  padding-left: 0;
-  padding-right: 0;
+popover.emoji-picker > contents {
+  padding: 0;
 
-  entry.search { margin: 3px 5px 5px 5px; }
+  entry.search { margin: 5px; }
 }
 
 button.emoji-section {
@@ -4724,7 +4723,7 @@ button.emoji-section {
   border-style: none none solid;
   border-radius: 0;
 
-  margin: 2px 4px 2px 4px;
+  margin: 2px 8px 4px;
   padding: 3px 0 0;
   min-width: 32px;
   min-height: 28px;
@@ -4736,8 +4735,8 @@ button.emoji-section {
 
   outline-offset: -5px;
 
-  &:first-child { margin-left: 7px; }
-  &:last-child { margin-right: 7px; }
+  &:dir(ltr):not(:last-child) { margin-right: 0; }
+  &:dir(rtl):not(:last-child) { margin-left: 0; }
 
   &:backdrop:not(:checked) { border-color: transparent; }
   &:hover { border-color: if($variant == 'light', $borders_color, transparentize($fg_color, .9)); }
@@ -4756,10 +4755,10 @@ button.emoji-section {
 popover.emoji-picker .emoji {
   font-size: x-large;
   padding: 6px;
+  border-radius: 6px;
 
-  :hover {
+  &: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 5f96236896..c11db9371e 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -2043,15 +2043,15 @@ stackswitcher.circular > button.circular, stackswitcher.circular > button.text-b
 .icon-dropshadow { -gtk-icon-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.7); }
 
 /********* Emoji * */
-popover.emoji-picker { padding-left: 0; padding-right: 0; }
+popover.emoji-picker > contents { padding: 0; }
 
-popover.emoji-picker entry.search { margin: 3px 5px 5px 5px; }
+popover.emoji-picker > contents entry.search { margin: 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 { border-color: transparent; border-width: 3px; border-style: none none solid; 
border-radius: 0; margin: 2px 8px 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:dir(ltr):not(:last-child) { margin-right: 0; }
 
-button.emoji-section:last-child { margin-right: 7px; }
+button.emoji-section:dir(rtl):not(:last-child) { margin-left: 0; }
 
 button.emoji-section:backdrop:not(:checked) { border-color: transparent; }
 
@@ -2065,9 +2065,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; }
+popover.emoji-picker .emoji { font-size: x-large; padding: 6px; border-radius: 6px; }
 
-popover.emoji-picker .emoji :hover { background: #15539e; border-radius: 6px; }
+popover.emoji-picker .emoji:hover { background: #15539e; }
 
 popover.emoji-completion contents row box { border-spacing: 10px; padding: 2px 10px; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 760b36be32..2593a4c41a 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -2059,15 +2059,15 @@ stackswitcher.circular > button.circular, stackswitcher.circular > button.text-b
 .icon-dropshadow { -gtk-icon-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.7); }
 
 /********* Emoji * */
-popover.emoji-picker { padding-left: 0; padding-right: 0; }
+popover.emoji-picker > contents { padding: 0; }
 
-popover.emoji-picker entry.search { margin: 3px 5px 5px 5px; }
+popover.emoji-picker > contents entry.search { margin: 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 { border-color: transparent; border-width: 3px; border-style: none none solid; 
border-radius: 0; margin: 2px 8px 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:dir(ltr):not(:last-child) { margin-right: 0; }
 
-button.emoji-section:last-child { margin-right: 7px; }
+button.emoji-section:dir(rtl):not(:last-child) { margin-left: 0; }
 
 button.emoji-section:backdrop:not(:checked) { border-color: transparent; }
 
@@ -2081,9 +2081,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; }
+popover.emoji-picker .emoji { font-size: x-large; padding: 6px; border-radius: 6px; }
 
-popover.emoji-picker .emoji :hover { background: #3584e4; border-radius: 6px; }
+popover.emoji-picker .emoji:hover { background: #3584e4; }
 
 popover.emoji-completion contents row box { border-spacing: 10px; padding: 2px 10px; }