diff options
author | Mate <[email protected]> | 2021-06-07 15:29:16 +0200 |
---|---|---|
committer | raveit65 <[email protected]> | 2021-08-02 23:56:01 +0200 |
commit | 79875be62773375d984937452f9feab16f126e3c (patch) | |
tree | 1a7237e3b9ab1efd583667d8d14edcbe0e6b62d2 /desktop-themes/TraditionalOk/gtk-4.0/_headerbar.scss | |
parent | 14bd53a30f343c0e70da08f85dd9d5a26d3bc099 (diff) | |
download | mate-themes-79875be62773375d984937452f9feab16f126e3c.tar.bz2 mate-themes-79875be62773375d984937452f9feab16f126e3c.tar.xz |
Propose another Traditonal Ok implementation based on Yaru
Diffstat (limited to 'desktop-themes/TraditionalOk/gtk-4.0/_headerbar.scss')
-rw-r--r-- | desktop-themes/TraditionalOk/gtk-4.0/_headerbar.scss | 133 |
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 */ + } + } +} |