# HG changeset patch # User IBBoard # Date 1650557873 -3600 # Node ID 94ce48857c6d0458cfc6497f0ac242af8672cf7c # Parent 87e188db01a517990a55dcfc182a97af75c84bf2 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) diff -r 87e188db01a5 -r 94ce48857c6d gtk-3.24/dconf-editor.css --- /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 diff -r 87e188db01a5 -r 94ce48857c6d gtk-3.24/fractal.css --- 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 diff -r 87e188db01a5 -r 94ce48857c6d gtk-3.24/gtk.css --- 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; } diff -r 87e188db01a5 -r 94ce48857c6d gtk-3.24/gtk.scss --- 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 diff -r 87e188db01a5 -r 94ce48857c6d gtk-3.24/nautilus.css --- 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 */