[gtk+/wip/dboles/emoji-css: 6/8] Adwaita: Apply opacity to emoji button label only



commit 09b76a3cb93b0ead9f512accb5b3917d753c389d
Author: Daniel Boles <dboles src gnome org>
Date:   Sat Sep 2 14:17:44 2017 +0100

    Adwaita: Apply opacity to emoji button label only
    
    This avoids diluting the colour of the bottom border shown on hover.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=786956

 gtk/theme/Adwaita/_common.scss           |    9 +++++----
 gtk/theme/Adwaita/gtk-contained-dark.css |    8 ++++----
 gtk/theme/Adwaita/gtk-contained.css      |    8 ++++----
 3 files changed, 13 insertions(+), 12 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 6f315ab..387c0b1 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -4446,13 +4446,14 @@ button.emoji-section {
   &:hover { border-color: $borders_color; }
   &:checked { border-color: $selected_bg_color; }
 
-  opacity: 0.55;
-  &:hover { opacity: 0.775; }
-  &:checked { opacity: 1; }
-
   label {
     padding: 0;
+
+    opacity: 0.55;
   }
+
+  &:hover label { opacity: 0.775; }
+  &:checked label { opacity: 1; }
 }
 
 .emoji {
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index fc4f574..32bffee 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1899,7 +1899,7 @@ stackswitcher button.circular, stackswitcher button.text-button.circular { min-w
 
 popover.emoji-picker { padding-left: 0; padding-right: 0; }
 
-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; opacity: 0.55; }
+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:backdrop:not(:checked) { border-color: transparent; }
 
@@ -1907,11 +1907,11 @@ button.emoji-section:hover { border-color: #1b1f20; }
 
 button.emoji-section:checked { border-color: #215d9c; }
 
-button.emoji-section:hover { opacity: 0.775; }
+button.emoji-section label { padding: 0; opacity: 0.55; }
 
-button.emoji-section:checked { opacity: 1; }
+button.emoji-section:hover label { opacity: 0.775; }
 
-button.emoji-section label { padding: 0; }
+button.emoji-section:checked label { opacity: 1; }
 
 .emoji { font-size: x-large; padding: 6px; border-radius: 6px; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 029769a..6db34a8 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1919,7 +1919,7 @@ stackswitcher button.circular, stackswitcher button.text-button.circular { min-w
 
 popover.emoji-picker { padding-left: 0; padding-right: 0; }
 
-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; opacity: 0.55; }
+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:backdrop:not(:checked) { border-color: transparent; }
 
@@ -1927,11 +1927,11 @@ button.emoji-section:hover { border-color: #b6b6b3; }
 
 button.emoji-section:checked { border-color: #4a90d9; }
 
-button.emoji-section:hover { opacity: 0.775; }
+button.emoji-section label { padding: 0; opacity: 0.55; }
 
-button.emoji-section:checked { opacity: 1; }
+button.emoji-section:hover label { opacity: 0.775; }
 
-button.emoji-section label { padding: 0; }
+button.emoji-section:checked label { opacity: 1; }
 
 .emoji { font-size: x-large; padding: 6px; border-radius: 6px; }
 


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]