From 13de62d3210828c5d139cf8b953c37de85129763 Mon Sep 17 00:00:00 2001 From: raveit65 Date: Mon, 2 Jan 2017 23:31:24 +0100 Subject: GTK+-3.20 TOK theme: enable outlines and some focus fixes --- .../TraditionalOk/gtk-3.0/gtk-widgets-img.css | 12 ++- .../TraditionalOk/gtk-3.0/gtk-widgets.css | 109 ++++++++++++++++++++- desktop-themes/TraditionalOk/gtk-3.0/gtk.css | 3 + .../TraditionalOk/gtk-3.0/img/border-focused.svg | 56 +++++------ .../TraditionalOk/gtk-3.0/mate-applications.css | 51 +++++++++- 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 887216f1..0e20e679 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"> + 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"> + 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" /> + 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" /> diff --git a/desktop-themes/TraditionalOk/gtk-3.0/mate-applications.css b/desktop-themes/TraditionalOk/gtk-3.0/mate-applications.css index cf803238..57ecbe70 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-weight: 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; +} + -- cgit v1.2.1