From 6d324aa51cc2c86a91c099e77ff911d3bc700832 Mon Sep 17 00:00:00 2001 From: Eudaimon Date: Wed, 3 Nov 2021 11:01:51 +0100 Subject: [PATCH] Some GTK4 corrections (still many to go), plus some small improvements to both. --- gtk-3.0/gtk.css | 14 +++-- gtk-4.0/gtk.css | 139 +++++++++++++++++++++++++++++++++-------------- theme_colors.css | 3 +- 3 files changed, 108 insertions(+), 48 deletions(-) diff --git a/gtk-3.0/gtk.css b/gtk-3.0/gtk.css index 4215e91..4581464 100755 --- a/gtk-3.0/gtk.css +++ b/gtk-3.0/gtk.css @@ -69,7 +69,7 @@ insensitive color on backdrop windows*/ @define-color unfocused_insensitive_color shade (@theme_text_color_breeze, 1.1); /* widgets main borders color */ -@define-color borders-breeze alpha(shade(@theme_bg_color_breeze, 0.3), 0.75); +@define-color borders-breeze mix(@border_color, @theme_bg_color_breeze, 0.7); @define-color borders @borders-breeze; /*highlight for buttons*/ @@ -375,7 +375,8 @@ background-color: @theme_base_color_breeze; color: @theme_disabled_fg_color; border-color: @borders; background-color: @insensitive_base_color_breeze; - box-shadow: none; } + /*box-shadow: none;*/ + } /* spinbutton:backdrop:not(.vertical), entry:backdrop { color: @theme_unfocused_text_color; @@ -456,10 +457,10 @@ background-color: @theme_base_color_breeze; .osd spinbutton:disabled:not(.vertical), .osd entry:disabled { color: @theme_disabled_fg_color; - border-color: alpha(black, 0.7); + border-color: alpha(@theme_disabled_fg_color, 0.7); background-color: @insensitive_base_color_breeze; /*rgba(49, 52, 52, 0.5);*/ background-clip: padding-box; - box-shadow: none; + /*box-shadow: none;*/ text-shadow: none; -gtk-icon-shadow: none; } @@ -628,7 +629,7 @@ button, button.flat:hover, button.flat:focus { outline-color: alpha(black, 0.1); /*text-shadow: 0 1px alpha(@text_shadow_color, 0.7), 0 -1px alpha(black, 0.3); -gtk-icon-shadow: 0 1px alpha(@text_shadow_color, 0.7), 0 -1px alpha(black, 0.3);*/ - border-color: black; /*shade(@theme_base_color_breeze, 0.4);*/ + border-color: @border_color; /*shade(@theme_base_color_breeze, 0.4);*/ /*background: linear-gradient(to top, shade (@theme_bg_color_breeze, 1), shade (@theme_bg_color_breeze, 1.05));*/ background-image: linear-gradient(to top, alpha (@button_bg_color, 0.6), alpha(shade (@button_bg_color, 1.1), 0.6)); /*box-shadow: inset 0px 1px 1px shade (@theme_bg_color_breeze, 1.15);*/ @@ -676,6 +677,7 @@ button, button.flat:hover, button.flat:focus { button:checked, button.flat:active, button.flat:checked { color: @button_fg_color; 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);*/ @@ -771,7 +773,7 @@ button, button.flat:hover, button.flat:focus { background-color: alpha (@insensitive_bg_color_breeze, 0.5); box-shadow: 0px 1px 2px @borders; box-shadow: none; - border-color: @borders; } + 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 { diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css index 14da62e..e313581 100755 --- a/gtk-4.0/gtk.css +++ b/gtk-4.0/gtk.css @@ -9,7 +9,7 @@ widget text/foreground color */ @define-color theme_fg_color_breeze @window_fg; /* text color for entries, views and content in general */ -@define-color theme_text_color_breeze @text_widget_fg; /*shade (@theme_fg_color_breeze, 1.15);*/ +@define-color theme_text_color_breeze @text_widget_fg; /*shade(@theme_fg_color_breeze, 1.15);*/ /* window background color */ @define-color theme_bg_color_breeze @window_bg; @@ -69,7 +69,7 @@ insensitive color on backdrop windows*/ @define-color unfocused_insensitive_color shade(@theme_text_color_breeze, 1.1); /* widgets main borders color */ -@define-color borders-breeze alpha(shade(@theme_bg_color_breeze, 0.3), 0.75); +@define-color borders-breeze mix(@border_color, @theme_bg_color_breeze, 0.7); @define-color borders @borders-breeze; /*highlight for buttons*/ @@ -416,7 +416,8 @@ background-color: @theme_base_color_breeze; color: @theme_disabled_fg_color; border-color: @borders; background-color: @insensitive_base_color_breeze; - box-shadow: none; } + /*box-shadow: none;*/ + } /* spinbutton:backdrop:not(.vertical), entry:backdrop { color: @theme_unfocused_text_color; @@ -497,10 +498,10 @@ background-color: @theme_base_color_breeze; .osd spinbutton:disabled:not(.vertical), .osd entry:disabled { color: @theme_disabled_fg_color; - border-color: alpha(black, 0.7); + border-color: alpha(@theme_disabled_fg_color, 0.7); background-color: @insensitive_base_color_breeze; /*rgba(49, 52, 52, 0.5);*/ background-clip: padding-box; - box-shadow: none; + /*box-shadow: none;*/ text-shadow: none; -gtk-icon-shadow: none; } @@ -650,9 +651,9 @@ treeview entry.flat, treeview entry { ***********/ @keyframes needs_attention { from { - background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(@theme_selected_bg_color_breeze), to(transparent)); } + background-image: radial-gradient(@theme_selected_bg_color_breeze, @theme_selected_bg_color_breeze 1%, alpha(@theme_selected_bg_color_breeze, 0)); } to { - background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_bg_color_breeze), to(transparent)); } } + background-image: radial-gradient(@theme_selected_bg_color_breeze, @theme_selected_bg_color_breeze 70%, alpha(@theme_selected_bg_color_breeze, 0)); } } notebook > header > tabs > arrow, button.titlebutton, button { @@ -669,7 +670,7 @@ button, button.flat:hover, button.flat:focus { outline-color: alpha(black, 0.1); /*text-shadow: 0 1px alpha(@text_shadow_color, 0.7), 0 -1px alpha(black, 0.3); -gtk-icon-shadow: 0 1px alpha(@text_shadow_color, 0.7), 0 -1px alpha(black, 0.3);*/ - border-color: black; /*shade(@theme_base_color_breeze, 0.4);*/ + border-color: @border_color; /*shade(@theme_base_color_breeze, 0.4);*/ /*background: linear-gradient(to top, shade(@theme_bg_color_breeze, 1), shade(@theme_bg_color_breeze, 1.05));*/ background-image: linear-gradient(to top, alpha(@button_bg_color, 0.6), alpha(shade(@button_bg_color, 1.1), 0.6)); /*box-shadow: inset 0px 1px 1px shade(@theme_bg_color_breeze, 1.15);*/ @@ -708,7 +709,7 @@ button, button.flat:hover, button.flat:focus { border-color: @borders; border-bottom-color: shade(@borders, 0.75);*/ background-color: alpha(@highlight_color, 0.7); - -gtk-icon-effect: highlight; } + -gtk-icon-filter: brightness(1.2); } headerbar button:hover { background-color: alpha(@highlight_color, 0.3); } @@ -812,7 +813,7 @@ button, button.flat:hover, button.flat:focus { background-color: alpha(@insensitive_bg_color_breeze, 0.5); box-shadow: 0px 1px 2px @borders; box-shadow: none; - border-color: @borders; } + 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 { @@ -1490,7 +1491,7 @@ button { button.circular { border-radius: 100%; - -gtk-outline-radius: 9999px; + /*-gtk-outline-radius: 9999px;*/ background-origin: padding-box, border-box; background-clip: padding-box, border-box; } @@ -1514,25 +1515,39 @@ button.circular { border-color: @borders; border-bottom-color: shade(@borders, 1.1); }*/ +.needs-attention { + 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; + background-repeat: no-repeat; + background-position: top right; +} + +.needs-attention:dir(rtl) { + background-position: top left; +} + +/* .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image, stacksidebar row.needs-attention > label { animation: needs_attention 150ms ease-in; - background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(@warning_color_breeze), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(white, 0.769231)), to(transparent)); - background-size: 6px 6px, 6px 6px; + background-image: radial-gradient(@theme_selected_bg_color_breeze, @warning_color_breeze 70%, alpha(@warning_color_breeze, 0)); + background-size: 1em 1em; background-repeat: no-repeat; - background-position: right 3px, right 4px; } - .stack-switcher > + background-position: top right; + }*/ + /*.stack-switcher > button.needs-attention > label:backdrop, .stack-switcher > button.needs-attention > image:backdrop, stacksidebar row.needs-attention > label:backdrop { - background-size: 6px 6px, 0 0; } - .stack-switcher > + background-size: 6px 6px, 0 0; }*/ +/* .stack-switcher > button.needs-attention > label:dir(rtl), .stack-switcher > button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) { - background-position: left 3px, left 4px; } + background-position: top left; }*/ /*.inline-toolbar toolbutton > button { color: @theme_fg_color_breeze; @@ -2078,7 +2093,7 @@ combobox:drop(active) { ************/ toolbar, .inline-toolbar, searchbar, .location-bar { - -GtkWidget-window-dragging: true; + /*-GtkWidget-window-dragging: true;*/ padding: 4px; background-color: @theme_bg_color_breeze; } @@ -2130,7 +2145,8 @@ searchbar, /*************** * Header bars * ***************/ -.titlebar:not(headerbar), +/*.titlebar:not(headerbar),*/ +.titlebar, headerbar { color: @theme_header_fg; /*text-shadow: 0 1px alpha(@text_shadow_color, 0.3), 0 -1px alpha(black, 0.3);*/ @@ -2214,7 +2230,7 @@ background: linear-gradient(to top, @theme_header_bg, shade(@theme_header_bg, 1. text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px alpha(white, 0); - -gtk-icon-effect: none; + -gtk-icon-filter: none; border-color: shade(@theme_selected_bg_color_breeze, 0.7); } .selection-mode.titlebar:not(headerbar) button:backdrop.flat label, .selection-mode.titlebar:not(headerbar) button:backdrop.flat, .selection-mode.titlebar:not(headerbar) button:backdrop label, .selection-mode.titlebar:not(headerbar) button:backdrop, headerbar.selection-mode button:backdrop.flat label, @@ -2591,13 +2607,13 @@ treeview.view { border-left-color: @borders; border-top-color: @theme_bg_color_breeze; } - * { + /** { -GtkTreeView-horizontal-separator: 4; -GtkTreeView-grid-line-width: 1; -GtkTreeView-grid-line-pattern: ''; -GtkTreeView-tree-line-width: 1; -GtkTreeView-tree-line-pattern: ''; - -GtkTreeView-expander-size: 16; } + -GtkTreeView-expander-size: 16; }*/ treeview.view:selected:focus, treeview.view:selected { border-radius: 0; } treeview.view:selected:backdrop, treeview.view:selected { @@ -2906,7 +2922,7 @@ notebook > header { padding: 0px; border-color: @borders; border-width: 1px; - background-color: @theme_bg_color_breeze } + background-color: @theme_bg_color_breeze; } /*notebook > header:backdrop { border-color: @unfocused_borders; background-color: @theme_unfocused_bg_color_breeze; }*/ @@ -3028,8 +3044,8 @@ notebook > header tab:checked { inset 0 -1px 1px 0 alpha(black, 0.5); } notebook > header tab:hover.reorderable-page { - border-color: alpha (@borders, 0.3); - background-color: alpha (@theme_bg_color_breeze, 0.2); } + border-color: alpha(@borders, 0.3); + background-color: alpha(@theme_bg_color_breeze, 0.2); } /*notebook > header tab:backdrop { color: @theme_unfocused_bg_color_breeze; } notebook > header tab:backdrop.reorderable-page { @@ -3037,10 +3053,10 @@ notebook > header tab:checked { background-color: transparent; }*/ notebook > header tab:checked.reorderable-page { - border-color: alpha (@borders, 0.5); - background-color: alpha (@theme_bg_color_breeze, 0.5); } + border-color: alpha(@borders, 0.5); + background-color: alpha(@theme_bg_color_breeze, 0.5); } notebook > header tab:checked.reorderable-page:hover { - background-color: alpha (@theme_bg_color_breeze, 0.7); } + background-color: alpha(@theme_bg_color_breeze, 0.7); } /*notebook > header tab:backdrop:checked { color: @wm_unfocused_title; }*/ /*notebook > header tab:backdrop:checked.reorderable-page { @@ -3157,7 +3173,7 @@ background-image:linear-gradient(to bottom, transparent, transparent 45%, red 48 scrollbar slider:disabled { background-color: @theme_bg_color_breeze; } scrollbar.fine-tune slider:active { - background-color: shade(@theme_selected_bg_color_breeze, 1.3)} + background-color: shade(@theme_selected_bg_color_breeze, 1.3);} /*scrollbar.fine-tune.horizontal slider { border-width: 5px 4px; } scrollbar.fine-tune.vertical slider { @@ -3433,7 +3449,7 @@ check, radio { margin: 0 4px; background: @theme_base_color_breeze; - box-shadow: inset 0 3px 3px 0px alpha (black, 0.5); + box-shadow: inset 0 3px 3px 0px alpha(black, 0.5); color: @theme_text_color_breeze; min-height: 14px; min-width: 14px; @@ -3453,7 +3469,7 @@ radio { margin-right: 0; } check:indeterminate, radio:indeterminate { - background: shade (mix(@warning_color_breeze,@theme_selected_bg_color_breeze,0.5), 1.025); + background: shade(mix(@warning_color_breeze,@theme_selected_bg_color_breeze,0.5), 1.025); color: @theme_selected_fg_color_breeze; /*box-shadow: none;*/ } check:hover, @@ -3469,7 +3485,7 @@ radio { /*box-shadow: none;*/ } check:disabled, radio:disabled { - background: alpha (@theme_base_color_breeze, 0.7); + background: alpha(@theme_base_color_breeze, 0.7); box-shadow: none; color: @theme_disabled_fg_color; border-color: @theme_disabled_fg_color; } @@ -3482,7 +3498,7 @@ radio { padding: 1px; } check:disabled:indeterminate, radio:disabled:indeterminate { - background: alpha (mix(@warning_color_breeze,@theme_selected_bg_color_breeze,0.5), 0.7); + background: alpha(mix(@warning_color_breeze,@theme_selected_bg_color_breeze,0.5), 0.7); color: @theme_disabled_fg_color; box-shadow: none; } /*check:backdrop, @@ -4154,7 +4170,48 @@ actionbar > revealer > box { scrolledwindow viewport.frame { border-style: none; } + + +overshoot.top { + background-image: radial-gradient(to bottom, alpha(@theme_selected_bg_color_breeze, 0.8) 0%, alpha(@theme_selected_bg_color_breeze, 0.5) 50%, alpha(@theme_selected_bg_color_breeze, 0) 100%); + background-size: 100% 1em; + background-repeat: no-repeat; + background-position: center top; + background-color: transparent; + border: none; + box-shadow: none; +} +overshoot.bottom { + background-image: radial-gradient(to top, alpha(@theme_selected_bg_color_breeze, 0.8) 0%, alpha(@theme_selected_bg_color_breeze, 0.5) 50%, alpha(@theme_selected_bg_color_breeze, 0) 100%); + background-size: 100% 1em; + background-repeat: no-repeat; + background-position: center bottom; + background-color: transparent; + border: none; + box-shadow: none; +} + +overshoot.left { + background-image: radial-gradient(to right, alpha(@theme_selected_bg_color_breeze, 0.8) 0%, alpha(@theme_selected_bg_color_breeze, 0.5) 50%, alpha(@theme_selected_bg_color_breeze, 0) 100%); + background-size: 1em 100%; + background-repeat: no-repeat; + background-position: center left; + background-color: transparent; + border: none; + box-shadow: none; +} + +overshoot.right { + background-image: radial-gradient(to left, alpha(@theme_selected_bg_color_breeze, 0.8) 0%, alpha(@theme_selected_bg_color_breeze, 0.5) 50%, alpha(@theme_selected_bg_color_breeze, 0) 100%); + background-size: 1em 100%; + background-repeat: no-repeat; + background-position: center right; + background-color: transparent; + border: none; + box-shadow: none; +} +/* scrolledwindow overshoot.top { background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(@theme_selected_bg_color_breeze), to(alpha(@theme_selected_bg_color_breeze, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(alpha(@theme_selected_bg_color_breeze, 0.07)), to(alpha(@theme_selected_bg_color_breeze, 0))); background-size: 100% 5%, 100% 100%; @@ -4179,7 +4236,7 @@ scrolledwindow overshoot.bottom { background-position: center bottom; background-color: transparent; border: none; - box-shadow: none; } + box-shadow: none; }*/ /* scrolledwindow overshoot.bottom:backdrop { background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(alpha(@theme_selected_bg_color_breeze, 0.65)), to(alpha(@theme_selected_bg_color_breeze, 0))); background-size: 100% 5%; @@ -4189,14 +4246,14 @@ scrolledwindow overshoot.bottom { border: none; box-shadow: none; }*/ -scrolledwindow overshoot.left { +/*scrolledwindow overshoot.left { background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(@theme_selected_bg_color_breeze), to(alpha(@theme_selected_bg_color_breeze, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(alpha(@theme_selected_bg_color_breeze, 0.07)), to(alpha(@theme_selected_bg_color_breeze, 0))); background-size: 5% 100%, 100% 100%; background-repeat: no-repeat; background-position: left center; background-color: transparent; border: none; - box-shadow: none; } + box-shadow: none; }*/ /*scrolledwindow overshoot.left:backdrop { background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(alpha(@theme_selected_bg_color_breeze, 0.65)), to(alpha(@theme_selected_bg_color_breeze, 0))); background-size: 5% 100%; @@ -4206,14 +4263,14 @@ scrolledwindow overshoot.left { border: none; box-shadow: none; }*/ -scrolledwindow overshoot.right { +/*scrolledwindow overshoot.right { background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(@theme_selected_bg_color_breeze), to(alpha(@theme_selected_bg_color_breeze, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(alpha(@theme_selected_bg_color_breeze, 0.07)), to(alpha(@theme_selected_bg_color_breeze, 0))); background-size: 5% 100%, 100% 100%; background-repeat: no-repeat; background-position: right center; background-color: transparent; border: none; - box-shadow: none; } + box-shadow: none; }*/ /* scrolledwindow overshoot.right:backdrop { background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(alpha(@theme_selected_bg_color_breeze, 0.65)), to(alpha(@theme_selected_bg_color_breeze, 0))); background-size: 5% 100%; @@ -4508,7 +4565,7 @@ stacksidebar row { padding-left: 6px; padding-right: 6px; } stacksidebar row.needs-attention > label { - background-size: 6px 6px, 0 0; } + background-size: 1em 1em; } /**************** * File chooser * @@ -4839,7 +4896,7 @@ colorchooser .popover.osd { .content-view { background-color: @theme_bg_color_breeze; } .content-view:hover { - -gtk-icon-effect: highlight; } + -gtk-icon-filter: brightness(1.2); } .content-view:backdrop { background-color: @theme_unfocused_bg_color_breeze; } diff --git a/theme_colors.css b/theme_colors.css index 711a6ac..cf7dcf6 100644 --- a/theme_colors.css +++ b/theme_colors.css @@ -3,10 +3,11 @@ @define-color text_widget_fg #241f31; @define-color text_widget_bg #cbb79b; - @define-color button_fg #241f31; @define-color button_bg #a0a780; +@define-color border_color black; + @define-color disabled_fg #670202; @define-color disabled_bg #c19292;