Mercurial > repos > other > Adwaita-Dark-Green
changeset 113:3a790d4649eb default tip
Fix GTK4/Adwaita outline and background issues
* Views are now used in popovers but shouldn't have
"normal" view background colour
* Flat buttons should be flat, not bordered/outlines
* Spinbuttons in lists don't need outlines on their buttons
author | IBBoard <dev@ibboard.co.uk> |
---|---|
date | Sun, 01 May 2022 11:34:31 +0100 |
parents | bba406abe07c |
children | |
files | gtk-4.4/gtk-minimal.css gtk-4.4/gtk-minimal.scss gtk-4.4/gtk.css gtk-4.4/gtk.scss |
diffstat | 4 files changed, 51 insertions(+), 21 deletions(-) [+] |
line wrap: on
line diff
--- a/gtk-4.4/gtk-minimal.css Sun May 01 11:32:36 2022 +0100 +++ b/gtk-4.4/gtk-minimal.css Sun May 01 11:34:31 2022 +0100 @@ -22,9 +22,9 @@ /* Fix the avatar shape */ avatar { border-radius: 4px; } -list button.image-button:not(.toggle), list button.toggle:checked, list button:hover, list spinbutton { outline: 1px @borders solid; outline-offset: -1px; } +list button.text-button:not(.flat), list button.image-button:not(.toggle):not(.flat), list button.toggle:checked, list button:not(.flat):hover, list spinbutton { outline: 1px @borders solid; outline-offset: -1px; } -button.combo, button.text-button { outline: 1px @borders solid; outline-offset: -1px; } +button.combo, button.text-button.toggle, button.text-button.pill { outline: 1px @borders solid; outline-offset: -1px; } list spinbutton button.image-button:not(.toggle), list button.image-button.background-preview-button, headerbar button.text-button { outline-width: 0; } @@ -37,3 +37,6 @@ entry { background: @view_bg_color; color: @view_fg_color; } switch { border: 1px solid #00000044; } + +/* Prevent hover on a list view giving a light background */ +listview.navigation-sidebar:hover { background: transparent; }
--- a/gtk-4.4/gtk-minimal.scss Sun May 01 11:32:36 2022 +0100 +++ b/gtk-4.4/gtk-minimal.scss Sun May 01 11:34:31 2022 +0100 @@ -37,14 +37,17 @@ avatar { border-radius: 4px } list { - button.image-button:not(.toggle), button.toggle:checked, - button:hover, spinbutton { + button.text-button:not(.flat), + button.image-button:not(.toggle):not(.flat), + button.toggle:checked, + button:not(.flat):hover, + spinbutton { outline: 1px #{"@borders"} solid; outline-offset: -1px; } } -button.combo, button.text-button { +button.combo, button.text-button.toggle, button.text-button.pill { outline: 1px #{"@borders"} solid; outline-offset: -1px; } @@ -77,4 +80,9 @@ switch{ border: 1px solid #00000044 +} + +/* Prevent hover on a list view giving a light background */ +listview.navigation-sidebar:hover { + background: transparent; } \ No newline at end of file
--- a/gtk-4.4/gtk.css Sun May 01 11:32:36 2022 +0100 +++ b/gtk-4.4/gtk.css Sun May 01 11:34:31 2022 +0100 @@ -1978,21 +1978,23 @@ .view:selected:backdrop, .view text:selected:backdrop, iconview:selected:backdrop, iconview text:selected:backdrop, textview:selected:backdrop, textview text:selected:backdrop { background-color: #5E7F3E; } -list, list-row, list-row.button { background-color: #e1e1e1; } - -list:backdrop, list:backdrop:hover, list-row:backdrop, list-row:backdrop:hover, list-row.button:backdrop, list-row.button:backdrop:hover { color: #272727; background-color: #dedede; } - -list:selected, list-row:selected, list-row.button:selected { color: #ffffff; background-color: #5E7F3E; } - -list:hover, list-row:hover, list-row.button:hover { background-color: #d7d7d7; } - -list:active, list-row:active, list-row.button:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } - -list:selected:active, list-row:selected:active, list-row.button:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } - -list:selected:hover, list-row:selected:hover, list-row.button:selected:hover { background-color: #57753a; } - -list:selected:backdrop, list-row:selected:backdrop, list-row.button:selected:backdrop { background-color: #5E7F3E; } +popover .view, popover iconview { background-color: transparent; } + +list:not(.view):not(iconview), list-row, list-row.button { background-color: #e1e1e1; } + +list:not(.view):not(iconview):backdrop, list:not(.view):not(iconview):backdrop:hover, list-row:backdrop, list-row:backdrop:hover, list-row.button:backdrop, list-row.button:backdrop:hover { color: #272727; background-color: #dedede; } + +list:not(.view):not(iconview):selected, list-row:selected, list-row.button:selected { color: #ffffff; background-color: #5E7F3E; } + +list:not(.view):not(iconview):hover, list-row:hover, list-row.button:hover { background-color: #d7d7d7; } + +list:not(.view):not(iconview):active, list-row:active, list-row.button:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } + +list:not(.view):not(iconview):selected:active, list-row:selected:active, list-row.button:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } + +list:not(.view):not(iconview):selected:hover, list-row:selected:hover, list-row.button:selected:hover { background-color: #57753a; } + +list:not(.view):not(iconview):selected:backdrop, list-row:selected:backdrop, list-row.button:selected:backdrop { background-color: #5E7F3E; } .sidebar list { background: transparent; } @@ -2096,6 +2098,8 @@ check:indeterminate:disabled, radio:indeterminate:disabled { box-shadow: none; color: rgba(255, 255, 255, 0.7); } +button.flat { outline-width: 0; outline-color: transparent; } + button.suggested-action { color: white; outline-color: rgba(255, 255, 255, 0.8); border-color: #2b3a1d; background-image: linear-gradient(to top, #59783b 2px, #5E7F3E); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); } button.suggested-action.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: #5E7F3E; } @@ -2114,6 +2118,8 @@ button.suggested-action.flat:backdrop, button.suggested-action.flat:disabled, button.suggested-action.flat:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: rgba(94, 127, 62, 0.8); } +list spinbutton button.image-button:not(.toggle) { outline-width: 0; } + .csd popover.background { border-color: rgba(0, 0, 0, 0.4); } infobar.action:hover > revealer > box { background-color: #d9d7da; }
--- a/gtk-4.4/gtk.scss Sun May 01 11:32:36 2022 +0100 +++ b/gtk-4.4/gtk.scss Sun May 01 11:34:31 2022 +0100 @@ -366,7 +366,11 @@ } } -list, list-row, list-row.button { +popover .view { + background-color: transparent; +} + +list:not(.view), list-row, list-row.button { background-color: darken($text_input_color, 6%); &:backdrop, &:backdrop:hover { color: $backdrop_text_color; @@ -605,6 +609,11 @@ } button { + &.flat { + // FIXME: Not changing the outline! + outline-width: 0; + outline-color: transparent; + } &.suggested-action { @include button(normal, $selected_bg_color, white); &.flat { @@ -648,6 +657,10 @@ } } +list spinbutton button.image-button:not(.toggle) { + outline-width: 0; +} + popover.background { .csd & { $_popover_border: if($variant=='light', transparentize(black, 0.6), transparentize(black, 0.25));