--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/gtk-4.4/gtk.scss	Sat Mar 26 20:03:44 2022 +0000
@@ -0,0 +1,669 @@
+// General guidelines:
+// - very unlikely you want to edit something else than _common.scss
+// - keep the number of defined colors to a minimum, use the color blending functions if
+//   you need a subtle shade
+// - if you need to inverse a color function use the @if directive to match for dark $variant
+
+
+
+// FIXME: Backdrop checkboxes in treeview go from white to black in backdrop
+// FIXME: Radio buttons in tree view go square when selected
+// FIXME: Header bar now has a bottom border (may not be necessary, but adjusts positioning fractionally)
+// FIXME: Strange lines appear in icon view on page 2 when clicking an icon
+
+// XXX: Header bar buttons are flatter now
+
+
+
+/// TODO:
+/// * Firefox GTK3 defaults to grey page background (".background" CSS rule)
+///    - 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
+///
+/// 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';
+$contrast: 'normal';
+
+// Import the colours
+@import 'colors-custom';
+
+// Import the default widgets
+@import 'drawing';
+// Style everything
+@import 'common';
+
+@import 'colors-public-custom';
+
+
+
+
+
+
+/**************************
+ *                        *
+ * Adwaita Dark Overrides *
+ *                        *
+ *   And now do our own   *
+ *  overrides of styling! *
+ *                        *
+ **************************/
+
+avatar { border-radius: 4px }
+
+
+*:disabled {
+  -gtk-icon-filter: opacity(0.5);
+}
+
+/***************
+ * Header bars *
+ ***************/
+%titlebar,
+headerbar {
+  color: $title_fg;
+  background-image: linear-gradient(to bottom, lighten($bg_dark_color, 3%) 0%, $bg_dark_color 45%);
+  border-color: shade($bg_dark_color, 0.90);
+  border-bottom-width: 0;
+  box-shadow: inset 0 2px $titlebar_highlight, inset 0 1px $header_button_border;
+  background-color: $bg_dark_color;
+
+  &:backdrop {
+    color: $fg_dark_color;
+    box-shadow: none;
+    background-color: $bg_dark_color;
+    background-image: none;
+    border-bottom-width: 0;
+    border-color: darken($bg_dark_color, 10%);
+  }
+
+  .title {
+    color: $title_fg;
+  }
+
+  .subtitle {
+  }
+
+  .tiled &,
+  .maximized & { &:backdrop, & { }}
+
+  &.default-decoration {
+    button.titlebutton {
+    }
+  }
+
+  label {
+    &, &:backdrop {
+      color: $fg_dark_color;
+    }
+  }
+
+  popover label {
+    &, &:backdrop {
+      color: $fg_color;
+    }
+  }
+}
+
+headerbar {
+  entry,
+  spinbutton,
+  separator,
+  button {
+  }
+  switch {
+  }
+}
+
+.background:not(.tiled):not(.maximized) .titlebar {
+  &:backdrop, & {
+  }
+}
+
+headerbar {
+  window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case
+  window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { }}
+
+  window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { }}
+}
+
+.titlebar:not(headerbar) {
+  window.csd > & {
+    // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
+    padding: 0;
+    background-color: transparent;
+    background-image: none;
+    border-style: none;
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  > separator { background-color: $borders_color; }
+
+  @extend %titlebar;
+}
+
+headerbar button {
+  &, &:backdrop {
+    &, &:checked {
+      &, & label, & label:backdrop {
+        color: $fg_dark_color;
+      }
+    }
+  }
+}
+headerbar popover modelbutton {
+  &, &.title, & label {
+    color: $fg_color;
+  }
+}
+%titlebar headerbar:not(.selection-mode),
+headerbar:not(.selection-mode) {
+  // FIXME: Tweak Tool header menu button not working
+  button, stackswitcher button {
+    color: $fg_dark_color;
+    background-image: linear-gradient(to bottom, $header_button_raised_gradient_color_a, $bg_dark_color);
+    text-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
+    -gtk-icon-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
+    border-color: $header_button_border;
+    outline-color: $header_button_raised_gradient_color_a;
+    box-shadow: inset 0 1px $header_button_raised_gradient_color_a, 0 1px $header_button_raised_gradient_color_a;
+
+    &.flat, &.titlebutton {
+      color: $fg_dark_color;
+      background-image: none;
+      background-color: transparent;
+      border-color: transparent;
+      box-shadow: none;
+      text-shadow: none;
+      -gtk-icon-shadow: none;
+
+      &:hover, &:active, &:backdrop, &:checked {
+        color: $title_fg;
+      }
+      &:backdrop {
+        border-color: transparent;
+      }
+    }
+
+    &:hover, &.titlebutton:hover {
+      color: shade($fg_dark_color, 1.3);
+      outline-color: $header_button_raised_gradient_color_a;
+      border-color: $header_button_border;
+      background-image: linear-gradient(to bottom, shade($header_button_raised_gradient_color_a, 1.1), shade($bg_dark_color, 1.1));
+      text-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
+      -gtk-icon-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
+      box-shadow: inset 0 1px $header_button_raised_gradient_color_a, 0 1px $header_button_raised_gradient_color_a;
+    }
+
+    &:active,
+    &:checked, &.titlebutton:active, &.titlebutton:active:backdrop, &.titlebutton:checked, &.titlebutton:checked:backdrop {
+      color: $title_fg;
+      outline-color: $header_button_raised_gradient_color_a;
+      border-color: $header_button_border;
+      background-image: linear-gradient(to bottom, $bg_dark_color, $header_button_checked);
+      text-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
+      -gtk-icon-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
+      box-shadow: inset 0 1px transparentize($header_button_raised_gradient_color_a, 0.7), 0 1px $header_button_raised_gradient_color_a;
+    }
+
+    &:backdrop {
+        color: $fg_dark_color;
+        background-image: none;
+        background-color: $bg_dark_color;
+        border-color: $header_button_border;
+        box-shadow:none;
+        text-shadow: none;
+        -gtk-icon-shadow: none;
+
+        transition: $backdrop_transition;
+        -gtk-icon-filter: none;
+
+        &:active,
+        &:checked { 
+          background-image: none;
+          background-color: $header_button_checked;
+          border-color: $header_button_border;
+        }
+
+        &:disabled, &.suggested-action:disabled {
+          color: $insensitive_dark_fg_color;
+          background-color: $bg_dark_color;
+          background-image: none;
+          border-color: $header_button_border;
+          box-shadow: none;
+          
+          &:active,
+          &:checked { }
+        }
+    }
+
+    &.flat { &:backdrop, &:disabled, &:backdrop:disabled { } }
+
+    &:disabled, &.suggested-action:disabled {
+      color: $insensitive_dark_fg_color;
+      background-color: $bg_dark_color;
+      background-image: none;
+      border-color: $header_button_border;
+      box-shadow: 0 1px $header_button_raised_gradient_color_a;
+    }
+
+    &:drop(active) {
+      color: $drop_target_color;
+      border-color: $drop_target_color;
+      box-shadow: inset 0 0 0 1px $drop_target_color;
+    }
+    &.suggested-action {
+      @include button(normal, $selected_bg_color, white);
+      &.flat {
+        @include button(undecorated);
+
+        color: $selected_bg_color; //FIXME: does it work on the dark variant?
+      }
+
+      &:hover { @include button(hover, $selected_bg_color, white); }
+
+      &:active,
+      &:checked { @include button(active, $selected_bg_color, white); }
+
+      &:backdrop,
+      &.flat:backdrop {
+        @include button(backdrop, $selected_bg_color, white);
+        border-color: $selected_bg_border;
+
+        &:active,
+        &:checked { @include button(backdrop-active, $selected_bg_color, $insensitive_dark_fg_color); }
+
+        &:disabled, &:disabled label {
+          color: $insensitive_dark_fg_color;
+          background-color: $bg_dark_color;
+          background-image: none;
+          border-color: $header_button_border;
+          box-shadow: none;
+
+          &:active,
+          &:checked { @include button(backdrop-insensitive-active, $selected_bg_color, white); }
+        }
+      }
+
+      &.flat {
+        &:backdrop, &:disabled, &:backdrop:disabled {
+          @include button(undecorated);
+
+          color: transparentize($selected_bg_color, 0.2);
+        }
+      }
+    }
+//    &.suggested-action:backdrop {
+//      @include button(normal, $selected_bg_color, white);
+//    }
+//    
+//    &.suggested-action label { color: $selected_fg_color; }
+  }
+}
+
+column-header button, column-header headerbar button.titlebutton, headerbar column-header button.titlebutton,
+column-header .titlebar button.titlebutton,
+.titlebar column-header button.titlebutton {
+  color: $fg_color;
+  background-color: $bg_gradient_2;}
+  column-header button:hover, column-header headerbar button.titlebutton:hover, headerbar column-header button.titlebutton:hover,
+  column-header .titlebar button.titlebutton:hover,
+  .titlebar column-header button.titlebutton:hover {
+    color: $fg_color_emphasis; }
+
+%entry,
+entry {
+  background-color: $text_input_color;
+  &:disabled { background-color: $insensitive_bg_color; }
+  &:backdrop { background-color: $backdrop_text_input_color; }
+  &:backdrop:disabled { background-color: $insensitive_bg_color; }
+}
+spinbutton:not(.vertical) button:hover {
+  background-color: transparentize($bg_color,0.6);
+  border-top-color: transparent;
+  border-top-style: solid;
+  border-top-width:1px;
+  border-bottom-color: transparent;
+  border-bottom-style: solid;
+  border-bottom-width:1px;
+  background-clip: padding-box;
+}
+
+.view, .view text, iconview, iconview text, textview, textview text  {
+  color: $text_color;
+  background-color: $text_input_color;
+  &:backdrop, &:backdrop:hover {
+    color: $backdrop_text_color;
+    background-color: $backdrop_text_input_color;
+  }
+  &:selected {
+    color: $selected_fg_color;
+    background-color: $selected_bg_color;
+  }
+  //&:hover {
+  //  background-color: mix($fg_color, $text_input_color, 5%);
+  //}
+  &:active {
+    box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
+  }
+  &:selected {
+    &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
+    &:hover {
+      background-color: mix($fg_color, $selected_bg_color, 10%);
+    }
+    &:backdrop { background-color: $selected_bg_color; }
+  }
+}
+
+list, list-row, list-row.button  {
+  background-color: darken($text_input_color, 6%);
+  &:backdrop, &:backdrop:hover {
+    color: $backdrop_text_color;
+    background-color: darken($backdrop_text_input_color, 6%);
+  }
+  &:selected {
+    color: $selected_fg_color;
+    background-color: $selected_bg_color;
+  }
+  &:hover {
+    background-color: mix($fg_color, darken($text_input_color, 6%), 5%);
+  }
+  &:active {
+    box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
+  }
+  &:selected {
+    &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
+    &:hover {
+      background-color: mix($fg_color, $selected_bg_color, 10%);
+    }
+    &:backdrop { background-color: $selected_bg_color; }
+  }
+}
+
+.sidebar list {
+  background: transparent;
+}
+
+// The path bar box in Open dialogs is classed as a view, but we don't
+// want it that light
+#pathbarbox {
+  background-color: $bg_color;
+}
+list-row {
+  // Set sidebar items back to something reasonable
+  &.sidebar-item {
+    background-color: $sidebar_bg_color;
+    border-color: $borders_color;
+    &:backdrop, &:backdrop:hover {
+      background-color: $backdrop_sidebar_bg_color;
+      border-color: $backdrop_borders_color;
+    }
+    // let's take care of background colors
+    &:hover {
+      background-color: mix($fg_color, $base_color, 5%);
+    }
+    &:active {
+      box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
+    }
+    &:selected {
+      background-color: $selected_bg_color;
+      &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
+      &:hover {
+        background-color: mix($fg_color, $selected_bg_color, 10%);
+      }
+      &:backdrop { background-color: $selected_bg_color; }
+    }
+  }
+}
+
+/* Fudge the Nautilus icon view background colour in the only way that seems to work */
+.nautilus-window notebook > stack > box > grid { background-color: $text_input_color; }
+
+/* And make the Nautilus places bar a bit darker, as it used to be */
+placessidebar list {
+    background-color: $sidebar_bg_color;
+    border-color: $borders_color;
+    &:backdrop {
+      background-color: $backdrop_sidebar_bg_color;
+      border-color: $backdrop_borders_color;
+    }
+}
+
+// Fix the rubberband background after we gave lists and views a lighter background
+.view.rubberband {
+  background-color: transparentize($selected_bg_color,0.8);
+}
+menubar {
+  background-color: $bg_dark_color;
+  color: $menu_fg_dark_color;
+  box-shadow: inset 0 -1px transparentize(black, 0.9);
+  &:backdrop { 
+    background-color: $bg_dark_color;
+    color: $menu_fg_dark_color;
+  }
+}
+
+// Make all menus dark - we mainly want the menu bar menus dark, but
+// Firefox and other non-standard apps use those colours for their
+// context menus as well, so be consistent.
+menubar popover.menu.background > contents {
+  border-top-width: 0;
+  border-radius: 0 0 9px 9px;
+  background-color: $bg_dark_color;
+  color: $menu_fg_dark_color;
+  border-color: $header_button_border;
+
+  & modelbutton.flat:selected, & modelbutton.flat:hover {
+    background-color: $selected_bg_color;
+    color: $selected_fg_color;
+  }
+  & check, & radio {
+    color: $menu_fg_dark_color;
+    &:hover {
+      color: $selected_fg_color;      
+    }
+  }
+}
+// Except combo box backgrounds. We want those to be grey, like the
+// combobox itself
+popover.menu, #gtk-combobox-popup-menu {
+  color: $fg_color;
+}
+// Top-level menu text needs to be tweaked to match dark menus
+menubar {
+  & > item {
+    &, & > label {
+      &:hover { //Seems like it :hover even with keyboard focus
+        color: $selected_bg_color
+      }
+      &:backdrop {
+        color: $menu_fg_dark_color;
+      }
+      & menuitem.check, & menuitem.radio {
+        color: $fg_dark_color;
+      }
+    }
+  }
+}
+
+.floating-bar {
+  opacity: 0.9;
+  color: $text_color;
+  background-color: $text_input_color;
+  border: 1px solid $borders_color;
+
+  @each $tb,$tb_corner in ('top','bottom'),
+                          ('bottom','top') {
+    @each $lr,$lr_corner in ('left','right'),
+                 ('right','left') {
+      &.#{$tb}.#{$lr} {
+        border-#{$tb_corner}-#{$lr_corner}-radius: 3px;
+        border-#{$tb}-width: 0;
+        border-#{$lr}-width: 0;
+      }
+    }
+  }
+}
+
+treeview.view header button { 
+  &, &:hover, &:active, &:disabled {
+    &, &:backdrop {
+      border-color: lighten($borders_color, 20%);
+    }
+  }
+}
+
+treeview.view header button:last-child {
+  &:hover {
+    border-right-width: 0;
+  }
+}
+
+// Lighten selected tabs a bit to match other UI
+notebook {
+  > header {
+    tab {
+      &:checked {
+        &.reorderable-page {
+          border-color: $borders_color;
+          background-color: $bg_color;
+          &:hover { background-color: lighten($bg_color, 5%); }
+        }
+      }
+
+      &:backdrop:checked {
+        &.reorderable-page {
+          background-color: $backdrop_bg_color;
+        }
+      }
+    }
+  }
+}
+
+// Stop the disabled spin button being dark grey
+spinbutton:not(.vertical) button:backdrop:disabled { background: transparent none; }
+
+// Fix the category icons in the Emoji input box
+.emoji-section label {
+  font-family: "Symbola";
+  font-weight: bold;
+  font-size: 125%
+}
+
+
+// GTK 3.24 updates
+headerbar frame > border, headerbar .frame,
+headerbar frame > border:backdrop, headerbar .frame:backdrop
+{ border-color: $header_button_border; }
+
+// Later GTK 3.24 updates
+check, radio {
+  & {
+    // for unchecked
+    $_c: if($variant=='light', lighten($bg_color, 5%), $bg_color);
+
+    @each $state, $t in ("", "normal"),
+                        (":hover", "hover"),
+                        (":active", "active"),
+                        (":disabled", "insensitive") {
+      &#{$state} {
+        @include check($t, $_c);
+      }
+    }
+  }
+
+  & {
+    // for checked
+    @each $t in (':checked'), (':indeterminate') {
+      &#{$t} {
+        @each $state, $t in ("", "normal"),
+                            (":hover", "hover"),
+                            (":active", "active"),
+                            (":disabled", "insensitive") {
+          &#{$state} {
+            @include check($t, $checkradio_bg_color, $checkradio_fg_color, $checked: true);
+          }
+        }
+      }
+    }
+  }
+}
+
+button {
+  &.suggested-action {
+    @include button(normal, $selected_bg_color, white);
+    &.flat {
+      @include button(undecorated);
+
+      color: $selected_bg_color; //XXX: does it work on the dark variant?
+    }
+
+    &:hover { @include button(hover, $selected_bg_color, white); }
+
+    &:active,
+    &:checked { @include button(active, $selected_bg_color, white); }
+
+    &:backdrop,
+    &.flat:backdrop {
+      @include button(backdrop, $selected_bg_color, white);
+      border-color: $selected_bg_border;
+
+      &:active,
+      &:checked { @include button(backdrop-active, $selected_bg_color, $insensitive_dark_fg_color); }
+
+      &:disabled, &:disabled label {
+        color: $insensitive_dark_fg_color;
+        background-color: $bg_dark_color;
+        background-image: none;
+        border-color: $header_button_border;
+        box-shadow: none;
+
+        &:active,
+        &:checked { @include button(backdrop-insensitive-active, $selected_bg_color, white); }
+      }
+    }
+
+    &.flat {
+      &:backdrop, &:disabled, &:backdrop:disabled {
+        @include button(undecorated);
+
+        color: transparentize($selected_bg_color, 0.2);
+      }
+    }
+  }
+}
+
+popover.background {
+  .csd & {
+    $_popover_border: if($variant=='light', transparentize(black, 0.6), transparentize(black, 0.25));
+
+    border-color: $_popover_border;
+  }
+}
+
+infobar {
+  &.action:hover > revealer > box {
+      background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 22%), 30%),
+                        desaturate(darken(invert($selected_bg_color), 42%), 70%));
+  }
+  .info,
+  &.question,
+  &.warning,
+  &.error {
+    > revealer > box {      
+      background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 20%), 30%),
+                        desaturate(darken(invert($selected_bg_color), 40%), 70%));
+    }
+  }
+}
\ No newline at end of file