From 2acd4e685037dbe8bf527a9d51114b44ba410958 Mon Sep 17 00:00:00 2001 From: eudaimon Date: Thu, 8 Feb 2024 23:15:12 +0100 Subject: [PATCH] Added README, plus a lot of new features and improvements --- README.md | 5 ++ color_schemes/dark-forest-evolved.css | 2 +- common/common.css | 72 +++++++++++++++++++++++---- gtk-3.0/gtk-dark.css | 24 +-------- gtk-3.0/gtk.css | 7 +++ gtk-4.0/gtk.css | 15 ++++++ 6 files changed, 92 insertions(+), 33 deletions(-) create mode 100644 README.md mode change 100644 => 120000 gtk-3.0/gtk-dark.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..b7cb480 --- /dev/null +++ b/README.md @@ -0,0 +1,5 @@ +# Simple gradience + +This is a very simple and lightweight pure CSS theme (no SASS), which works with color CSS files generated by [Gradience](https://github.com/GradienceTeam/Gradience). +It is still a **work in progress**. The idea is to develop it well enough so it can work with most of gtk3, gtk4 and libadwaita apps, but keeping its code fairly simple. Also, as with the rest of my themes, functionality and readability of elements is much more important than cool design, although looking *good enough* is also a goal. + diff --git a/color_schemes/dark-forest-evolved.css b/color_schemes/dark-forest-evolved.css index 2f4ebe6..4c7a0b8 100644 --- a/color_schemes/dark-forest-evolved.css +++ b/color_schemes/dark-forest-evolved.css @@ -10,7 +10,7 @@ @define-color warning_color #ffa348; @define-color warning_bg_color #c64600; @define-color warning_fg_color #ffffff; -@define-color error_color #f66151; +@define-color error_color #FF3830; @define-color error_bg_color #e01b24; @define-color error_fg_color #f9f06b; @define-color window_bg_color #4a4a4a; diff --git a/common/common.css b/common/common.css index bfbd2a0..e632c05 100644 --- a/common/common.css +++ b/common/common.css @@ -201,17 +201,17 @@ radio:indeterminate:checked, radio:indeterminate:checked:disabled { /* .destructive-action, .suggested-action */ -.destructive-action:not(:disabled) { +.destructive-action:not(:disabled), .destructive:not(:disabled) { background-color: @destructive_bg_color; color: @destructive_fg_color; } -.suggested-action:not(:disabled) { +.suggested-action:not(:disabled), .suggested:not(:disabled) { background-color: @success_bg_color; color: @success_fg_color; } -button.default { +button.default:not(:disabled) { border-color: @success_color; } @@ -331,7 +331,7 @@ entry progress { /* notebook, tabbar */ /* see buttons too */ -tab, button.radio, stackswitcher > button { +tab, button.radio, stackswitcher > button, .circular, .pill { border-radius: 9999px; } @@ -373,6 +373,14 @@ menuitem:hover, menubar > item:hover, modelbutton:hover { } +/********** Frames * */ + +frame, .frame { border: 1px solid alpha(currentColor,0.15); } + +frame { border-radius: 12px; } + +frame > label { margin: 4px; } + /* sidebars */ /* icons */ @@ -402,13 +410,24 @@ arrow.left { /* expander, expander-widget */ -expander > title arrow, expander > arrow { +expander, expander > title arrow, expander > arrow { -gtk-icon-source: -gtk-icontheme("arrow-right"); + min-width: 1em; min-height: 1em; } -expander > title arrow:checked, expander > arrow:checked { +expander:dir(rtl), expander:dir(rtl) > title arrow, expander:dir(rtl) > arrow { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } + +expander:checked, expander > title arrow:checked, expander > arrow:checked { -gtk-icon-source: -gtk-icontheme("arrow-down"); } +treeview.view.expander, window.print treeview.expander.dialog-action-box { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); color: alpha(currentColor,0.7); } +treeview.view.expander:hover, window.print treeview.expander.dialog-action-box:hover, treeview.view.expander:active, window.print treeview.expander.dialog-action-box:active { color: currentColor; } + +treeview.view.expander:checked, window.print treeview.expander.dialog-action-box:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + +treeview.view.expander:disabled, window.print treeview.expander.dialog-action-box:disabled { color: alpha(currentColor,0.5); } + + /* separator, paned > separator */ separator, paned > separator { @@ -418,6 +437,7 @@ separator, paned > separator { paned > separator { min-width: 0.2em; min-height: 0.2em; + -gtk-icon-source: none; } separator { @@ -505,16 +525,50 @@ decoration, window.background.csd { box-shadow: 0 0.5em 1em 0 alpha(black, 0.5); } -.background.csd, popover, popover, window.background.csd.popup { +.background.csd, popover > contents, window.background.csd.popup { box-shadow: 0 0.25em 0.5em 0 alpha(black, 0.5); /*background-clip: padding-box;*/ } -button.close:not(:backdrop) { +/* popovers defined in each gtk-3.0 or gtk-4.0 because they conflict each other */ + + +/* window controls */ + +button.close:not(:backdrop), +button.close:hover, button.close:backdrop:hover { color: @error_color; } +button.maximize:not(:backdrop), +button.maximize:hover, button.maximize:backdrop:hover { + color: @success_color; +} + +button.minimize:not(:backdrop), +button.minimize:hover, button.minimize:backdrop:hover { + color: @warning_color; +} + +button.close:hover, button.close:backdrop:hover, +button.minimize:hover, button.minimize:backdrop:hover, +button.maximize:hover, button.maximize:backdrop:hover { + box-shadow: inset 0 -.1em 0 0 alpha(currentColor, 0.7); +} + +button.close:active, button.close:backdrop:active, +button.minimize:active, button.minimize:backdrop:active, +button.maximize:active, button.maximize:backdrop:active { + box-shadow: inset 0 -.2em 0 0 alpha(currentColor, 1); +} + + +windowcontrols button { +margin: 0.2em; +} + + .osd { background-color: alpha(mix(@window_bg_color, @view_bg_color, 0.5), 0.3); border: 1px dashed alpha(@view_fg_color, 0.3); @@ -524,7 +578,7 @@ button.close:not(:backdrop) { /* frame */ .frame { - border: 1px solid alpha(@window_fg_color, 0.3); + border: 1px solid alpha(currentColor, 0.3); } /* .app-notification */ diff --git a/gtk-3.0/gtk-dark.css b/gtk-3.0/gtk-dark.css deleted file mode 100644 index d17f18a..0000000 --- a/gtk-3.0/gtk-dark.css +++ /dev/null @@ -1,23 +0,0 @@ -@import '../common/colors.css'; -@import '../common/common.css'; - - -/* Based on adw-gtk version 4.7 and 4.9 */ - -* { padding: 0; -GtkToolButton-icon-spacing: 4; -GtkTextView-error-underline-color: @error_bg_color; -GtkScrolledWindow-scrollbar-spacing: 0; -GtkToolItemGroup-expander-size: 11; -GtkWidget-text-handle-width: 20; -GtkWidget-text-handle-height: 24; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; outline-color: alpha(currentColor,0.3); outline-style: dashed; outline-offset: -3px; outline-width: 1px; -gtk-outline-radius: 4px; -gtk-secondary-caret-color: @accent_bg_color; } - -*:disabled { -gtk-icon-effect: dim; } - -.gtkstyle-fallback { color: @window_fg_color; background-color: @window_bg_color; } - -.gtkstyle-fallback:hover { color: @window_fg_color; background-color: shade(@window_bg_color,1.1); } - -.gtkstyle-fallback:active { color: @window_fg_color; background-color: shade(@window_bg_color,0.9); } - -.gtkstyle-fallback:disabled { color: mix(@window_fg_color,@window_bg_color,0.5); background-color: mix(@window_bg_color,@view_bg_color,0.4); } - -.gtkstyle-fallback:selected { color: @accent_fg_color; background-color: @accent_bg_color; } - -*:disabled { - -gtk-icon-effect: dim; -} diff --git a/gtk-3.0/gtk-dark.css b/gtk-3.0/gtk-dark.css new file mode 120000 index 0000000..78c9d4e --- /dev/null +++ b/gtk-3.0/gtk-dark.css @@ -0,0 +1 @@ +gtk.css \ No newline at end of file diff --git a/gtk-3.0/gtk.css b/gtk-3.0/gtk.css index d17f18a..673d6b6 100644 --- a/gtk-3.0/gtk.css +++ b/gtk-3.0/gtk.css @@ -21,3 +21,10 @@ *:disabled { -gtk-icon-effect: dim; } + + +popover, popover.background, .background.popup { + border: 1px solid mix(@popover_bg_color, @popover_fg_color, 0.5); + background-color: @popover_bg_color; + color: @popover_fg_color; +} diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css index 2c938bd..fb41838 100644 --- a/gtk-4.0/gtk.css +++ b/gtk-4.0/gtk.css @@ -12,3 +12,18 @@ } +popover > contents { +background-clip: padding-box; + +padding: 0.5em; + +} +popover, popover.background { +background-color: transparent; +} + +popover > contents, popover > arrow { +border: 1px solid mix(@popover_bg_color, @popover_fg_color, 0.5); +background-color: @popover_bg_color; +color: @popover_fg_color; +}