From 2ed7c455f1e6653cff79c955631c668332129de0 Mon Sep 17 00:00:00 2001 From: Eudaimon Date: Fri, 12 Nov 2021 12:37:07 +0100 Subject: [PATCH] now buttons look good again, but not sure about the lack of shadow below them... --- gtk-common/common.css | 139 ++++++++++-------------------------------- 1 file changed, 33 insertions(+), 106 deletions(-) diff --git a/gtk-common/common.css b/gtk-common/common.css index d892cd9..3b8f198 100644 --- a/gtk-common/common.css +++ b/gtk-common/common.css @@ -595,7 +595,8 @@ button { padding: 0.2em 0.5em; border: 0px solid; border-radius: 5px; - transition: all 80ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + /*transition: background-color 80ms;*/ + transition: none; } button.default { @@ -618,7 +619,7 @@ button, button.flat:hover, button.flat:focus { inset 0 0 0 1px black, inset 0px 2px 2px 0 alpha(@highlight_color, 0.7), inset 0px -2px 2px 0px alpha(black, 0.85); - background-color: @button_bg_color; + background-color: @button_bg_color; } notebook > header > tabs > arrow, button.sidebar-button, button.titlebutton, button.flat { @@ -632,17 +633,18 @@ button, button.flat:hover, button.flat:focus { transition: none; } notebook > header > tabs > arrow:hover, button.sidebar-button:hover, button.titlebutton:hover, button.flat:hover { - transition: all 80ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + /*transition: all 80ms cubic-bezier(0.25, 0.46, 0.45, 0.94);*/ transition-duration: 500ms; background-color: alpha(@highlight_color, 0.2); } notebook > header > tabs > arrow:hover:active, button.sidebar-button:hover:active, button.titlebutton:hover:active, button.flat:hover:active { - transition: all 80ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + /*transition: all 80ms cubic-bezier(0.25, 0.46, 0.45, 0.94); */} notebook > header > tabs > arrow:focus, button.titlebutton:focus, + button:focus { outline-offset: -8px; - background-color: alpha(@highlight_color, 0.7); + background-color: shade(@button_bg_color, 1.2); } @@ -664,101 +666,28 @@ notebook > header > tabs > arrow:hover, button:active, button:checked, button.flat:active, button.flat:checked { color: @theme_button_foreground_active_breeze; + background-color: @theme_button_background_active_breeze; outline-color: alpha(black, 0.1); border-color: @border_color; - /*text-shadow: 0 1px alpha(white, 0.769231);*/ - /*-gtk-icon-shadow: 0 1px alpha(white, 0.769231);*/ - /*border-color: shade(@borders, 0.6);*/ - /* border-bottom-color: alpha(@highlight_color, 0.5);*/ - /*background: linear-gradient(to top, shade(@theme_bg_color_breeze, 0.85), shade(@theme_bg_color_breeze, 0.9));*/ - /*background-image: linear-gradient(to top, alpha(shade(@button_bg_color, 0.75), 0.6), alpha(shade(@button_bg_color, 0.8), 0.6));*/ - background-image: linear-gradient(to top, shade(@theme_button_background_active_breeze,0.9), shade(@theme_button_background_active_breeze, 1.1)); + -gtk-icon-shadow: none; - /*box-shadow: inset 0px 0px 2px 0px shade(@theme_bg_color_breeze, 0.6);*/ - /*box-shadow: inset 0px 0px 2px 0px shade(@button_bg_color, 0.6), - inset 0px 2px 2px 0px shade(@button_bg_color, 0.3), - 0px 1px 1px alpha(@highlight_color, 0.5);*/ + box-shadow: inset 0 0 0 1px black, inset 0px 2px 1px 0 alpha(@highlight_color, 0.5), inset 0px 2px 2px 1px alpha(black, 0.85), 0px 1px 0px 0px alpha(@highlight_color, 1); - transition-duration: 50ms; } -/* notebook > header > tabs > arrow:backdrop, button.sidebar-button:backdrop, button.titlebutton:backdrop, notebook > header > tabs > arrow:backdrop, button.titlebutton:backdrop, - button:backdrop.flat, - button:backdrop { - border-color: @unfocused_borders; - background: none; - background-image: image(@theme_bg_color_breeze); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px alpha(white, 0); - transition: 80ms ease-out; - -gtk-icon-effect: none; } - notebook > header > tabs > arrow:backdrop label, button.sidebar-button:backdrop label, button.titlebutton:backdrop label, notebook > header > tabs > arrow:backdrop, button.sidebar-button:backdrop, button.titlebutton:backdrop, notebook > header > tabs > arrow:backdrop label, button.titlebutton:backdrop label, notebook > header > tabs > arrow:backdrop, button.titlebutton:backdrop, - button:backdrop.flat label, - button:backdrop.flat, - button:backdrop label, - button:backdrop { - color: @wm_unfocused_title; } - notebook > header > tabs > arrow:backdrop:active, button.sidebar-button:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, button.sidebar-button:backdrop:checked, button.titlebutton:backdrop:checked, notebook > header > tabs > arrow:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, button.titlebutton:backdrop:checked, - button:backdrop.flat:active, - button:backdrop.flat:checked, - button:backdrop:active, - button:backdrop:checked { - border-color: @unfocused_borders; - background-image: image(@theme_unfocused_bg_color_breeze); - box-shadow: inset 0 1px alpha(white, 0); } - notebook > header > tabs > arrow:backdrop:active label, button.sidebar-button:backdrop:active label, button.titlebutton:backdrop:active label, notebook > header > tabs > arrow:backdrop:active, button.sidebar-button:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked label, button.sidebar-button:backdrop:checked label, button.titlebutton:backdrop:checked label, notebook > header > tabs > arrow:backdrop:checked, button.sidebar-button:backdrop:checked, button.titlebutton:backdrop:checked, notebook > header > tabs > arrow:backdrop:active label, button.titlebutton:backdrop:active label, notebook > header > tabs > arrow:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked label, button.titlebutton:backdrop:checked label, notebook > header > tabs > arrow:backdrop:checked, button.titlebutton:backdrop:checked, - button:backdrop.flat:active label, - button:backdrop.flat:active, - button:backdrop.flat:checked label, - button:backdrop.flat:checked, - button:backdrop:active label, - button:backdrop:active, - button:backdrop:checked label, - button:backdrop:checked { - color: @wm_unfocused_title; } - notebook > header > tabs > arrow:backdrop:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, notebook > header > tabs > arrow:backdrop:disabled, button.titlebutton:backdrop:disabled, - button:backdrop.flat:disabled, - button:backdrop:disabled { - border-color: @unfocused_borders; - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px alpha(white, 0); } - notebook > header > tabs > arrow:backdrop:disabled label, button.sidebar-button:backdrop:disabled label, button.titlebutton:backdrop:disabled label, notebook > header > tabs > arrow:backdrop:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, notebook > header > tabs > arrow:backdrop:disabled label, button.titlebutton:backdrop:disabled label, notebook > header > tabs > arrow:backdrop:disabled, button.titlebutton:backdrop:disabled, - button:backdrop.flat:disabled label, - button:backdrop.flat:disabled, - button:backdrop:disabled label, - button:backdrop:disabled { - color: @unfocused_insensitive_color; } - notebook > header > tabs > arrow:backdrop:disabled:active, button.sidebar-button:backdrop:disabled:active, button.titlebutton:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, button.sidebar-button:backdrop:disabled:checked, button.titlebutton:backdrop:disabled:checked, notebook > header > tabs > arrow:backdrop:disabled:active, button.titlebutton:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, button.titlebutton:backdrop:disabled:checked, - button:backdrop.flat:disabled:active, - button:backdrop.flat:disabled:checked, - button:backdrop:disabled:active, - button:backdrop:disabled:checked { - border-color: @unfocused_borders; - background-image: image(@insensitive_bg_color_breeze); - box-shadow: inset 0 1px alpha(white, 0), inset 0px 0px 2px 0px shade(@theme_bg_color_breeze, 0.6) ; } - notebook > header > tabs > arrow:backdrop:disabled:active label, button.sidebar-button:backdrop:disabled:active label, button.titlebutton:backdrop:disabled:active label, notebook > header > tabs > arrow:backdrop:disabled:checked label, button.sidebar-button:backdrop:disabled:checked label, button.titlebutton:backdrop:disabled:checked label, notebook > header > tabs > arrow:backdrop:disabled:active label, button.titlebutton:backdrop:disabled:active label, notebook > header > tabs > arrow:backdrop:disabled:checked label, button.titlebutton:backdrop:disabled:checked label, - button:backdrop.flat:disabled:active label, - button:backdrop.flat:disabled:checked label, - button:backdrop:disabled:active label, - button:backdrop:disabled:checked label { - color: @unfocused_insensitive_color; } - notebook > header > tabs > arrow:backdrop, button.sidebar-button:backdrop, button.titlebutton:backdrop, notebook > header > tabs > arrow:disabled, button.sidebar-button:disabled, button.titlebutton:disabled, notebook > header > tabs > arrow:backdrop:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, - button.flat:backdrop, - button.flat:disabled, - button.flat:backdrop:disabled { - border-color: transparent; - background-color: transparent; - background-image: none; - box-shadow: inset 0 1px alpha(white, 0); - text-shadow: none; - -gtk-icon-shadow: none; } - */ + + /*transition-duration: 50ms; */} - notebook > header > tabs > arrow:disabled, button.titlebutton:disabled, +button:checked:hover, button.flat:checked:hover { + background-color: shade(@theme_button_background_active_breeze, 1.1); +} +button:checked:focus, button.flat:checked:focus { + background-color: shade(@theme_button_background_active_breeze, 1.2); +} + + notebook > header > tabs > arrow:disabled, button.titlebutton:disabled, button.suggested-action:disabled, button.destructive-action:disabled, button:disabled { text-shadow: none; -gtk-icon-shadow: none; @@ -768,11 +697,13 @@ notebook > header > tabs > arrow:hover, /*box-shadow: 0px 1px 2px @borders;*/ box-shadow: inset 0 0 0 1px @theme_disabled_fg_color ; border-color: @theme_disabled_fg_color; } + + notebook > header > tabs > arrow:disabled label, button.titlebutton:disabled label, notebook > header > tabs > arrow:disabled, button.titlebutton:disabled, button:disabled label, button:disabled { color: @theme_disabled_fg_color;} /*@wm_unfocused_title; }*/ - notebook > header > tabs > arrow:disabled:active, button.titlebutton:disabled:active, notebook > header > tabs > arrow:disabled:checked, button.titlebutton:disabled:checked, + notebook > header > tabs > arrow:disabled:active, button.titlebutton:disabled:active, notebook > header > tabs > arrow:disabled:checked, button.titlebutton:disabled:checked, button.suggested-action:disabled:checked, button.destructive-action:disabled:checked, button:disabled:active, button:disabled:checked { /*color: @theme_fg_color_breeze;*/ @@ -1320,17 +1251,11 @@ button.flat.close:hover, button.flat.close:focus { -gtk-icon-shadow: none; color: alpha(@error_color_breeze, 0.8); }*/ - button.destructive-action:disabled { - text-shadow: none; - -gtk-icon-shadow: none; - background-image: image(alpha(@error_color_breeze, 0.35)); - box-shadow: 0px 1px 2px @borders; - box-shadow: none; - border-color: @borders; } + button.destructive-action:disabled label, button.destructive-action:disabled { - color: alpha(@theme_selected_fg_color_breeze, 0.65); } + color: @theme_disabled_fg_color; } button.destructive-action:disabled:active, button.destructive-action:disabled:checked { @@ -1547,7 +1472,7 @@ button.circular { color: @unfocused_insensitive_color; }*/ -.needs-attention { +.needs-attention > label{ animation: needs_attention 150ms ease-in; background-image: radial-gradient(closest-side, @warning_color_breeze 0%, @warning_color_breeze 50%, alpha(@warning_color_breeze, 0) 100%); background-size: 1em 1em; @@ -1555,7 +1480,7 @@ button.circular { background-position: top right; } -.needs-attention:dir(rtl) { +.needs-attention:dir(rtl) > label { background-position: top left; } @@ -2245,16 +2170,18 @@ treeview.view { treeview.view acceleditor > label { background-color: @theme_selected_bg_color_breeze; } -treeview.view header button, treeview.view header button:hover, treeview.view header button:active { +treeview.view header button /* , treeview.view header button:hover, treeview.view header button:active */ + { padding: 0 6px; - background-image: none; + /*background-image: none;*/ border-style: none solid solid none; border-color: @theme_bg_color_breeze; border-radius: 0; - text-shadow: none; } + text-shadow: none; + box-shadow: inset -1px 0 0 0 @borders; } treeview.view header button:disabled { border-color: @theme_bg_color_breeze; - background-image: none; } + background-color: @insensitive_bg_color_breeze; } /*treeview.view header button:backdrop { color: shade(@theme_fg_color_breeze, 1.1); border-color: @theme_bg_color_breeze;