GTK+-3.20 BlackMATE: enable focus highlights and outlines

3 files changed, 78 insertions, 22 deletions

diff --git a/desktop-themes/BlackMATE/gtk-3.0/gtk-widgets-assets-dark.css b/desktop-themes/BlackMATE/gtk-3.0/gtk-widgets-assets-dark.css
index bf4a46eb..7221c769 100644
--- a/desktop-themes/BlackMATE/gtk-3.0/gtk-widgets-assets-dark.css
+++ b/desktop-themes/BlackMATE/gtk-3.0/gtk-widgets-assets-dark.css
@@ -385,6 +385,8 @@ list-row button:selected:hover {
 	border-image: url("assets/button-active-border-dark.svg") 3 / 3px stretch;
 }
 
+button:focus,
+notebook  button:focus,
 button.default,
 notebook  button.default {
 	border-image: url("assets/button-default-border-dark.svg") 3 / 3px stretch;
diff --git a/desktop-themes/BlackMATE/gtk-3.0/gtk-widgets.css b/desktop-themes/BlackMATE/gtk-3.0/gtk-widgets.css
index 3db7fa01..528e784d 100644
--- a/desktop-themes/BlackMATE/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/BlackMATE/gtk-3.0/gtk-widgets.css
@@ -14,10 +14,10 @@
 	-GtkIMHtml-hyperlink-color: @link_color;
 	-GtkHTML-link-color: @link_color;
 	-WnckTasklist-fade-overlay-rect: 0;
-	outline-color: @focus_border;
-	outline-style: dashed;
-	outline-offset: 2px;
-	outline-width: 0px; /* disable ugly focus-line */
+	outline-color: alpha(@focus_border, 0.6);
+	outline-style: dotted;
+	outline-offset: -3px;
+	outline-width: 2px;
 	-gtk-icon-style: regular; /* no symbolic icons */
     text-shadow: none;
 }
@@ -447,6 +447,7 @@ entry:focus {
 	border-image: none;
 	box-shadow: inset 0 -2px alpha(@entry_shadow, 0.05),
 	            inset 0 -1px alpha(@entry_shadow, 0.07);
+
 }
 
 entry:disabled {
@@ -1188,6 +1189,14 @@ list row.activatable {
     border-color: transparent
 }
 
+list row.activatable:focus{
+    background-color: transparent;
+    background-image: linear-gradient(to bottom,
+                                      alpha(@button_gradient_color_a, 0.5),
+                                      alpha(@button_gradient_color_b, 0.5));
+	outline-width: 0px;
+}
+
 list row.activatable:selected,
 list row.activatable:selected:hover {
     background-color: transparent;
@@ -1448,19 +1457,6 @@ button {
     transition: all 400ms ease-out;
 }
 
-button.text-button,
-button.font,
-filechooser  button {
-    padding: 3px;
-}
-
-button.default {
-    transition: all 400ms ease-out;
-    text-shadow: none;
-    color: @theme_fg_color;
-	padding: 1px;
-}
-
 /* ie. mate-control-center */
 button.flat {
     transition: all 400ms ease-out;
@@ -1474,6 +1470,10 @@ button.flat {
     border-image: none;
 }
 
+button:focus{
+	outline-width: 0px;
+}
+
 button.flat:hover {
     border-radius: 3px;
 }
@@ -1512,6 +1512,10 @@ button label:disabled {
 	background-color: transparent;
 }
 
+button label:disabled {
+	color: shade(@theme_fg_color, 0.6);
+}
+
 button:hover {
 	border-image: none;
 	border-style: solid;
@@ -1538,11 +1542,12 @@ button:hover:active {
 	                                  shade(@button_gradient_color_a, 1.5));
 }
 
-button:disabled {
+button:disabled,
+button.default:disabled {
 	background-color: transparent;
 	background-image: linear-gradient(to bottom,
-	                                  alpha(@button_gradient_color_a, 0.5),
-	                                  alpha(@button_gradient_color_b, 0.6));
+	                                  alpha(@button_gradient_color_a, 0.2),
+	                                  alpha(@button_gradient_color_b, 0.3));
 	border-image: none;
 	border-style: solid;
 	border-color: alpha(@button_border, 0.3); /*shade(@button_border, 1.2)*/
@@ -2250,6 +2255,20 @@ toolbar button.image-button {
 	padding: 5px 4px 4px 5px;
 }
 
+toolbar button:focus,
+primary-toolbar button:focus{
+	outline-width: 2px;
+}
+
+/*use only outlines for focus on toolbar buttons */
+
+toolbar button:focus:not(:hover),
+toolbar.primary-toolbar button:focus:not(:hover),
+toolbar.primary-toolbar button.text-button:focus:not(:hover),
+toolbar.primary-toolbar toolbar button:focus:not(:hover){
+	border-image: none;
+}
+
 /********************
  * Primary Toolbars *
  ********************/
@@ -3211,6 +3230,16 @@ switch:backdrop:checked {
 	                                  @active_switch_bg_color_b);
 }
 
+
+switch:checked:hover {
+	color: @theme_main_color;
+	border-image: none;
+	border-color: shade(@frame_color, 1.22);
+	background-image: linear-gradient(to bottom,
+	                                  shade(@active_switch_bg_color_a, 1.1),
+	                                  shade(@active_switch_bg_color_b, 1.1));
+}
+
 switch:disabled,
 switch:backdrop:disabled {
 	background-image: none;
@@ -3258,10 +3287,16 @@ list row switch,
 list row switch:backdrop,
 list row:selected switch,
 list row:selected switch:backdrop {
-   box-shadow: none;
+	box-shadow: none;
     border-color: shade(@button_border, 1.0);
 }
 
+list row  switch:focus slider {
+	outline-offset: 1px;
+	outline-style: solid;
+	outline-color: alpha(@focus_border, 0.6);
+}
+
 list row:selected switchslider:dir(rtl) {
     border-left-color: @borders;
 }
diff --git a/desktop-themes/BlackMATE/gtk-3.0/mate-applications.css b/desktop-themes/BlackMATE/gtk-3.0/mate-applications.css
index fd7e4e59..c57a64ca 100644
--- a/desktop-themes/BlackMATE/gtk-3.0/mate-applications.css
+++ b/desktop-themes/BlackMATE/gtk-3.0/mate-applications.css
@@ -376,6 +376,12 @@ MatePanelAppletFrameDBus {
     box-shadow: none;
 }
 
+/*outline focussed buttons for keyboard use */
+.mate-panel-menu-bar button, .gnome-panel-menu-bar button{
+	outline-offset: -2px;
+	outline-width: 2px;
+}
+
 /* Mate menu button normal */
 /* makes the arrow visible, nothing more works */
 .mate-panel-menu-bar menu menuitem button {
@@ -521,6 +527,19 @@ MatePanelApplet > menubar {
     font-weight: normal;
 }
 
+#clock-applet-button{
+	padding: 4px; /*any less and outlines touch text or get cut off */
+}
+
+#PanelApplet {
+	outline-offset: -2px;
+}
+
+#PanelApplet widget {
+	padding-left: 2px;
+	padding-right: 4px;
+}
+
 /*WnckPager is unnamed in GTK inspector so try this*/
 PanelApplet.wnck-applet .wnck-pager {
     background-image: none;
@@ -549,7 +568,7 @@ na-tray-applet widget box widget {
 }
 
 na-tray-applet {
-    -NaTrayApplet-icon-padding: 3px;
+    -NaTrayApplet-icon-padding: 1px; /*any more and outlines get cut off*/
     -NaTrayApplet-icon-size: 16;
 }