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));