From fb3ff718bb104d5d769dca7f6da0a879d296b7b1 Mon Sep 17 00:00:00 2001 From: raveit65 Date: Mon, 9 Feb 2015 20:29:33 +0100 Subject: Menta themes GTK3: adjust flat buttons in caja, pluma and m-c-c - adjust transition timings - adjust GtkComboBox in primary toolbar --- desktop-themes/BlueMenta/gtk-3.0/gtk-main.css | 5 + desktop-themes/BlueMenta/gtk-3.0/gtk-widgets.css | 10 +- .../BlueMenta/gtk-3.0/mate-applications.css | 151 +++++++++++++++++---- desktop-themes/Menta/gtk-3.0/gtk-main.css | 5 + desktop-themes/Menta/gtk-3.0/gtk-widgets.css | 12 +- desktop-themes/Menta/gtk-3.0/mate-applications.css | 146 ++++++++++++++++---- 6 files changed, 269 insertions(+), 60 deletions(-) diff --git a/desktop-themes/BlueMenta/gtk-3.0/gtk-main.css b/desktop-themes/BlueMenta/gtk-3.0/gtk-main.css index e572956d..5cde80cc 100644 --- a/desktop-themes/BlueMenta/gtk-3.0/gtk-main.css +++ b/desktop-themes/BlueMenta/gtk-3.0/gtk-main.css @@ -176,6 +176,11 @@ @define-color selection_menu_hover shade(@selection_menu_fg, 0.80); @define-color selection_menu_active shade(@selection_menu_fg, 0.60); +/************** + * MATE Apps * + **************/ +@define-color cluebar_color shade (@theme_base_color, 0.9); + /************** * GNOME Apps * **************/ diff --git a/desktop-themes/BlueMenta/gtk-3.0/gtk-widgets.css b/desktop-themes/BlueMenta/gtk-3.0/gtk-widgets.css index b3157ad1..45122104 100644 --- a/desktop-themes/BlueMenta/gtk-3.0/gtk-widgets.css +++ b/desktop-themes/BlueMenta/gtk-3.0/gtk-widgets.css @@ -31,7 +31,7 @@ outline-color: alpha(@theme_text_color, 0.3); outline-style: dashed; outline-offset: -3px; /* 2px */ - outline-width: 1px; + outline-width: 0px; /* disable ugly focus-line */ outline-radius: 2px; } @@ -883,7 +883,7 @@ GtkComboBox.combobox-entry .button { } .button { - transition: all 200ms ease-out; + transition: all 400ms ease-out; -GtkButton-image-spacing: 4; -GtkButton-interior-focus: true; -GtkButton-default-border: 0; @@ -911,6 +911,10 @@ GtkComboBox.combobox-entry .button { border-image: none; } +.button.flat.hover { + border-radius: 3px; +} + /* We may want a background for focused buttons, but in the meantime let's remove it too */ .primary-toolbar .button, .primary-toolbar .button:insensitive, @@ -2109,7 +2113,7 @@ GtkTreeMenu .menuitem, .menu .menuitem { -GtkMenuItem-arrow-scaling: 0.6; - transition: all 100ms ease-out; + transition: all 150ms ease-out; padding: 4px; } diff --git a/desktop-themes/BlueMenta/gtk-3.0/mate-applications.css b/desktop-themes/BlueMenta/gtk-3.0/mate-applications.css index 19d885b8..c754a2a2 100644 --- a/desktop-themes/BlueMenta/gtk-3.0/mate-applications.css +++ b/desktop-themes/BlueMenta/gtk-3.0/mate-applications.css @@ -37,9 +37,7 @@ CajaPathbarButton:active:hover { color-stop (1, shade(alpha(@theme_selected_bg_color, 0.8), 1.25))); } - /* For Places Sidebar diskfull indicators */ - CajaPlacesTreeView { -CajaPlacesTreeView-disk-full-bg-color: shade(@theme_bg_color, .65); -CajaPlacesTreeView-disk-full-fg-color: shade(@theme_selected_bg_color, 1.0); @@ -60,7 +58,58 @@ CajaPlacesTreeView:hover { CajaPlacesTreeView:selected:hover { } -@define-color cluebar_color shade (@theme_base_color, 0.9); +/* Caja places bar */ +CajaWindow .button.flat { + background-color: transparent; + background-image: linear-gradient(to bottom, + @button_gradient_color_a, + @button_gradient_color_b); + border-image: url("borders/button.png") 3 3 4 3 / 3px 3px 4px 3px stretch; + padding: 2px 5px; +} + +CajaWindow .button.flat:hover { + background-color: transparent; + background-image: linear-gradient(to bottom, + @button_hover_gradient_color_a, + @button_hover_gradient_color_b); + border-image: url("borders/button.png") 3 3 4 3 / 3px 3px 4px 3px stretch; + padding: 2px 5px; +} + +/* some overrides for button.flat */ +/* zoom button */ +CajaWindow .primary-toolbar .button.flat { + background-color: transparent; + background-image: linear-gradient(to bottom, + shade (@theme_bg_color, 1.0), + shade (@theme_bg_color, 0.96)); +} + +/* zoom button */ +CajaWindow .primary-toolbar .button.flat:hover { + background-color: transparent; + background-image: linear-gradient(to bottom, + @button_gradient_color_a, + @button_gradient_color_b); + border-image: url("borders/button.png") 3 3 4 3 / 3px 3px 4px 3px stretch; +} + +/* ComboBox views */ +CajaWindow .toolbar GtkComboBox .button { + background-image: linear-gradient(to bottom, + shade (@theme_bg_color, 1.0), + shade (@theme_bg_color, 0.96)); + padding: 4px 4px; +} + +CajaWindow .toolbar GtkComboBox .button:hover { + background-image: linear-gradient(to bottom, + @button_gradient_color_a, + @button_gradient_color_b); + border-image: url("borders/button.png") 3 3 4 3 / 3px 3px 4px 3px stretch; + padding: 4px 4px; +} CajaWindow * { -GtkPaned-handle-size: 0; @@ -85,7 +134,6 @@ CajaWindow .view.rubberband { } /* sidebar */ - CajaWindow .sidebar .view { background-color: shade (@theme_bg_color, 1.08); color: @theme_fg_color; @@ -234,11 +282,10 @@ MatePanelApplet *:hover { /* desktop-applet, clockapplet, drivemount, character-map, dictionary */ MatePanelApplet .button { - transition: all 300ms ease-out; + transition: all 400ms ease-out; background-image: none; background-color: @theme_bg_color; color: @theme_text_color; - border-image: none; border-style: solid; border-width: 0px; @@ -251,13 +298,11 @@ MatePanelApplet .button:checked:hover, MatePanelApplet .button:checked, MatePanelApplet .button:active:hover, MatePanelApplet .button:active { - transition: all 300ms ease-out; background-image: linear-gradient(to bottom, shade (@theme_selected_bg_color, 0.86), shade (@theme_selected_bg_color, 0.26)); background-color: @theme_base_color; color: shade (@theme_selected_fg_color, 1.00); - border-image: none; border-style: solid; border-width: 0px; @@ -267,13 +312,11 @@ MatePanelApplet .button:active { } MatePanelApplet .button:hover { - transition: all 300ms ease-out; background-image: linear-gradient(to bottom, @theme_bg_color, shade (@theme_selected_bg_color, 0.86)); background-color: @theme_base_color; color: shade (@theme_text_color, 1.0); - border-image: none; border-style: solid; border-width: 0px; @@ -284,13 +327,12 @@ MatePanelApplet .button:hover { /*Wncklist */ WnckTasklist .button { - transition: all 300ms ease-out; + transition: all 400ms ease-out; background-image: linear-gradient(to bottom, shade (@theme_bg_color, 1.0), shade (@theme_bg_color, 0.96)); background-color: @theme_base_color; color: @theme_text_color; - border-image: none; border-style: solid; border-width: 0px; @@ -303,13 +345,11 @@ WnckTasklist .button:checked:hover, WnckTasklist .button:checked, WnckTasklist .button:active:hover, WnckTasklist .button:active { - transition: all 300ms ease-out; background-image: linear-gradient(to bottom, shade (@theme_selected_bg_color, 0.86), shade (@theme_selected_bg_color, 0.26)); background-color: @theme_base_color; color: shade (@theme_selected_fg_color, 1.00); - border-image: none; border-style: solid; border-width: 0px; @@ -319,13 +359,11 @@ WnckTasklist .button:active { } WnckTasklist .button:hover { - transition: all 300ms ease-out; background-image: linear-gradient(to bottom, @theme_bg_color, shade (@theme_selected_bg_color, 0.86)); background-color: @theme_base_color; color: shade (@theme_text_color, 1.0); - border-image: none; border-style: solid; border-width: 0px; @@ -334,9 +372,13 @@ WnckTasklist .button:hover { -GtkWidget-window-dragging: true; } +/* set normal menubar button */ +PanelMenuBar.menubar .menuitem { + transition: all 200ms ease-out; +} + /* set selected menubar button */ PanelMenuBar.menubar .menuitem:hover { - transition: all 300ms ease-out; background-image: linear-gradient(to bottom, shade (@theme_selected_bg_color, 0.86), shade (@theme_selected_bg_color, 0.26)); @@ -348,11 +390,15 @@ PanelMenuBar.menubar .menuitem:hover { border-radius: 5px; } +/* set normal menubar menuitem */ +PanelMenuBar.menubar .menu .menuitem { + transition: all 150ms ease-out; +} + /* set selected menubar menuitem */ PanelMenuBar.menubar .menu .menuitem:checked:hover, PanelMenuBar.menubar .menu .menuitem:active:hover, PanelMenuBar.menubar .menu .menuitem:hover { - transition: all 200ms ease-out; background-color: @theme_selected_bg_color; background-image: linear-gradient(to bottom, shade (@theme_selected_bg_color, 1.0), @@ -425,6 +471,23 @@ NaTrayApplet { text-shadow: none; } +/**************** + * Mate-Terminal * + ****************/ + +TerminalWindow GtkNotebook.notebook tab { + padding: 2px; + border-color: transparent; + border-width: 0px; + background-image: none; + background-color: transparent; +} + +TerminalWindow GtkNotebook.notebook tab.top, +.notebook tab.bottom { + padding: 2px; +} + /**************** * Pluma * ****************/ @@ -441,19 +504,47 @@ PlumaWindow .view row:hover { color: shade (@theme_selected_bg_color, 0.35); } -/**************** - * Mate-Terminal * - ****************/ +/* Pluma status bar */ +PlumaWindow .button.flat { + border-image: url("borders/button.png") 3 3 4 3 / 3px 3px 4px 3px stretch; + padding: 2px 5px; +} -TerminalWindow GtkNotebook.notebook tab { - padding: 2px; - border-color: transparent; - border-width: 0px; - background-image: none; - background-color: transparent; +PlumaWindow .button.flat:hover { + background-color: transparent; + background-image: linear-gradient(to bottom, + @button_gradient_color_a, + @button_gradient_color_b); + border-image: url("borders/button.png") 3 3 4 3 / 3px 3px 4px 3px stretch; + padding: 2px 5px; } -TerminalWindow GtkNotebook.notebook tab.top, -.notebook tab.bottom { - padding: 2px; +/* surpress styling of close button */ +PlumaWindow .notebook tab .button.flat, +PlumaWindow .notebook tab .button.flat:hover { + border-color: transparent; + background-color: transparent; + background-image: none; + box-shadow: inset 0 1px rgba(255,255,255,0), 0 1px rgba(255,255,255,0); + text-shadow: none; + icon-shadow: none; + border-image: none; } + +/*********************** + * Mate-Control-Center * + ***********************/ + +ShellWindow .button.flat { + border-image: none; +} + +/* button hover of applications */ +ShellWindow .button.flat:hover { + background-color: transparent; + background-image: linear-gradient(to bottom, + @button_hover_gradient_color_a, + @button_hover_gradient_color_b); + border-image: url("borders/button.png") 3 3 4 3 / 3px 3px 4px 3px stretch; +} + diff --git a/desktop-themes/Menta/gtk-3.0/gtk-main.css b/desktop-themes/Menta/gtk-3.0/gtk-main.css index 93be8a60..567fa79b 100644 --- a/desktop-themes/Menta/gtk-3.0/gtk-main.css +++ b/desktop-themes/Menta/gtk-3.0/gtk-main.css @@ -176,6 +176,11 @@ @define-color selection_menu_hover shade(@selection_menu_fg, 0.80); @define-color selection_menu_active shade(@selection_menu_fg, 0.60); +/************** + * MATE Apps * + **************/ +@define-color cluebar_color shade (@theme_base_color, 0.9); + /************** * GNOME Apps * **************/ diff --git a/desktop-themes/Menta/gtk-3.0/gtk-widgets.css b/desktop-themes/Menta/gtk-3.0/gtk-widgets.css index d3906ce1..df193e2f 100644 --- a/desktop-themes/Menta/gtk-3.0/gtk-widgets.css +++ b/desktop-themes/Menta/gtk-3.0/gtk-widgets.css @@ -31,7 +31,7 @@ outline-color: alpha(@theme_text_color, 0.3); outline-style: dashed; outline-offset: -3px; /* 2px */ - outline-width: 1px; + outline-width: 0px; /* disable ugly focus-line */ outline-radius: 2px; } @@ -883,7 +883,7 @@ GtkComboBox.combobox-entry .button { } .button { - transition: all 200ms ease-out; + transition: all 400ms ease-out; -GtkButton-image-spacing: 4; -GtkButton-interior-focus: true; -GtkButton-default-border: 0; @@ -911,6 +911,10 @@ GtkComboBox.combobox-entry .button { border-image: none; } +.button.flat.hover { + border-radius: 3px; +} + /* We may want a background for focused buttons, but in the meantime let's remove it too */ .primary-toolbar .button, .primary-toolbar .button:insensitive, @@ -1827,7 +1831,7 @@ GtkComboBox.combobox-entry .button:hover, GtkComboBox.combobox-entry .button:active, GtkComboBox.combobox-entry .button:active:hover { color: shade (@theme_selected_bg_color, 0.80); - transition: all 200ms ease-in; + transition: all 400ms ease-in; } GtkComboBox .button { @@ -2108,7 +2112,7 @@ GtkTreeMenu .menuitem, .menu .menuitem { -GtkMenuItem-arrow-scaling: 0.6; - transition: all 100ms ease-out; + transition: all 150ms ease-out; padding: 4px; } diff --git a/desktop-themes/Menta/gtk-3.0/mate-applications.css b/desktop-themes/Menta/gtk-3.0/mate-applications.css index 44af4e87..6b40b4b2 100644 --- a/desktop-themes/Menta/gtk-3.0/mate-applications.css +++ b/desktop-themes/Menta/gtk-3.0/mate-applications.css @@ -60,7 +60,58 @@ CajaPlacesTreeView:hover { CajaPlacesTreeView:selected:hover { } -@define-color cluebar_color shade (@theme_base_color, 0.9); +/* Caja places bar */ +CajaWindow .button.flat { + background-color: transparent; + background-image: linear-gradient(to bottom, + @button_gradient_color_a, + @button_gradient_color_b); + border-image: url("borders/button.png") 3 3 4 3 / 3px 3px 4px 3px stretch; + padding: 2px 5px; +} + +CajaWindow .button.flat:hover { + background-color: transparent; + background-image: linear-gradient(to bottom, + @button_hover_gradient_color_a, + @button_hover_gradient_color_b); + border-image: url("borders/button.png") 3 3 4 3 / 3px 3px 4px 3px stretch; + padding: 2px 5px; +} + +/* some overrides for button.flat */ +/* zoom button */ +CajaWindow .primary-toolbar .button.flat { + background-color: transparent; + background-image: linear-gradient(to bottom, + shade (@theme_bg_color, 1.0), + shade (@theme_bg_color, 0.96)); +} + +/* zoom button */ +CajaWindow .primary-toolbar .button.flat:hover { + background-color: transparent; + background-image: linear-gradient(to bottom, + @button_gradient_color_a, + @button_gradient_color_b); + border-image: url("borders/button.png") 3 3 4 3 / 3px 3px 4px 3px stretch; +} + +/* ComboBox views */ +CajaWindow .toolbar GtkComboBox .button { + background-image: linear-gradient(to bottom, + shade (@theme_bg_color, 1.0), + shade (@theme_bg_color, 0.96)); + padding: 4px 4px; +} + +CajaWindow .toolbar GtkComboBox .button:hover { + background-image: linear-gradient(to bottom, + @button_gradient_color_a, + @button_gradient_color_b); + border-image: url("borders/button.png") 3 3 4 3 / 3px 3px 4px 3px stretch; + padding: 4px 4px; +} CajaWindow * { -GtkPaned-handle-size: 0; @@ -234,7 +285,7 @@ MatePanelApplet *:hover { /* desktop-applet, clockapplet, drivemount, character-map, dictionary */ MatePanelApplet .button { - transition: all 300ms ease-out; + transition: all 400ms ease-out; background-image: none; background-color: @theme_bg_color; color: @theme_text_color; @@ -251,7 +302,6 @@ MatePanelApplet .button:checked:hover, MatePanelApplet .button:checked, MatePanelApplet .button:active:hover, MatePanelApplet .button:active { - transition: all 300ms ease-out; background-image: linear-gradient(to bottom, shade (@theme_selected_bg_color, 0.86), shade (@theme_selected_bg_color, 0.26)); @@ -266,7 +316,6 @@ MatePanelApplet .button:active { } MatePanelApplet .button:hover { - transition: all 300ms ease-out; background-image: linear-gradient(to bottom, @theme_bg_color, shade (@theme_selected_bg_color, 0.86)); @@ -282,7 +331,7 @@ MatePanelApplet .button:hover { /*Wncklist */ WnckTasklist .button { - transition: all 300ms ease-out; + transition: all 400ms ease-out; background-image: linear-gradient(to bottom, shade (@theme_bg_color, 1.0), shade (@theme_bg_color, 0.96)); @@ -301,7 +350,6 @@ WnckTasklist .button:checked:hover, WnckTasklist .button:checked, WnckTasklist .button:active:hover, WnckTasklist .button:active { - transition: all 300ms ease-out; background-image: linear-gradient(to bottom, shade (@theme_selected_bg_color, 0.86), shade (@theme_selected_bg_color, 0.26)); @@ -316,7 +364,6 @@ WnckTasklist .button:active { } WnckTasklist .button:hover { - transition: all 300ms ease-out; background-image: linear-gradient(to bottom, @theme_bg_color, shade (@theme_selected_bg_color, 0.86)); @@ -330,9 +377,13 @@ WnckTasklist .button:hover { -GtkWidget-window-dragging: true; } +/* set normal menubar button */ +PanelMenuBar.menubar .menuitem:hover { + transition: all 200ms ease-out; +} + /* set selected menubar button */ PanelMenuBar.menubar .menuitem:hover { - transition: all 300ms ease-out; background-image: linear-gradient(to bottom, shade (@theme_selected_bg_color, 0.86), shade (@theme_selected_bg_color, 0.26)); @@ -344,11 +395,15 @@ PanelMenuBar.menubar .menuitem:hover { border-radius: 5px; } +/* set normal menubar menuitem */ +PanelMenuBar.menubar .menu .menuitem { + transition: all 150ms ease-out; +} + /* set selected menubar menuitem */ PanelMenuBar.menubar .menu .menuitem:checked:hover, PanelMenuBar.menubar .menu .menuitem:active:hover, PanelMenuBar.menubar .menu .menuitem:hover { - transition: all 200ms ease-out; background-color: @theme_selected_bg_color; background-image: linear-gradient(to bottom, shade (@theme_selected_bg_color, 1.0), @@ -421,6 +476,23 @@ NaTrayApplet { text-shadow: none; } +/**************** + * Mate-Terminal * + ****************/ + +TerminalWindow GtkNotebook.notebook tab { + padding: 2px; + border-color: transparent; + border-width: 0px; + background-image: none; + background-color: transparent; +} + +TerminalWindow GtkNotebook.notebook tab.top, +.notebook tab.bottom { + padding: 2px; +} + /**************** * Pluma * ****************/ @@ -433,23 +505,51 @@ PlumaView { /*FIXME normaly this isn't the right entry for adjusting the sidebar entry hover color*/ PlumaWindow .view row:hover { - background-color: shade (@theme_selected_bg_color, 1.15); - color: shade (@theme_selected_bg_color, 0.35); + background-color: shade (@theme_selected_bg_color, 1.15); + color: shade (@theme_selected_bg_color, 0.35); } -/**************** - * Mate-Terminal * - ****************/ +/* Pluma status bar */ +PlumaWindow .button.flat { + border-image: url("borders/button.png") 3 3 4 3 / 3px 3px 4px 3px stretch; + padding: 2px 5px; +} -TerminalWindow GtkNotebook.notebook tab { - padding: 2px; - border-color: transparent; - border-width: 0px; - background-image: none; - background-color: transparent; +PlumaWindow .button.flat:hover { + background-color: transparent; + background-image: linear-gradient(to bottom, + @button_gradient_color_a, + @button_gradient_color_b); + border-image: url("borders/button.png") 3 3 4 3 / 3px 3px 4px 3px stretch; + padding: 2px 5px; } -TerminalWindow GtkNotebook.notebook tab.top, -.notebook tab.bottom { - padding: 2px; +/* surpress styling of close button */ +PlumaWindow .notebook tab .button.flat, +PlumaWindow .notebook tab .button.flat:hover { + border-color: transparent; + background-color: transparent; + background-image: none; + box-shadow: inset 0 1px rgba(255,255,255,0), 0 1px rgba(255,255,255,0); + text-shadow: none; + icon-shadow: none; + border-image: none; } + +/*********************** + * Mate-Control-Center * + ***********************/ + +ShellWindow .button.flat { + border-image: none; +} + +/* button hover of applications */ +ShellWindow .button.flat:hover { + background-color: transparent; + background-image: linear-gradient(to bottom, + @button_hover_gradient_color_a, + @button_hover_gradient_color_b); + border-image: url("borders/button.png") 3 3 4 3 / 3px 3px 4px 3px stretch; +} + -- cgit v1.2.1