# HG changeset patch
# User IBBoard <dev@ibboard.co.uk>
# Date 1650134658 -3600
# Node ID 87e188db01a517990a55dcfc182a97af75c84bf2
# Parent  d007f45f5171ec8a6189851465d6a256068d91db
Fix various GTK3 issues
* Fix suggested action button colouring outside headerbar
* Use gradient to darken dividers through headerbar
* Lighten links in header bar
* Improve Fractal
  * Make box around input area the same colour (was relying on accidental match)
  * Make text messages (not emotes) lighter
* Mostly fix DConf pathbar (still has a border)

diff -r d007f45f5171 -r 87e188db01a5 gtk-3.24/fractal.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/gtk-3.24/fractal.css	Sat Apr 16 19:44:18 2022 +0100
@@ -0,0 +1,12 @@
+.messages-history row {
+    background-color: @theme_lightened_bg_color;
+}
+
+.messages-history row.msg-emote {
+    background-color: @theme_bg_color;
+}
+
+box.message-input {
+    background-color: @theme_input_bg_color
+}
+
diff -r d007f45f5171 -r 87e188db01a5 gtk-3.24/gtk.css
--- a/gtk-3.24/gtk.css	Sun Mar 27 15:16:09 2022 +0100
+++ b/gtk-3.24/gtk.css	Sat Apr 16 19:44:18 2022 +0100
@@ -2,6 +2,7 @@
 @import url("./nautilus.css");
 @import url("./gnome-builder.css");
 @import url("./cawbird.css");
