Fix button states of charpick-applet with Yaru themes

4 files changed, 92 insertions, 0 deletions

diff --git a/desktop-themes/YaruGreen/gtk-3.0/_apps.scss b/desktop-themes/YaruGreen/gtk-3.0/_apps.scss
index c54fcf21..a4d7bb9c 100644
--- a/desktop-themes/YaruGreen/gtk-3.0/_apps.scss
+++ b/desktop-themes/YaruGreen/gtk-3.0/_apps.scss
@@ -813,6 +813,45 @@ PanelApplet.wnck-applet .wnck-pager {
   }
 }
 
+
+/* charpick */
+
+.mate-panel-menu-bar #PanelApplet button.flat.text-button { 
+& { 
+     @include button(normal);
+      background-color: transparent;
+      color: $_base_fg_color;
+      border-radius: 4px;
+      border-color: $borders_color;
+      border-right-width: 1px;
+      border-left-width: 1px; 
+      border-color: rgba(0,0,0,0.0);
+      box-shadow: inset 0px 1px $borders_color,inset 0px -1px $borders_color, inset 1px 0px $borders_color,inset -1px 0px $borders_color;
+      padding-left: 2px;
+      padding-right: 2px
+}
+
+
+&:checked, &:checked:hover,&:hover:active  {
+@include button(active);
+background-color: transparent;
+      color: $_base_fg_color;
+      border-radius: 4px;
+      border-color: $borders_color;
+      border-right-width: 1px;
+      border-left-width: 1px; 
+      border-color: rgba(0,0,0,0.0);
+      box-shadow: inset 0px 1px $borders_color,inset 0px -1px $borders_color, inset 1px 0px $borders_color,inset -1px 0px $borders_color;
+      padding-left: 2px;
+      padding-right: 2px
+     }
+
+&:hover {
+ border-color: $core_color_a;
+      }
+}
+
+
 /* clock window */
 #MatePanelPopupWindow {
 	border-radius: $button_radius;
diff --git a/desktop-themes/YaruGreen/gtk-3.0/gtk.css b/desktop-themes/YaruGreen/gtk-3.0/gtk.css
index 07d8dc9a..87973e6f 100644
--- a/desktop-themes/YaruGreen/gtk-3.0/gtk.css
+++ b/desktop-themes/YaruGreen/gtk-3.0/gtk.css
@@ -2305,6 +2305,13 @@ PanelApplet.wnck-applet .wnck-pager { outline-style: solid; outline-offset: -1px
 
 .mate-panel-menu-bar #PanelApplet button.toggle:checked, .mate-panel-menu-bar #PanelApplet button.flat.toggle:checked { background-image: linear-gradient(to bottom, #cbc9c6, #d6d4d2 3px, #d9d7d5 4px, #cdcbc9 50%, #c9c6c4 50%, #c0bdba); }
 
+/* charpick */
+.mate-panel-menu-bar #PanelApplet button.flat.text-button { color: #000000; outline-color: #94908c; border-color: #94908c; background-image: linear-gradient(to bottom, #fdfdfc, #fafafa 50%, #f6f5f5 50%, #e9e7e6); text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); box-shadow: 0 1px rgba(0, 0, 0, 0.05); background-color: transparent; color: #000000; border-radius: 4px; border-color: #94908c; border-right-width: 1px; border-left-width: 1px; border-color: transparent; box-shadow: inset 0px 1px #94908c, inset 0px -1px #94908c, inset 1px 0px #94908c, inset -1px 0px #94908c; padding-left: 2px; padding-right: 2px; }
+
+.mate-panel-menu-bar #PanelApplet button.flat.text-button:checked, .mate-panel-menu-bar #PanelApplet button.flat.text-button:checked:hover, .mate-panel-menu-bar #PanelApplet button.flat.text-button:hover:active { color: #000000; outline-color: #94908c; border-color: #94908c; background-image: linear-gradient(to bottom, #cbc9c6, #d6d4d2 3px, #d9d7d5 4px, #cdcbc9 50%, #c9c6c4 50%, #c0bdba); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; background-color: transparent; color: #000000; border-radius: 4px; border-color: #94908c; border-right-width: 1px; border-left-width: 1px; border-color: transparent; box-shadow: inset 0px 1px #94908c, inset 0px -1px #94908c, inset 1px 0px #94908c, inset -1px 0px #94908c; padding-left: 2px; padding-right: 2px; }
+
+.mate-panel-menu-bar #PanelApplet button.flat.text-button:hover { border-color: #d3d8c7; }
+
 /* clock window */
 #MatePanelPopupWindow { border-radius: 4px; }
 
diff --git a/desktop-themes/YaruOk/gtk-3.0/_apps.scss b/desktop-themes/YaruOk/gtk-3.0/_apps.scss
index c54fcf21..64d807f1 100644
--- a/desktop-themes/YaruOk/gtk-3.0/_apps.scss
+++ b/desktop-themes/YaruOk/gtk-3.0/_apps.scss
@@ -813,6 +813,45 @@ PanelApplet.wnck-applet .wnck-pager {
   }
 }
 
