headerbar_buttons first try

6 files changed, 96 insertions, 0 deletions

diff --git a/desktop-themes/YaruGreen/gtk-3.0/_headerbar_buttons.scss b/desktop-themes/YaruGreen/gtk-3.0/_headerbar_buttons.scss
new file mode 100644
index 00000000..a613bbb0
--- /dev/null
+++ b/desktop-themes/YaruGreen/gtk-3.0/_headerbar_buttons.scss
@@ -0,0 +1,39 @@
+$headerbar_button_gradient_a: gtkshade(desaturate($core_color_a, 20%), 1.15);
+$headerbar_button_gradient_b: gtkshade(desaturate($core_color_a, 20%), 1.1);
+$headerbar_button_gradient_c: gtkshade(desaturate($core_color_a, 20%), 1.08);
+$headerbar_button_gradient_d: gtkshade(desaturate($core_color_a, 20%), 1.02);
+
+$headerbar_button_hover_gradient_a: gtkshade(desaturate($core_color_a, 40%), 1.25);
+$headerbar_button_hover_gradient_b: gtkshade(desaturate($core_color_a, 40%), 1.2);
+$headerbar_button_hover_gradient_c: gtkshade(desaturate($core_color_a, 40%), 1.19);
+$headerbar_button_hover_gradient_d: gtkshade(desaturate($core_color_a, 40%), 1.12);
+
+$headerbar_button_backdrop_gradient_a: gtkshade(desaturate($core_color_a, 100%), 1.25);
+$headerbar_button_backdrop_gradient_b: gtkshade(desaturate($core_color_a, 100%), 1.2);
+$headerbar_button_backdrop_gradient_c: gtkshade(desaturate($core_color_a, 100%), 1.18);
+$headerbar_button_backdrop_gradient_d: gtkshade(desaturate($core_color_a, 100%), 1.12);
+
+$headerbar_button_backdrop_hover_gradient_a: gtkshade(desaturate($core_color_a, 100%), 1.3);
+$headerbar_button_backdrop_hover_gradient_b: gtkshade(desaturate($core_color_a, 100%), 1.25);
+$headerbar_button_backdrop_hover_gradient_c: gtkshade(desaturate($core_color_a, 100%), 1.23);
+$headerbar_button_backdrop_hover_gradient_d: gtkshade(desaturate($core_color_a, 100%), 1.17);
+
+
+headerbar {
+    button {
+        background-image: linear-gradient(to bottom, $headerbar_button_gradient_a, $headerbar_button_gradient_b 50%, $headerbar_button_gradient_c 50%, $headerbar_button_gradient_d);
+        border-color: gtkshade(#707662, 0.6);
+        &:hover {
+            background-image: linear-gradient(to bottom, $headerbar_button_hover_gradient_a, $headerbar_button_hover_gradient_b 50%, $headerbar_button_hover_gradient_c 50%, $headerbar_button_hover_gradient_d);
+            border-color: gtkshade(#707662, 0.6);
+        }
+        &:backdrop {
+            background-image: linear-gradient(to bottom, $headerbar_button_backdrop_gradient_a, $headerbar_button_backdrop_gradient_b 50%, $headerbar_button_backdrop_gradient_c 50%, $headerbar_button_backdrop_gradient_d);
+        }
+        &:backdrop:hover {
+            background-image: linear-gradient(to bottom, $headerbar_button_backdrop_hover_gradient_a, $headerbar_button_backdrop_hover_gradient_b 50%, $headerbar_button_backdrop_hover_gradient_c 50%, $headerbar_button_backdrop_hover_gradient_d);
+            border-color: gtkshade(desaturate(#707662, 100%), 0.7);
+        }
+    }
+}
+
diff --git a/desktop-themes/YaruGreen/gtk-3.0/gtk.css b/desktop-themes/YaruGreen/gtk-3.0/gtk.css
index 49834f86..1f971960 100644
--- a/desktop-themes/YaruGreen/gtk-3.0/gtk.css
+++ b/desktop-themes/YaruGreen/gtk-3.0/gtk.css
@@ -2630,6 +2630,14 @@ headerbar switch slider:disabled, headerbar scale slider:disabled, .titlebar swi
 
 .selection-mode headerbar .selection-menu:backdrop .arrow, .selection-mode headerbar .selection-menu .arrow, headerbar.selection-mode .selection-menu:backdrop .arrow, headerbar.selection-mode .selection-menu .arrow, .selection-mode .titlebar .selection-menu:backdrop .arrow, .selection-mode .titlebar .selection-menu .arrow, .titlebar.selection-mode .selection-menu:backdrop .arrow, .titlebar.selection-mode .selection-menu .arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); color: rgba(66, 69, 62, 0.5); -gtk-icon-shadow: none; }
 
+headerbar button { background-image: linear-gradient(to bottom, #efefef, #e4e4e4 50%, #e0e0e0 50%, #d4d4d4); border-color: #42443d; }
+
+headerbar button:hover { background-image: linear-gradient(to bottom, white, #f9f9f9 50%, #f7f7f7 50%, #e8e8e8); border-color: #42443d; }
+
+headerbar button:backdrop { background-image: linear-gradient(to bottom, white, #f9f9f9 50%, whitesmoke 50%, #e8e8e8); }
+
+headerbar button:backdrop:hover { background-image: linear-gradient(to bottom, white, white 50%, white 50%, #f3f3f3); border-color: #4c4c4c; }
+
 /* GTK NAMED COLORS ---------------- use responsibly! */
 /*
 widget text/foreground color */
diff --git a/desktop-themes/YaruGreen/gtk-3.0/gtk.scss b/desktop-themes/YaruGreen/gtk-3.0/gtk.scss
index 6a9e07fc..56bbc739 100644
--- a/desktop-themes/YaruGreen/gtk-3.0/gtk.scss
+++ b/desktop-themes/YaruGreen/gtk-3.0/gtk.scss
@@ -7,6 +7,7 @@ $ambiance: true;
 @import 'apps';
 @import 'tweaks';
 @import 'headerbar';
+@import 'headerbar_buttons';
 @import 'colors-public';
 @import 'libhandy/Adwaita-base';
 @import "libhandy/headerbar";
diff --git a/desktop-themes/YaruOk/gtk-3.0/_headerbar_buttons.scss b/desktop-themes/YaruOk/gtk-3.0/_headerbar_buttons.scss
new file mode 100644
index 00000000..e32a39c0
--- /dev/null
+++ b/desktop-themes/YaruOk/gtk-3.0/_headerbar_buttons.scss
@@ -0,0 +1,39 @@
+$headerbar_button_gradient_a: gtkshade(desaturate($core_color_a, 20%), 1.15);
+$headerbar_button_gradient_b: gtkshade(desaturate($core_color_a, 20%), 1.1);
+$headerbar_button_gradient_c: gtkshade(desaturate($core_color_a, 20%), 1.08);
+$headerbar_button_gradient_d: gtkshade(desaturate($core_color_a, 20%), 1.02);
+
+$headerbar_button_hover_gradient_a: gtkshade(desaturate($core_color_a, 40%), 1.25);
+$headerbar_button_hover_gradient_b: gtkshade(desaturate($core_color_a, 40%), 1.2);
+$headerbar_button_hover_gradient_c: gtkshade(desaturate($core_color_a, 40%), 1.19);
+$headerbar_button_hover_gradient_d: gtkshade(desaturate($core_color_a, 40%), 1.12);
+
+$headerbar_button_backdrop_gradient_a: gtkshade(desaturate($core_color_a, 100%), 1.25);
+$headerbar_button_backdrop_gradient_b: gtkshade(desaturate($core_color_a, 100%), 1.2);
+$headerbar_button_backdrop_gradient_c: gtkshade(desaturate($core_color_a, 100%), 1.18);
+$headerbar_button_backdrop_gradient_d: gtkshade(desaturate($core_color_a, 100%), 1.12);
+
+$headerbar_button_backdrop_hover_gradient_a: gtkshade(desaturate($core_color_a, 100%), 1.3);
+$headerbar_button_backdrop_hover_gradient_b: gtkshade(desaturate($core_color_a, 100%), 1.25);
+$headerbar_button_backdrop_hover_gradient_c: gtkshade(desaturate($core_color_a, 100%), 1.23);
+$headerbar_button_backdrop_hover_gradient_d: gtkshade(desaturate($core_color_a, 100%), 1.17);
+
+
+headerbar {
+    button {
+        background-image: linear-gradient(to bottom, $headerbar_button_gradient_a, $headerbar_button_gradient_b 50%, $headerbar_button_gradient_c 50%, $headerbar_button_gradient_d);
+        border-color: gtkshade(#a7bdd8, 0.6);
+        &:hover {
+            background-image: linear-gradient(to bottom, $headerbar_button_hover_gradient_a, $headerbar_button_hover_gradient_b 50%, $headerbar_button_hover_gradient_c 50%, $headerbar_button_hover_gradient_d);
+            border-color: gtkshade(#a7bdd8, 0.6);
+        }
+        &:backdrop {
+            background-image: linear-gradient(to bottom, $headerbar_button_backdrop_gradient_a, $headerbar_button_backdrop_gradient_b 50%, $headerbar_button_backdrop_gradient_c 50%, $headerbar_button_backdrop_gradient_d);
+        }
+        &:backdrop:hover {
+            background-image: linear-gradient(to bottom, $headerbar_button_backdrop_hover_gradient_a, $headerbar_button_backdrop_hover_gradient_b 50%, $headerbar_button_backdrop_hover_gradient_c 50%, $headerbar_button_backdrop_hover_gradient_d);
+            border-color: gtkshade(desaturate(#a7bdd8, 100%), 0.7);
+        }
+    }
+}
+
diff --git a/desktop-themes/YaruOk/gtk-3.0/gtk.css b/desktop-themes/YaruOk/gtk-3.0/gtk.css
index 8d35e41e..9cfb175f 100644
--- a/desktop-themes/YaruOk/gtk-3.0/gtk.css
+++ b/desktop-themes/YaruOk/gtk-3.0/gtk.css
@@ -2630,6 +2630,14 @@ headerbar switch slider:disabled, headerbar scale slider:disabled, .titlebar swi
 
 .selection-mode headerbar .selection-menu:backdrop .arrow, .selection-mode headerbar .selection-menu .arrow, headerbar.selection-mode .selection-menu:backdrop .arrow, headerbar.selection-mode .selection-menu .arrow, .selection-mode .titlebar .selection-menu:backdrop .arrow, .selection-mode .titlebar .selection-menu .arrow, .titlebar.selection-mode .selection-menu:backdrop .arrow, .titlebar.selection-mode .selection-menu .arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); color: rgba(255, 255, 255, 0.5); -gtk-icon-shadow: none; }
 
+headerbar button { background-image: linear-gradient(to bottom, #d7e2f0, #cad8ea 50%, #c4d4e7 50%, #b5c7df); border-color: #58708d; }
+
+headerbar button:hover { background-image: linear-gradient(to bottom, #f6f7f9, #e9edf2 50%, #e7ebf0 50%, #d6dde5); border-color: #58708d; }
+
+headerbar button:backdrop { background-image: linear-gradient(to bottom, #f8f8f8, #eeeeee 50%, #eaeaea 50%, #dedede); }
+
+headerbar button:backdrop:hover { background-image: linear-gradient(to bottom, white, #f8f8f8 50%, #f4f4f4 50%, #e8e8e8); border-color: #868686; }
+
 /* GTK NAMED COLORS ---------------- use responsibly! */
 /*
 widget text/foreground color */
diff --git a/desktop-themes/YaruOk/gtk-3.0/gtk.scss b/desktop-themes/YaruOk/gtk-3.0/gtk.scss
index 6a9e07fc..56bbc739 100644
--- a/desktop-themes/YaruOk/gtk-3.0/gtk.scss
+++ b/desktop-themes/YaruOk/gtk-3.0/gtk.scss
@@ -7,6 +7,7 @@ $ambiance: true;
 @import 'apps';
 @import 'tweaks';
 @import 'headerbar';
+@import 'headerbar_buttons';
 @import 'colors-public';
 @import 'libhandy/Adwaita-base';
 @import "libhandy/headerbar";