From 7442bdc383436ca8252a01c02def0691e39f4959 Mon Sep 17 00:00:00 2001 From: Jakub Steiner Date: Thu, 10 Dec 2020 13:51:10 +0100 Subject: [PATCH 1/4] Adwaita: duplicate selector - awkward duplicate selector that should have no effect (resulting in the same css) --- gtk/theme/Adwaita/_common.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 2fb68a6f8e..b66b1001fb 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -496,9 +496,9 @@ button { &:hover { transition: $button_transition; transition-duration: 500ms; - - &:active { transition: $button_transition; } } + &:active { transition: $button_transition; } + &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); } } &:hover { @@ -532,9 +532,6 @@ button { } } - @at-root %button_basic_flat, - &.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }} - &:disabled { @include button(insensitive); From f83ee0be2308380ce34e463eeb9b78736f1e2b91 Mon Sep 17 00:00:00 2001 From: Jakub Steiner Date: Thu, 10 Dec 2020 13:58:42 +0100 Subject: [PATCH 2/4] Adwaita: headerbar_color > headerbar_bg_color - semantic correction --- gtk/theme/Adwaita/_colors.scss | 2 +- gtk/theme/Adwaita/_common.scss | 2 +- gtk/theme/Adwaita/_drawing.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss index bf183a7866..958162c6f2 100644 --- a/gtk/theme/Adwaita/_colors.scss +++ b/gtk/theme/Adwaita/_colors.scss @@ -16,7 +16,7 @@ $link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($s $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%)); $top_hilight: $borders_edge; $dark_fill: mix($borders_color, $bg_color, 50%); -$headerbar_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%)); +$headerbar_bg_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%)); $menu_color: $base_color; $menu_selected_color: if($variant == 'light', darken($bg_color, 6%), darken($bg_color, 8%)); diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index b66b1001fb..7694920d83 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -4059,7 +4059,7 @@ window { padding: 0; border: solid 1px $borders_color; border-radius: 0; - box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $top_hilight; + box-shadow: inset 0 0 0 3px $headerbar_bg_color, inset 0 1px $top_hilight; &:backdrop { box-shadow: inset 0 0 0 3px $backdrop_bg_color, inset 0 1px $top_hilight; } } diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss index 78984e4409..c80fcb5ec0 100644 --- a/gtk/theme/Adwaita/_drawing.scss +++ b/gtk/theme/Adwaita/_drawing.scss @@ -415,7 +415,7 @@ } } -@mixin headerbar_fill($c:$headerbar_color, $hc:$top_hilight, $ov: none) { +@mixin headerbar_fill($c:$headerbar_bg_color, $hc:$top_hilight, $ov: none) { // // headerbar fill // From 6a33bed353cdcbd586654f2678b627909abc3d99 Mon Sep 17 00:00:00 2001 From: Jakub Steiner Date: Thu, 10 Dec 2020 14:16:25 +0100 Subject: [PATCH 3/4] Adwaita: flat button :hover and :active - special case undecorated button hovers --- gtk/theme/Adwaita/_common.scss | 38 ++++++++++++++++++--------------- gtk/theme/Adwaita/_drawing.scss | 24 +++++++++++++++++++++ 2 files changed, 45 insertions(+), 17 deletions(-) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 7694920d83..1d2f8b6396 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -484,23 +484,6 @@ button { @include focus-ring(); - @at-root %button_basic_flat, - &.flat { - @include button(undecorated); - // to avoid adjacent buttons borders clashing when transitioning, the transition on the normal state is set - // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but - // it won't fade out when the pointer leave the button allocation area. To make the transition more evident - // in this case the duration is increased. - transition: none; - - &:hover { - transition: $button_transition; - transition-duration: 500ms; - } - &:active { transition: $button_transition; } - &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); } - } - &:hover { @include button(hover); -gtk-icon-filter: brightness(1.2); @@ -539,6 +522,27 @@ button { &:checked { @include button(insensitive-active); } } + @at-root %button_basic_flat, + &.flat { + @include button(undecorated); + // to avoid adjacent buttons borders clashing when transitioning, the transition on the normal state is set + // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but + // it won't fade out when the pointer leave the button allocation area. To make the transition more evident + // in this case the duration is increased. + transition: none; + + &:hover { + @include button(undecorated-hover); + transition: $button_transition; + transition-duration: 500ms; + } + &:active { + @include button(undecorated-active); + transition: $button_transition; + } + &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); } + } + &.image-button { min-width: 24px; padding-left: 5px; diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss index c80fcb5ec0..dd45692767 100644 --- a/gtk/theme/Adwaita/_drawing.scss +++ b/gtk/theme/Adwaita/_drawing.scss @@ -413,6 +413,30 @@ text-shadow: none; -gtk-icon-shadow: none; } + @else if $t==undecorated-hover { + border-color: transparent; + background-image: none; + box-shadow: none; + text-shadow: none; + @if $variant == 'light' { + background-color: darken($c,26%); + } + @else { + background-color: darken($c,10%); + } + } + @else if $t==undecorated-active { + border-color: transparent; + background-image: none; + box-shadow: none; + text-shadow: none; + @if $variant == 'light' { + background-color: darken($c,40%); + } + @else { + background-color: darken($c,14%); + } + } } @mixin headerbar_fill($c:$headerbar_bg_color, $hc:$top_hilight, $ov: none) { From f6f624162708fbd761b54e3ca37f94aac4ec0f3d Mon Sep 17 00:00:00 2001 From: Jakub Steiner Date: Thu, 10 Dec 2020 14:24:29 +0100 Subject: [PATCH 4/4] Adwaita: special case flat headerbar buttons - make sure the hovers and pushed states are legible on a tintend headerbar Fixes https://gitlab.gnome.org/GNOME/gtk/-/issues/3427 --- gtk/theme/Adwaita/_common.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 1d2f8b6396..845582650d 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -1389,11 +1389,17 @@ windowcontrols { @extend %button_basic_flat; + border-radius: 9999px; padding: 6px; margin: 0 2px; min-width: 0; min-height: 0; + &:hover { + //special case hover colors inside a headerbar + @include button(undecorated-hover,$c:$headerbar_bg_color); + } + &:active { @include button(undecorated-active,$c:$headerbar_bg_color); } } }