+/* charpick */
+
+.mate-panel-menu-bar #PanelApplet button.flat.text-button { 
+& { 
+     @include button(normal);
+      background-color: transparent;
+      color: $_base_fg_color;
+      border-radius: 4px;
+      border-color: $borders_color;
+      border-right-width: 1px;
+      border-left-width: 1px; 
+      border-color: rgba(0,0,0,0.0);
+      box-shadow: inset 0px 1px $borders_color,inset 0px -1px $borders_color, inset 1px 0px $borders_color,inset -1px 0px $borders_color;
+      padding-left: 2px;
+      padding-right: 2px
+}
+
+
+&:checked, &:checked:hover,&:hover:active  {
+@include button(active);
+background-color: transparent;
+      color: $_base_fg_color;
+      border-radius: 4px;
+      border-color: $borders_color;
+      border-right-width: 1px;
+      border-left-width: 1px; 
+      border-color: rgba(0,0,0,0.0);
+      box-shadow: inset 0px 1px $borders_color,inset 0px -1px $borders_color, inset 1px 0px $borders_color,inset -1px 0px $borders_color;
+      padding-left: 2px;
+      padding-right: 2px
+     }
+
+&:hover {
+ border-color: $core_color_a;
+      }
+
+}
+
+
 /* clock window */
 #MatePanelPopupWindow {
 	border-radius: $button_radius;
diff --git a/desktop-themes/YaruOk/gtk-3.0/gtk.css b/desktop-themes/YaruOk/gtk-3.0/gtk.css
index 9f890393..edf57774 100644
--- a/desktop-themes/YaruOk/gtk-3.0/gtk.css
+++ b/desktop-themes/YaruOk/gtk-3.0/gtk.css
@@ -2305,6 +2305,13 @@ PanelApplet.wnck-applet .wnck-pager { outline-style: solid; outline-offset: -1px
 
 .mate-panel-menu-bar #PanelApplet button.toggle:checked, .mate-panel-menu-bar #PanelApplet button.flat.toggle:checked { background-image: linear-gradient(to bottom, #cbc9c6, #d6d4d2 3px, #d9d7d5 4px, #cdcbc9 50%, #c9c6c4 50%, #c0bdba); }
 
+/* charpick */
+.mate-panel-menu-bar #PanelApplet button.flat.text-button { color: #000000; outline-color: #a29e9b; border-color: #a29e9b; background-image: linear-gradient(to bottom, #fdfdfc, #fafafa 50%, #f6f5f5 50%, #e9e7e6); text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); box-shadow: 0 1px rgba(0, 0, 0, 0.05); background-color: transparent; color: #000000; border-radius: 4px; border-color: #a29e9b; border-right-width: 1px; border-left-width: 1px; border-color: transparent; box-shadow: inset 0px 1px #a29e9b, inset 0px -1px #a29e9b, inset 1px 0px #a29e9b, inset -1px 0px #a29e9b; padding-left: 2px; padding-right: 2px; }
+
+.mate-panel-menu-bar #PanelApplet button.flat.text-button:checked, .mate-panel-menu-bar #PanelApplet button.flat.text-button:checked:hover, .mate-panel-menu-bar #PanelApplet button.flat.text-button:hover:active { color: #000000; outline-color: #a29e9b; border-color: #a29e9b; background-image: linear-gradient(to bottom, #cbc9c6, #d6d4d2 3px, #d9d7d5 4px, #cdcbc9 50%, #c9c6c4 50%, #c0bdba); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; background-color: transparent; color: #000000; border-radius: 4px; border-color: #a29e9b; border-right-width: 1px; border-left-width: 1px; border-color: transparent; box-shadow: inset 0px 1px #a29e9b, inset 0px -1px #a29e9b, inset 1px 0px #a29e9b, inset -1px 0px #a29e9b; padding-left: 2px; padding-right: 2px; }
+
+.mate-panel-menu-bar #PanelApplet button.flat.text-button:hover { border-color: #a4c2e8; }
+
 /* clock window */
 #MatePanelPopupWindow { border-radius: 4px; }