1 files changed, 133 insertions, 0 deletions
diff --git a/desktop-themes/TraditionalOk/gtk-4.0/_headerbar.scss b/desktop-themes/TraditionalOk/gtk-4.0/_headerbar.scss
new file mode 100644
index 00000000..dd27bc9e
--- /dev/null
+++ b/desktop-themes/TraditionalOk/gtk-4.0/_headerbar.scss
@@ -0,0 +1,133 @@
+// Color variables dependant on $headerbar_bg_color defined in _colors.scss
+$_button_bg_color: lighten($headerbar_bg_color, 7.5%);
+$_button_border_color: darken($headerbar_bg_color, 9%);
+// deducted from the color used in common which is $backdrop_borders_color: mix($borders_color, $bg_color, 80%);
+$_backdrop_button_border_color: darken($inkstone, 9%);
+
+// overwriting the headerbar styling from common, for the inverted look in the ambiance theme
+
+%titlebar,
+headerbar {
+ @include headerbar_fill($headerbar_bg_color);
+
+ color: $headerbar_fg_color;
+ border-color: $borders_color;
+
+ .title,
+ label.title {
+ color: $headerbar_fg_color;
+ &:backdrop { color: $backdrop_headerbar_fg_color; }
+ }
+
+ &.backdrop {
+ }
+
+ .maximized &,
+ .fullscreen & {
+ box-shadow: none;
+ }
+
+ entry {
+ &,
+ &:backdrop {
+ border-color: darken($headerbar_bg_color, 8%);
+ }
+
+ &:focus { @include entry(focus); }
+ }
+
+
+
+
+
+ switch {
+ border-color: $_button_border_color;
+ color: $headerbar_fg_color;
+ background-color: $_button_bg_color;
+
+ &:checked {
+ color: $selected_fg_color;
+ border-color: $_button_border_color;
+ background-color: $checkradio_bg_color;
+ }
+
+ &:disabled {
+ color: $insensitive_fg_color;
+ background-color: $headerbar_bg_color;
+ border-color: $_button_border_color;
+ }
+
+ &:backdrop {
+ color: $backdrop_fg_color;
+ border-color: $backdrop_borders_color;
+ background-color: lighten($backdrop_headerbar_bg_color, 2%);
+
+ &:checked {
+ color: $selected_fg_color;
+ border-color: $_button_border_color;
+ background-color: $checkradio_bg_color;
+ }
+
+ &:disabled {
+ color: $backdrop_insensitive_color;
+ background-color: $backdrop_headerbar_bg_color;
+ border-color: $_backdrop_button_border_color;
+ }
+ }
+ }
+
+ switch, scale {
+ &:checked {
+ border-color: $checkradio_borders_color;
+ }
+ slider {
+ @include button(normal, $_button_bg_color);
+ }
+
+ &:hover slider {
+ @include button(hover, $_button_bg_color);
+ }
+
+ &:checked > slider { border-color: $_button_border_color; }
+
+ &:disabled slider { @include button(insensitive, darken($headerbar_bg_color, 8%)); }
+
+ &:backdrop {
+ slider {
+ @include button(backdrop, $_button_bg_color);
+ }
+
+ &, &:checked, &:disabled, &:checked:disabled {
+ > slider { border-color: darken($_backdrop_button_border_color, 4%); box-shadow: none; }
+ }
+
+ &:checked > slider { border-color: $_button_border_color; }
+
+ &:disabled slider { @include button(backdrop-insensitive, $_button_bg_color); }
+ }
+ }
+
+ // TODO: Test separator
+ // TODO: Test switches
+}
+
+windowcontrols button image {
+ color: $headerbar_fg_color;
+}
+
+window.devel {
+ headerbar.titlebar {
+ $c: darken($bg_color, 10%);
+
+ $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
+ linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.9)),
+ linear-gradient(to top, lighten($c, 3%) 3px, lighten($c, 5%));
+
+ background: $bg_color $gradient;
+
+ &:backdrop {
+ background: $bg_color cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
+ image($bg_color); /* background-color would flash */
+ }
+ }
+}