GTK+-3.20 TOK theme: enable outlines and some focus fixes

5 files changed, 196 insertions, 35 deletions

diff --git a/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets-img.css b/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets-img.css
index 39005e00..08664706 100644
--- a/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets-img.css
+++ b/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets-img.css
@@ -646,6 +646,7 @@ entry:focus,
 combobox entry:focus,
 button.flat:focus:checked,
 button:focus:active,
+button:focus,
 button.default:active,
 /* focused button borders */
 button.flat:focus,
@@ -664,12 +665,19 @@ toolbar.primary-toolbar button.raised:focus,
 toolbar.primary-toolbar button.raised.default,
 toolbar.primary-toolbar .raised button:focus,
 toolbar.primary-toolbar .raised button.default,
-toolbar.primary-toolbar combobox button:focus {
+toolbar.primary-toolbar combobox button:focus,
+toolbar.inline-toolbar.horizontal button.text-button:focus,
+combobox button.combo:focus,
+combobox .linked button.combo:focus {
     border-image: url("img/border-focused.svg") 3 3 4 3 / 3px 3px 4px 3px repeat;
     border-radius: 3px;
     border-width: 1px 1px 2px 1px;
     border-style: solid;
-    border-color: transparent;
+    border-color: @button_default_border_color;
+    box-shadow: inset  0px  1px @button_default_box_shadow_color,
+                inset  1px  0px @button_default_box_shadow_color,
+                inset -1px  0px @button_default_box_shadow_color,
+                inset  0px -1px @button_default_box_shadow_color;
 }
 
 /* focused primary toolbar button borders */
diff --git a/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css b/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css
index 2be910d5..6b48e678 100644
--- a/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css
@@ -10,8 +10,8 @@
     -WnckTasklist-fade-overlay-rect: 0;
     outline-color: @focus_border_color;
     outline-style: dashed;
-    outline-offset: -2px;
-    outline-width: 0px; /* disable ugly focus-line */
+    outline-offset: -3px;
+    outline-width: 1px;
     -gtk-outline-radius: 2px;
     -gtk-icon-style: regular; /* disable symbolic icons */
 }
