[libadwaita/wip/exalm/emoji: 2/2] stylesheet: Refine emoji styles

[Alexander Mikhaylenko <alexm src gnome org>]

commit 8b7c65dd7548dfe16b2931ba5c8e70227c2787f0
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Mon May 17 14:33:36 2021 +0500

    stylesheet: Refine emoji styles
    
    - Specificity bump for padding for the emoji chooser popover
    - Remove some redundant styles
    - Remove blue
    - Make section buttons styled like sidebar and round
    - Make the completion popover look like a menu

 src/stylesheet/_colors.scss                |  2 +
 src/stylesheet/widgets/_emoji-chooser.scss | 78 +++++++++++++++++++-----------
 2 files changed, 53 insertions(+), 27 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 05c6caa2..b7a6a99f 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -18,7 +18,9 @@ $top_hilight: $borders_edge;
 $dark_fill: mix($borders_color, $bg_color, 50%);
 $headerbar_bg_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%));
 $menu_color: $base_color;
+$menu_hover_color: transparentize($text_color, .93);
 $menu_selected_color: transparentize($text_color, .9);
+$menu_selected_hover_color: transparentize($text_color, .87);
 $menu_active_color: if($variant == 'light', transparentize(black, .85), transparentize(black, .1));
 
 $scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 
50%));
diff --git a/src/stylesheet/widgets/_emoji-chooser.scss b/src/stylesheet/widgets/_emoji-chooser.scss
index 68801dbd..f5ae1736 100644
--- a/src/stylesheet/widgets/_emoji-chooser.scss
+++ b/src/stylesheet/widgets/_emoji-chooser.scss
@@ -1,36 +1,43 @@
-popover.emoji-picker > contents,
-popover.entry-completion > contents {
+popover.background.emoji-picker > contents {
   padding: 0;
 }
 
 .emoji-searchbar {
   padding: 6px;
-  border-spacing: 6px;
   border-bottom: 1px solid $borders_color;
 }
 
 .emoji-toolbar {
-  padding: 6px;
-  border-spacing: 6px;
+  // flowbox children already have 3px padding, so we only need 3px more to
+  // get the regular 6px. We also don't need spacing, for the same reason.
+  padding: 3px;
   border-top: 1px solid $borders_color;
 }
 
 button.emoji-section {
-  border-color: transparent;
-  border-width: 3px;
-  border-style: none none solid;
-  border-radius: 0;
-
-  padding: 3px 0 0;
   min-width: 32px;
-  min-height: 28px;
+  min-height: 32px;
+  border-radius: 16px;
 
-  /* reset props inherited from the button style */
+  padding: 0;
   background: none;
-  box-shadow: none;
+  transition: none;
+
+  &:hover {
+    background: $menu_hover_color;
+  }
 
-  &:hover { border-color: if($variant == 'light', $borders_color, transparentize($fg_color, .9)); }
-  &:checked { border-color: $selected_bg_color; }
+  &:checked {
+    background: $menu_selected_color;
+
+    &:hover {
+      background: $menu_selected_hover_color;
+    }
+  }
+
+  &:hover:active {
+    background: $menu_active_color;
+  }
 }
 
 popover.emoji-picker emoji {
@@ -40,24 +47,41 @@ popover.emoji-picker emoji {
 
   &:focus,
   &:hover {
-    background: $selected_bg_color;
+    background: $menu_selected_color;
+
+    &:active {
+      background: $menu_active_color;
+    }
   }
 }
 
+// Emoji completion popover
+
+popover.background.emoji-completion > contents {
+  padding: $menu_margin;
+  padding-bottom: $menu_margin - 2px;
+}
+
 emoji-completion-row {
-   > box {
-    border-spacing: 10px;
-    padding: 2px 10px;
-  }
+  // emoji extends quite a bit into the padding, so we can't use the same padding on all sides
+  padding: $menu_padding - 6px;
+  margin-bottom: 2px;
+  border-radius: $menu_radius;
 
-  :focus,
-  :hover {
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
+  &:dir(ltr) { padding-right: $menu_padding; }
+  &:dir(rtl) { padding-left: $menu_padding; }
+
+   > box {
+    border-spacing: $menu_padding - 6px;
   }
 
-  emoji:focus,
-  emoji:hover {
+  &:focus,
+  &:hover {
     background-color: $menu_selected_color;
+    color: $text-color;
+
+    &:active {
+      background-color: $menu_active_color; // matching buttons
+    }
   }
 }