+@import url("./fractal.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 * */
@@ -2057,6 +2058,8 @@
 @define-color theme_base_color #C6C6C6;
 @define-color theme_fg_dark_color #dddddd;
 @define-color theme_bg_dark_color #3D3D3D;
+@define-color theme_lightened_bg_color #e0e0e0;
+@define-color theme_input_bg_color #F0F0F0;
 @define-color wm_title #dddddd;
 @define-color wm_unfocused_title #dddddd;
 @define-color wm_highlight shade(#3D3D3D, 1.03);
@@ -2184,6 +2187,8 @@
 
 #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; }
+
 list-row.sidebar-item { background-color: #b9b9b9; border-color: #7a7a7a; }
 
 list-row.sidebar-item:backdrop, list-row.sidebar-item:backdrop:hover { background-color: #b9b9b9; border-color: #818181; }
@@ -2276,9 +2281,9 @@
 
 button.suggested-action:backdrop, button.suggested-action.flat:backdrop { color: #dfe5d8; border-color: #5E7F3E; background-image: image(#5E7F3E); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); border-color: #2b3a1d; }
 
-button.suggested-action:backdrop:active, button.suggested-action:backdrop:checked, button.suggested-action.flat:backdrop:active, button.suggested-action.flat:backdrop:checked { color: #83877e; border-color: #5a7043; background-image: image(#5a7043); box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
-
-button.suggested-action:backdrop:disabled, button.suggested-action:backdrop:disabled label, button.suggested-action.flat:backdrop:disabled, button.suggested-action.flat:backdrop:disabled label { color: #8d8d8d; background-color: #3D3D3D; background-image: none; border-color: #303030; box-shadow: none; }
+button.suggested-action:backdrop:active, button.suggested-action:backdrop:checked, button.suggested-action.flat:backdrop:active, button.suggested-action.flat:backdrop:checked { color: #6a6e65; border-color: #5a7043; background-image: image(#5a7043); box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+
+button.suggested-action:backdrop:disabled, button.suggested-action:backdrop:disabled label, button.suggested-action.flat:backdrop:disabled, button.suggested-action.flat:backdrop:disabled label { color: #6e6e6e; background-color: #C6C6C6; background-image: none; box-shadow: none; }
 
 button.suggested-action:backdrop:disabled:active, button.suggested-action:backdrop:disabled:checked, button.suggested-action:backdrop:disabled label:active, button.suggested-action:backdrop:disabled label:checked, button.suggested-action.flat:backdrop:disabled:active, button.suggested-action.flat:backdrop:disabled:checked, button.suggested-action.flat:backdrop:disabled label:active, button.suggested-action.flat:backdrop:disabled label:checked { color: #93a285; border-color: #5a7043; background-image: image(#5a7043); box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
@@ -2289,3 +2294,27 @@
 infobar.action:hover > revealer > box { background-color: #d9d7da; }
 
 infobar .info > revealer > box, infobar .info:backdrop > revealer > box, infobar.question > revealer > box, infobar.question:backdrop > revealer > box, infobar.warning > revealer > box, infobar.warning:backdrop > revealer > box, infobar.error > revealer > box, infobar.error:backdrop > revealer > box { background-color: #d4d2d5; }
+
+headerbar *:link { color: #91b76c; }
+
+headerbar *:link:visited { color: #77a14f; }
+
+*:selected headerbar *:link:visited { color: #7da15a; }
+
+headerbar *:link:hover { color: #abc88e; }
+
+*:selected headerbar *:link:hover { color: #8cb267; }
+
+headerbar *:link:active { color: #91b76c; }
+
+*:selected headerbar *:link:active { color: #87ac63; }
+
+headerbar *:link:backdrop, headerbar *:link:backdrop:hover, headerbar *:link:backdrop:hover:selected { color: #91b76c; }
+
+headerbar *:link:selected, *:selected headerbar *:link { color: #dfe5d8; }
+
+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 d007f45f5171 -r 87e188db01a5 gtk-3.24/gtk.scss
--- a/gtk-3.24/gtk.scss	Sun Mar 27 15:16:09 2022 +0100
+++ b/gtk-3.24/gtk.scss	Sat Apr 16 19:44:18 2022 +0100
@@ -39,6 +39,7 @@
 $dark_fill: mix($borders_color, $bg_color, 35%);
 $link_color: darken($selected_bg_color,10%);
 $link_visited_color: darken($selected_bg_color,20%);
+$header_link_color: lighten($selected_bg_color, 20%);
 $top_hilight: $borders_edge;
 $popover_bg_color: $bg_color;
 $popover_hover_color: lighten($bg_color, 5%);
@@ -119,6 +120,8 @@
 @define-color theme_base_color #{"" + $base_color};
 @define-color theme_fg_dark_color #{"" + $fg_dark_color};
 @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 wm_title #{"" + $fg_dark_color};
 @define-color wm_unfocused_title #{"" + $fg_dark_color};
 @define-color wm_highlight shade(#{"" + $bg_dark_color}, 1.03);
@@ -495,6 +498,14 @@
 #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;
+    }
+  }
+}
 list-row {
   // Set sidebar items back to something reasonable
   &.sidebar-item {
@@ -699,13 +710,12 @@
       border-color: $selected_bg_border;
 
       &:active,
-      &:checked { @include button(backdrop-active, $selected_bg_color, $insensitive_dark_fg_color); }
+      &:checked { @include button(backdrop-active, $selected_bg_color, $insensitive_fg_color); }
 
       &:disabled, &:disabled label {
-        color: $insensitive_dark_fg_color;
-        background-color: $bg_dark_color;
+        color: $insensitive_fg_color;
+        background-color: $bg_color;
         background-image: none;
-        border-color: $header_button_border;
         box-shadow: none;
 
         &:active,
@@ -747,6 +757,40 @@
   }
 }
 
+headerbar *:link {
+  color: $header_link_color;
+  &:visited {
+    color: darken($header_link_color, 10%);
+    *:selected & { color: mix($header_link_color, $selected_bg_color, 60%); }
+  }
+  &:hover {
+    color: lighten($header_link_color,10%);
+    *:selected & { color: mix($header_link_color, $selected_bg_color, 90%); }
+  }
+  &:active {
+    color: $header_link_color;
+    *:selected & { color: mix($header_link_color, $selected_bg_color, 80%); }
+  }
+  &:backdrop, &:backdrop:hover, &:backdrop:hover:selected {
+    color: $header_link_color;
+  }
+  &:selected, *:selected & {
+    color: mix($selected_fg_color, $selected_bg_color, 80%);
+  }
+}
+
+separator.sidebar {
+  background-image: linear-gradient(to bottom, $header_button_border, $header_button_border 46px, $borders_color 46px);
+
+  &:backdrop {
+    background-image: linear-gradient(to bottom, $header_button_border_unfocused, $header_button_border_unfocused 46px, $backdrop_borders_color 46px);
+  }
+}
+
+window {
+  border-top-left-radius: 9px;
+  border-top-right-radius: 9px;
+}
 
 
 // Import extra Nautilus CSS manually, because they only do this if
@@ -758,4 +802,7 @@
 @import url("./gnome-builder.css");
 
 // Customise Cawbird bar to be dark, because it's like a menu bar but isn't
-@import url("./cawbird.css");
\ No newline at end of file
+@import url("./cawbird.css");
+
+// Customise Fractal because it looks a bit odd in places
+@import url("./fractal.css");
\ No newline at end of file