@@ -872,6 +872,7 @@ scrolledwindow viewport.frame {
 button {
     min-height: 16px;
     min-width: 16px;
+    outline-style: none;
 }
 
 button,
@@ -1173,6 +1174,15 @@ button separator {
     border-width: 1px 1px 1px 0px;
 }
 
+.dialog-action-area.linked button.default,
+.dialog-action-area.linked button:focus {
+    border-color: @button_default_border_color;
+    box-shadow: inset  0px  1px @button_default_box_shadow_color,
+                inset  1px  0px @button_default_box_shadow_color,
+                inset -1px  0px @button_default_box_shadow_color,
+                inset  0px -1px @button_default_box_shadow_color;
+}
+
 /* Leftmost button */
 .dialog-action-area.linked button:first-child,
 .dialog-action-area.linked button:hover:first-child,
@@ -1187,6 +1197,15 @@ button separator {
     border-width: 1px 1px 1px 1px;
 }
 
+.dialog-action-area.linked button.default:first-child,
+.dialog-action-area.linked button:focus:first-child {
+    border-color: @button_default_border_color;
+    box-shadow: inset  0px  1px @button_default_box_shadow_color,
+                inset  1px  0px @button_default_box_shadow_color,
+                inset -1px  0px @button_default_box_shadow_color,
+                inset  0px -1px @button_default_box_shadow_color;
+}
+
 /* Rightmost button */
 .dialog-action-area.linked button:last-child,
 .dialog-action-area.linked button:hover:last-child,
@@ -1201,6 +1220,25 @@ button separator {
     border-width: 1px 1px 1px 0px;
 }
 
+.dialog-action-area.linked button.default:last-child,
+.dialog-action-area.linked button:focus:last-child {
+    border-color: @button_default_border_color;
+    box-shadow: inset  0px  1px @button_default_box_shadow_color,
+                inset  1px  0px @button_default_box_shadow_color,
+                inset -1px  0px @button_default_box_shadow_color,
+                inset  0px -1px @button_default_box_shadow_color;
+}
+
+/* single button */
+.dialog-action-area.linked button.default:only-child,
+.dialog-action-area.linked button:focus:only-child {
+    border-color: @button_default_border_color;
+    box-shadow: inset  0px  1px @button_default_box_shadow_color,
+                inset  1px  0px @button_default_box_shadow_color,
+                inset -1px  0px @button_default_box_shadow_color,
+                inset  0px -1px @button_default_box_shadow_color;
+}
+
 /*****************
  * GtkSpinButton *
  *****************/
@@ -1215,6 +1253,10 @@ spinbutton:focus {
     border-color: @spinbutton_border_color;
 }
 
+spinbutton:focus {
+    border-color: shade (@theme_selected_bg_color, 1.0);
+}
+
 spinbutton.horizontal > entry,
 spinbutton.horizontal > entry:focus {
     padding: 0px 10px 0px 3px;
@@ -1237,6 +1279,11 @@ spinbutton > button:focus:active {
     border-image: none;
 }
 
+spinbutton > button.default,
+spinbutton > button:focus {
+    box-shadow: none;
+}
+
 spinbutton > button:disabled {
     color: @internal_element_insensitive_color;
     border-color: @insensitive_border_color;
@@ -1405,6 +1452,7 @@ toolbar .raised button:hover,
 toolbar combobox button.combo:hover,
 toolbar.primary-toolbar button:hover,
 toolbar.primary-toolbar combobox button.combo:hover,
+toolbar.primary-toolbar combobox button.combo:focus:hover,
 colorchooser #add-color-button:hover {
     background-color: transparent;
     background-image: linear-gradient(to bottom,
@@ -1437,7 +1485,9 @@ toolbar combobox button.combo:checked:disabled {
 }
 
 /* Focused primary toolbar button background */
-toolbar.primary-toolbar button:focus {
+toolbar button:focus,
+toolbar.primary-toolbar button:focus,
+toolbar.primary-toolbar combobox button.combo:focus {
     background-image: linear-gradient(to bottom,
                       @pt_button_focus_gradient_a,
                       @pt_button_focus_gradient_b 50%,
@@ -1446,6 +1496,7 @@ toolbar.primary-toolbar button:focus {
 }
 
 /* Focused + prelit primary toolbar button background */
+toolbar button:focus:hover,
 toolbar.primary-toolbar button:focus:hover {
     background-image: linear-gradient(to bottom,
                       @pt_button_focus_hover_gradient_a,
@@ -1788,6 +1839,39 @@ notebook header.left tab:checked {
                       @notebook_active_tab_gradient_b);
 }
 
+/* outlines */
+notebook header tab:checked {
+    outline-color: @button_default_border_color;
+}
+
+notebook header.top tab:checked {
+    -gtk-outline-top-left-radius: 4px;
+    -gtk-outline-top-right-radius: 4px;
+    -gtk-outline-bottom-left-radius: 0px;
+    -gtk-outline-bottom-right-radius: 0px;
+}
+
+notebook header.bottom tab:checked {
+    -gtk-outline-top-left-radius: 0px;
+    -gtk-outline-top-right-radius: 0px;
+    -gtk-outline-bottom-left-radius: 4px;
+    -gtk-outline-bottom-right-radius: 4px;
+}
+
+notebook header.left tab:checked {
+    -gtk-outline-top-left-radius: 4px;
+    -gtk-outline-top-right-radius: 0px;
+    -gtk-outline-bottom-left-radius: 0px;
+    -gtk-outline-bottom-right-radius: 4px;
+}
+
+notebook header.right tab:checked {
+    -gtk-outline-top-left-radius: 0px;
+    -gtk-outline-top-right-radius: 4px;
+    -gtk-outline-bottom-left-radius: 4px;
+    -gtk-outline-bottom-right-radius: 0px;
+}
+
 /* close button styling */
 paned.horizontal notebook button.flat,
 notebook button.flat.small-button {
@@ -2634,6 +2718,12 @@ checkbutton:selected:focus {
     background-color: transparent;
 }
 
+checkbutton.text-button,
+radiobutton.text-button {
+	padding: 1px 2px 4px;
+	outline-offset: 0;
+}
+
 /************
  * Toolbars *
  ************/
@@ -3267,6 +3357,7 @@ switch slider {
     border-style: solid;
     border-color: @switch_slider_border_color;
     padding: 4px;
+    outline-color: @curent_color;
 }
 
 switch slider:disabled {
@@ -3292,6 +3383,13 @@ iconview.view.cell:selected:focus {
     border-radius: 4px;
 }
 
+iconview.cell:selected:focus {
+    border-radius: 3px;
+    border-color: alpha(@theme_text_color, 0.6);
+    border-width: 1px;
+    border-style: dashed;
+}
+
 list,
 view,
 .view, 
@@ -3356,6 +3454,7 @@ label selection:backdrop:disabled {
 treeview {
     -GtkTreeView-vertical-separator: 0;
     -GtkTreeView-expander-size: 13;
+    outline-color: alpha(currentColor, 0.6);
 }
 
 treeview.dnd {
@@ -3365,6 +3464,10 @@ treeview.dnd {
     border-style: solid;
 }
 
+treeview.view:selected:focus {
+	outline-color: mix(@theme_selected_fg_color, @theme_selected_bg_color, 0.30);
+}
+
 /* column-headers */
 treeview header button {
     color: @internal_element_color;
diff --git a/desktop-themes/TraditionalOk/gtk-3.0/gtk.css b/desktop-themes/TraditionalOk/gtk-3.0/gtk.css
index 4b70e0e3..099a72ed 100644
--- a/desktop-themes/TraditionalOk/gtk-3.0/gtk.css
+++ b/desktop-themes/TraditionalOk/gtk-3.0/gtk.css
@@ -65,6 +65,9 @@
 @define-color button_gradient_c shade(@core_color_b, 1.04);
 @define-color button_gradient_d shade(@core_color_b, 0.98);
 
+@define-color button_default_border_color #6699CC;
+@define-color button_default_box_shadow_color #336699;
+
 /* hover */
 
 @define-color button_hover_gradient_a @theme_base_color;
diff --git a/desktop-themes/TraditionalOk/gtk-3.0/img/border-focused.svg b/desktop-themes/TraditionalOk/gtk-3.0/img/border-focused.svg
index 95378763..5ada2942 100644
--- a/desktop-themes/TraditionalOk/gtk-3.0/img/border-focused.svg
+++ b/desktop-themes/TraditionalOk/gtk-3.0/img/border-focused.svg
@@ -9,12 +9,12 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="16px"
-   height="16px"
-   id="svg33222"
+   sodipodi:docname="border-focused.svg"
+   inkscape:version="0.91 r13725"
    version="1.1"
-   inkscape:version="0.48.3.1 r9886"
-   sodipodi:docname="button-border-focused.svg">
+   id="svg33222"
+   height="16px"
+   width="16px">
   <defs
      id="defs33224">
     <linearGradient
@@ -30,28 +30,28 @@
     </linearGradient>
   </defs>
   <sodipodi:namedview
-     id="base"
-     pagecolor="#8e8e8e"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="1"
-     inkscape:pageshadow="2"
-     inkscape:zoom="16"
-     inkscape:cx="2.68732"
-     inkscape:cy="9.5803639"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     inkscape:grid-bbox="true"
-     inkscape:document-units="px"
-     inkscape:window-width="1280"
-     inkscape:window-height="951"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:snap-nodes="false"
-     inkscape:snap-bbox="true"
+     showborder="false"
      inkscape:showpageshadow="false"
-     showborder="false">
+     inkscape:snap-bbox="true"
+     inkscape:snap-nodes="false"
+     inkscape:window-maximized="0"
+     inkscape:window-y="50"
+     inkscape:window-x="4"
+     inkscape:window-height="722"
+     inkscape:window-width="899"
+     inkscape:document-units="px"
+     inkscape:grid-bbox="true"
+     showgrid="false"
+     inkscape:current-layer="layer1"
+     inkscape:cy="9.4553639"
+     inkscape:cx="8.1007406"
+     inkscape:zoom="16"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="1"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#8e8e8e"
+     id="base">
     <inkscape:grid
        type="xygrid"
        id="grid2992"
@@ -90,7 +90,7 @@
        height="13.999999"
        width="15"
        id="rect17861"
-       style="color:#000000;fill:none;stroke:#4b6e99;stroke-width:1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+       style="color:#000000;fill:none;stroke:#6699cc;stroke-width:1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
     <rect
        ry="1.5"
        rx="1.5"
@@ -99,6 +99,6 @@
        height="12"
        width="13.000001"
        id="rect17861-6"
-       style="color:#000000;fill:none;stroke:#c8daef;stroke-width:0.99999994000000003;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;opacity:0.80000000000000004" />
+       style="color:#000000;fill:none;stroke:#336699;stroke-width:0.99999994;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;opacity:0.8" />
   </g>
 </svg>
diff --git a/desktop-themes/TraditionalOk/gtk-3.0/mate-applications.css b/desktop-themes/TraditionalOk/gtk-3.0/mate-applications.css
index 5053515f..727cb31d 100644
--- a/desktop-themes/TraditionalOk/gtk-3.0/mate-applications.css
+++ b/desktop-themes/TraditionalOk/gtk-3.0/mate-applications.css
@@ -33,7 +33,13 @@
 
 /* ComboBox views */
 .caja-navigation-window toolbar.primary-toolbar combobox button.combo {
-    padding: 4px 4px;
+    padding: 5px;
+    border-image: none;
+}
+
+.caja-navigation-window toolbar.primary-toolbar combobox button.combo:hover {
+    padding: 5px;
+    box-shadow: none;
 }
 
 .caja-canvas-item {
@@ -122,6 +128,27 @@ PanelSeparator {
     text-shadow: none;
 }
 
+/* outlines */
+window.background, /* selector where outlines are writen on GtkTrayIcon */
+.mate-panel-menu-bar menubar,
+.mate-panel-menu-bar PanelApplet,
+.mate-panel-menu-bar button,
+#PanelApplet > #clock-applet-button.flat.toggle,
+#PanelApplet > #showdesktop-button,
+#PanelApplet > wnck-tasklist > button,
+PanelApplet.wnck-applet .wnck-pager {
+    outline-offset: -2px;
+    outline-style: solid;
+    outline-color: shade (@theme_selected_bg_color, 0.8);
+    outline-width: 2px;
+}
+
+.mate-panel-menu-bar button {
+    -gtk-outline-radius: 3px;
+    box-shadow: none;
+    border-image: none;
+}
+
 /* main menu */
 /* set normal menubar button */
 .mate-panel-menu-bar menubar {
@@ -183,6 +210,12 @@ PanelSeparator {
                       @button_hover_gradient_c);
 }
 
+/* use only outlines if focused */
+.mate-panel-menu-bar #PanelApplet button:focus {
+    box-shadow: none;
+    border-image: none;
+}
+
 #PanelApplet > #clock-applet-button.flat.toggle {
    background-color: transparent;
    background-image: none;
@@ -215,6 +248,12 @@ PanelSeparator {
     border-image: none;
 }
 
+/* use only outlines if focused */
+#PanelApplet > #clock-applet-button.flat.toggle:focus {
+    box-shadow: none;
+    border-image: none;
+}
+
 
 #clock-applet-button.flat.toggle > box.horizontal > label {
     font: normal;
@@ -260,7 +299,7 @@ na-tray-applet {
     background-color: transparent;
     padding: 0;
     text-shadow: none;
-    -NaTrayApplet-icon-padding: 3;
+    -NaTrayApplet-icon-padding: 1px; /*any more and outlines get cut off*/
     -NaTrayApplet-icon-size: 16;
 }
 
@@ -500,3 +539,11 @@ GvcMixerDialog notebook.frame box scrolledwindow.frame {
     padding: 0;
 }
 
+/***********************
+ * mate-control-center *
+ ***********************/
+
+#MyControlCenter button.flat {
+    outline-style: dashed;
+}
+