changeset 105:94ce48857c6d

Fix up GTK 3.24 * Fix DConf Editor path bar * Fix Fractal text box * Improve Fractal conversation colouring * Update Nautilus to new header bar * Remove border radius on `window`, which was causing some odd rendering issues (even though it seemed to fix some headerbar corner issues)
author IBBoard <dev@ibboard.co.uk>
date Thu, 21 Apr 2022 17:17:53 +0100
parents 87e188db01a5
children 763cdfeaf613
files gtk-3.24/dconf-editor.css gtk-3.24/fractal.css gtk-3.24/gtk.css gtk-3.24/gtk.scss gtk-3.24/nautilus.css
diffstat 5 files changed, 103 insertions(+), 90 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/gtk-3.24/dconf-editor.css	Thu Apr 21 17:17:53 2022 +0100
@@ -0,0 +1,16 @@
+.large-window.dconf-editor .pathbar {
+    background-color: #3D3D3D;
+    background-image: linear-gradient(to bottom, #434343 0%, #3D3D3D 45%);
+    border-color: transparent;
+    border-width: 0;
+    border-radius: 0; /* Seems to get ignored, which leaves a tiny artefact */
+    /* Ugly hack to remove the border - override with a transparent image and shift the origin to border-box */
+    border-image: linear-gradient(transparent, transparent);
+    background-origin: border-box;
+}
+
+.large-window.dconf-editor:backdrop .pathbar {
+    background-color: #3D3D3D;
+    /* Ugly hack to fix mid-grey backdrop background - set a background image */
+    background-image: linear-gradient(to bottom, #3D3D3D 0%);
+}
\ No newline at end of file
--- a/gtk-3.24/fractal.css	Sat Apr 16 19:44:18 2022 +0100
+++ b/gtk-3.24/fractal.css	Thu Apr 21 17:17:53 2022 +0100
@@ -1,12 +1,12 @@
-.messages-history row {
+.messages-history row:not(.msg-emote):not(.divider) {
     background-color: @theme_lightened_bg_color;
 }
 
-.messages-history row.msg-emote {
-    background-color: @theme_bg_color;
+box.message-input-area box.message-input {
+    background-color: @theme_input_bg_color;
+    background-image: linear-gradient(@theme_input_bg_color 0);
 }
 
-box.message-input {
-    background-color: @theme_input_bg_color
-}
-
+box.message-input-area box.message-inpu:backdrop {
+    background-color: @theme_backdrop_input_bg_color;
+}
\ No newline at end of file
--- a/gtk-3.24/gtk.css	Sat Apr 16 19:44:18 2022 +0100
+++ b/gtk-3.24/gtk.css	Thu Apr 21 17:17:53 2022 +0100
@@ -3,6 +3,7 @@
 @import url("./gnome-builder.css");
 @import url("./cawbird.css");
 @import url("./fractal.css");
+@import url("./dconf-editor.css");
 * { padding: 0; -GtkToolButton-icon-spacing: 4; -GtkTextView-error-underline-color: #cc0000; -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: 3px; -gtk-secondary-caret-color: #5E7F3E; }
 
 /*************** Base States * */
@@ -2060,10 +2061,12 @@
 @define-color theme_bg_dark_color #3D3D3D;
 @define-color theme_lightened_bg_color #e0e0e0;
 @define-color theme_input_bg_color #F0F0F0;
+@define-color theme_backdrop_input_bg_color #ededed;
 @define-color wm_title #dddddd;
 @define-color wm_unfocused_title #dddddd;
 @define-color wm_highlight shade(#3D3D3D, 1.03);
 @define-color wm_borders_edge #3D3D3D;
+@define-color headerbar_shade_color shade(#3D3D3D, 1.03);
 @define-color wm_bg_a shade(#3D3D3D, 1.2);
 @define-color wm_bg_b #3D3D3D;
 @define-color wm_button_hover_color_a shade(#3D3D3D, 1.3);
@@ -2187,7 +2190,9 @@
 
 #pathbarbox { background-color: #C6C6C6; }
 
-.large-window .titlebar:not(headerbar) box.pathbar, .large-window headerbar box.pathbar { background-image: linear-gradient(to bottom, #454545 0%, #3D3D3D 45%); border-width: 0 !important; }
+.large-window .pathbar { background-color: #3D3D3D; background-image: linear-gradient(to bottom, #434343 0%, #3D3D3D 45%); border-color: transparent; border-width: 0; border-radius: 0; }
+
+.large-window:backdrop .pathbar { background-color: #3D3D3D; background-image: none; }
 
 list-row.sidebar-item { background-color: #b9b9b9; border-color: #7a7a7a; }
 
@@ -2316,5 +2321,3 @@
 separator.sidebar { background-image: linear-gradient(to bottom, #303030, #303030 46px, #7a7a7a 46px); }
 
 separator.sidebar:backdrop { background-image: linear-gradient(to bottom, #303030, #303030 46px, #818181 46px); }
-
-window { border-top-left-radius: 9px; border-top-right-radius: 9px; }
--- a/gtk-3.24/gtk.scss	Sat Apr 16 19:44:18 2022 +0100
+++ b/gtk-3.24/gtk.scss	Thu Apr 21 17:17:53 2022 +0100
@@ -10,17 +10,17 @@
 ///    - https://bugzilla.mozilla.org/show_bug.cgi?id=1268618
 ///    - Can't fudge this because Synapse uses the background colour and
 ///      seems to create its own gradient from it
-/// * LibreOffice button-menus (e.g. "More numbering" under bullet styles) have green-on-green
-///   text on hover
+///
+/// Workarounds:
+/// * Fractal is using a `background-image` to make it honour the input box colour
+/// * DConf Editor is using background images, border images and background origins to make it honour various colours
+///   on the path bar
 ///
 /// Unresolvable issues:
 /// * Gnome Terminal uses #C6C6C6 for background
 ///    - This is because it uses @theme_base_color, and that is our base colour.
 ///      The only way to change it in the theme is to change the base colour, but
 ///      that would affect anything that relies on the base colour.
-/// * Nautilus pathbar style doesn't properly change from "in bar" to "no bar"
-///   when making the window wider. It needs an unfocus/focus cycle
-///    - This is an Adwaita/Nautilus problem and can be seen in the base theme
 
 $variant: 'light';
 
@@ -122,11 +122,14 @@
 @define-color theme_bg_dark_color #{"" + $bg_dark_color};
 @define-color theme_lightened_bg_color #{"" + lighten($bg_color, 10%)};
 @define-color theme_input_bg_color #{"" + $text_input_color};
+@define-color theme_backdrop_input_bg_color #{"" + $backdrop_text_input_color};
 @define-color wm_title #{"" + $fg_dark_color};
 @define-color wm_unfocused_title #{"" + $fg_dark_color};
 @define-color wm_highlight shade(#{"" + $bg_dark_color}, 1.03);
 @define-color wm_borders_edge #{"" + $bg_dark_color};
 
+@define-color headerbar_shade_color shade(#{"" + $bg_dark_color}, 1.03);
+
 @define-color wm_bg_a shade(#{$bg_dark_color}, 1.2);
 @define-color wm_bg_b #{$bg_dark_color};
 
@@ -498,12 +501,18 @@
 #pathbarbox {
   background-color: $bg_color;
 }
-.large-window {
-  %titlebar, headerbar {
-    box.pathbar {
-      background-image: linear-gradient(to bottom, lighten($bg_dark_color, 3%) 0%, $bg_dark_color 45%);
-      border-width: 0 !important;
-    }
+
+.pathbar {
+  .large-window & {
+    background-color: $bg_dark_color;
+    background-image: linear-gradient(to bottom, lighten($bg_dark_color, 2.5%) 0%, $bg_dark_color 45%);
+    border-color: transparent;
+    border-width: 0;
+    border-radius: 0;
+  }
+  .large-window:backdrop & {
+    background-color: $bg_dark_color;
+    background-image: none;
   }
 }
 list-row {
@@ -787,12 +796,6 @@
   }
 }
 
-window {
-  border-top-left-radius: 9px;
-  border-top-right-radius: 9px;
-}
-
-
 // Import extra Nautilus CSS manually, because they only do this if
 // you're using Adwaita -
 // https://github.com/GNOME/nautilus/blob/gnome-3-24/src/nautilus-application.c#L1099-L1112
@@ -805,4 +808,7 @@
 @import url("./cawbird.css");
 
 // Customise Fractal because it looks a bit odd in places
-@import url("./fractal.css");
\ No newline at end of file
+@import url("./fractal.css");
+
+// Customise DConf Editor to try to fix the path bar
+@import url("./dconf-editor.css");
\ No newline at end of file
--- a/gtk-3.24/nautilus.css	Sat Apr 16 19:44:18 2022 +0100
+++ b/gtk-3.24/nautilus.css	Thu Apr 21 17:17:53 2022 +0100
@@ -72,78 +72,66 @@
   padding: 4px;
 }
 
-/* New style path bar - Nautilus 3.30 */
-.nautilus-window .path-bar:not(.linked) button, .nautilus-window .path-bar:not(.linked) button:checked, .nautilus-window .path-bar:not(.linked) button:active, .nautilus-window .path-bar:not(.linked) button:hover,
-.nautilus-window .path-bar:not(.linked) button:backdrop, .nautilus-window .path-bar:not(.linked) button:backdrop:checked, .nautilus-window .path-bar:not(.linked) button:backdrop:active, .nautilus-window .path-bar:not(.linked) button:backdrop:hover
- { /* undecorate the buttons */
-  background-image: none;
-  background-color: transparent;
-  border-radius: 0;
-  border-width: 0px;
-  margin: 0px;
-  box-shadow: none;
+/* Path bar */
+
+.nautilus-path-bar > scrolledwindow {
+  margin: 6px 0px 6px 0px;
+  background-color: alpha(currentColor, 0.1);
+  border:1px solid @wm_button_border;
+  border-right-width: 0;
+}
+
+.nautilus-path-bar scrolledwindow:dir(ltr),
+.nautilus-path-bar scrolledwindow:dir(ltr) undershoot.left {
+  border-radius: 6px 0px 0px 6px;
+}
+
+.nautilus-path-bar scrolledwindow:dir(rtl),
+.nautilus-path-bar scrolledwindow:dir(rtl) undershoot.right {
+  border-radius: 0px 6px 6px 0px;
+}
+
+/* Linked look */
+.nautilus-path-bar scrolledwindow:dir(rtl) {
+  margin-left: -1px;
 }
 
-/* New new style path bar - Nautilus 3.32 */
-.nautilus-path-bar button, .nautilus-path-bar button:checked, .nautilus-path-bar button:active, .nautilus-path-bar button:hover,
-.nautilus-path-bar button:backdrop, .nautilus-path-bar button:backdrop:checked, .nautilus-path-bar button:backdrop:active, .nautilus-path-bar button:backdrop:hover,
-.nautilus-path-bar button:first-child {
-  margin: 0px;
+.nautilus-path-bar scrolledwindow undershoot.left {
+  background: linear-gradient(to right, @headerbar_shade_color 6px, alpha(@headerbar_shade_color, 0) 24px);
+}
+.nautilus-path-bar > scrolledwindow undershoot.right {
+  background: linear-gradient(to left, @headerbar_shade_color 6px, alpha(@headerbar_shade_color, 0) 24px);
 }
 
-.nautilus-window .width-maximized .nautilus-path-bar button, .nautilus-window .width-maximized .nautilus-path-bar button:checked, .nautilus-window .width-maximized .nautilus-path-bar button:active, .nautilus-window .width-maximized .nautilus-path-bar button:hover,
-.nautilus-window .width-maximized .nautilus-path-bar button:backdrop, .nautilus-window .width-maximized .nautilus-path-bar button:backdrop:checked, .nautilus-window .width-maximized .nautilus-path-bar button:backdrop:active, .nautilus-window .width-maximized .nautilus-path-bar button:backdrop:hover,
-.nautilus-window .width-maximized .nautilus-path-bar button:first-child
+headerbar:not(.selection-mode) .path-buttons-box button,
+headerbar:not(.selection-mode) .path-buttons-box button:backdrop {
+  background-color: transparent;
+  background-image: none;
+  margin: 3px;
+  box-shadow: none;
+  border-radius: 4px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  border-width: 0px;
+  -gtk-icon-shadow: none;
+}
+
+headerbar:not(.selection-mode) .path-buttons-box button:not(:hover),
+headerbar:not(.selection-mode) .path-buttons-box button.current-dir,
+headerbar:not(.selection-mode) .path-buttons-box button.current-dir:hover
 {
-  border-width: 0px;
-  border-right: 1px solid @wm_button_border;
+  background: none;
   box-shadow: none;
 }
 
-.nautilus-window .width-maximized .nautilus-path-bar button:last-child {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+headerbar:not(.selection-mode) .path-buttons-box button:not(.current-dir):not(:backdrop):hover {
+  background-color: @headerbar_shade_color;
+  background-image: none;
+  box-shadow: none;
 }
 
-.nautilus-window .path-bar:not(.linked) button:not(:checked) image,
-.nautilus-path-bar button:not(:checked) image
-{ opacity: 0.8; } /* dim the icon when not checked */
-
-.nautilus-window .path-bar:not(.linked) button:not(:backdrop):hover { box-shadow: inset 0 -3px @borders; }
-
-.nautilus-window .path-bar-box button {
-  border-width: 0 1px 0 0
-}
-.nautilus-window .path-bar-box.width-maximized { 
-  border-radius: 0;
-}
-.nautilus-window .path-bar-box .linked > button {
-  box-shadow: none
-}
-.nautilus-window .path-bar-box .linked > button:only-child {
-  border-radius:0;
-}
-.nautilus-window .path-bar-box .linked > button:first-child {
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-
-.nautilus-window .path-bar-box {
-  transition: border 200ms;
-  transition: background-color 200ms;
-  border-radius: 5px;
-  border: 1px @wm_button_border solid;
-  background-color: @wm_bg_a;
-  padding-right: 6px;
-}
-.nautilus-window .path-bar-box.width-maximized {
-  border: 1px @wm_button_border solid;
-  border-radius: 3px;
-}
-.nautilus-window .path-bar-box.width-maximized:not(:backdrop) {
-  background-color: @wm_bg_a;
-  /* Nautlis 3.30 should also have an inset shadow for the top, but we can't differentiate it from 3.32 that doesn't need it, so we'll do without */
-  box-shadow: 0 1px @button_emphasis_c;
+.path-buttons-box button:not(.current-dir):not(:backdrop):hover label {
+  opacity: 1;
 }
 
 /* Make the tags fit into the box */