From 73bd2518a4e818c63964a2796b7b04f413939f4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Tue, 5 Oct 2021 23:59:15 +0200 Subject: [PATCH] GTK4: new titlebuttons design --- src/themes/Kali/sass/gtk4/_common-tweaks.scss | 59 ++++++++- .../Kali/sass/gtk4/upstream/_common.scss | 113 ++++++++---------- .../Kali/sass/gtk4/upstream/_drawing.scss | 3 + .../sass/gtk4/upstream/_drawing.scss.patch | 4 +- src/themes/Kali/sass/gtk4/upstream/sync.sh | 2 +- 5 files changed, 116 insertions(+), 65 deletions(-) diff --git a/src/themes/Kali/sass/gtk4/_common-tweaks.scss b/src/themes/Kali/sass/gtk4/_common-tweaks.scss index b6c5ff1f..9c486ee0 100644 --- a/src/themes/Kali/sass/gtk4/_common-tweaks.scss +++ b/src/themes/Kali/sass/gtk4/_common-tweaks.scss @@ -179,6 +179,63 @@ scale slider { } } +/***************** + * Title buttons * + *****************/ +windowcontrols { + margin: 0 5px; + + &.end { margin-left: 11px; } + &.right { margin-right: 11px; } + + button { + $_titlebutton_bg: lighten($bg_color, 10%); + color: transparent; + background: $_titlebutton_bg; + margin: 0; + padding: 0; + min-width: 0; + min-height: 0; + border: 1px solid $alt_borders_color; + box-shadow: $_widget_inset_shadow; + -gtk-icon-shadow: none; + transition: all .2s; + + @at-root %titlebutton_hover, + &:hover { + color: $fg_color; + background: $_titlebutton_bg; + border-color: transparent; + box-shadow: 0 0 0 1px $shadow_color; + } + + &.close { + color: if($variant=='light', white, black); + background: $selected_bg_color; + border-color: transparent; + + &:hover { + color: if($variant=='light', black, white); + background: mix(white, $selected_bg_color, 10%); + } + + @if lightness($selected_bg_color) > 60% + or lightness($selected_bg_color) < 20% { + &, &:hover { color: $selected_fg_color; } + } + } + + &:backdrop, + &:backdrop:hover { + color: transparent; + background: transparent; + box-shadow: none; + border-color: $backdrop_borders_color; + background: $shadow_color; + } + } +} + /*************** * Header bars * ***************/ @@ -375,5 +432,3 @@ window { tooltip.csd { border: 0; } -windowcontrols button { padding: $_hb_btn_pad; } - diff --git a/src/themes/Kali/sass/gtk4/upstream/_common.scss b/src/themes/Kali/sass/gtk4/upstream/_common.scss index 0d4908fc..4ce7cffd 100644 --- a/src/themes/Kali/sass/gtk4/upstream/_common.scss +++ b/src/themes/Kali/sass/gtk4/upstream/_common.scss @@ -38,19 +38,9 @@ dnd { -gtk-icon-size: 32px; } -/* - These wildcard seems unavoidable, need to investigate. - Wildcards are bad and troublesome, use them with care, - or better, just don't. - Every time a wildcard is used a kitten dies, painfully. -*/ - -spinner:disabled, -arrow:disabled, -scrollbar:disabled, -check:disabled, -radio:disabled, -treeview.expander:disabled { -gtk-icon-filter: opacity(0.5); } +image:disabled { + -gtk-icon-filter: opacity(0.5); +} .view, %view { @@ -492,6 +482,7 @@ button { -gtk-icon-filter: brightness(1.2); } + &.keyboard-activating, &:active, &:checked { @include button(active); @@ -507,7 +498,8 @@ button { @include button(backdrop); transition: $backdrop_transition; - -gtk-icon-filter: none; + + &:not(:disabled) { -gtk-icon-filter: none; } &:active, &:checked { @include button(backdrop-active); } @@ -523,6 +515,7 @@ button { &:disabled { @include button(insensitive); + -gtk-icon-filter: opacity(0.5); &:active, &:checked { @include button(insensitive-active); } @@ -542,6 +535,7 @@ button { transition: $button_transition; transition-duration: 500ms; } + &.keyboard-activating, &:active, &:checked { @include button(undecorated-active); @@ -933,6 +927,14 @@ list > row button.image-button:not(.flat) { &:hover { @include button(hover); } &:active, &:checked { @include button(active); } + + @each $b_type, $b_color in (suggested-action, $selected_bg_color), + (destructive-action, $destructive_color) { + &.#{$b_type} { // allow colored buttons in lists #3643 + @include button(normal, $b_color, white); + @include focus-ring($fc: $alt_focus_border_color); + } + } } /********* @@ -1429,7 +1431,6 @@ headerbar { border-color: $backdrop_borders_color; background-color: $bg_color; background-image: none; - box-shadow: inset 0 1px $top_hilight; transition: $backdrop_transition; } @@ -1537,16 +1538,6 @@ headerbar { margin-top: 10px; margin-bottom: 10px; } - - &.titlebar headerbar:not(.titlebar) { - // Drop the background of non-titlebar nested headerbars. This is needed to - // work around headerbar sliding animation issues without refactoring - // Adwaita's support of titlebars and headerbars as it may break - // applications. - // See https://gitlab.gnome.org/GNOME/gtk/issues/1264 for more information. - background: none; - box-shadow: none; - } } @@ -1558,7 +1549,6 @@ headerbar { background-image: none; border-style: none; border-color: transparent; - box-shadow: none; } separator { background-color: $borders_color; } // FIXME: use darker border? @@ -1825,7 +1815,7 @@ popover.background { > arrow, > contents { - $_popover_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1)); + $_popover_border: if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25)); background-color: $menu_color; background-clip: padding-box; @@ -2270,11 +2260,15 @@ notebook { /************** * Scrollbars * **************/ + scrollbar { $_slider_min_length: 40px; + $_slider_width: 8px; + $_scrollbar_transition: all 300ms $ease-out-quad; + $_fine-tune_slider_border: $_slider_width - 3; //#3672 background-color: $scrollbar_bg_color; - transition: 300ms $ease-out-quad; + transition: $_scrollbar_transition; // scrollbar border &.top { border-bottom: 1px solid $borders_color; } @@ -2283,13 +2277,14 @@ scrollbar { &.right { border-left: 1px solid $borders_color; } > range > trough > slider { - min-width: 10px; - min-height: 10px; + min-width: $_slider_width; + min-height: $_slider_width; margin: -1px; border: 4px solid transparent; border-radius: 10px; background-clip: padding-box; background-color: $scrollbar_slider_color; + transition: $_scrollbar_transition; &:hover { background-color: $scrollbar_slider_hover_color; } @@ -2300,12 +2295,13 @@ scrollbar { > range.fine-tune { > trough > slider { - min-width: 6px; - min-height: 6px; + transition: none; + min-width: $_fine-tune_slider_border+1; + min-height: $_fine-tune_slider_border+1; } - &.horizontal > trough > slider { border-width: 6px 4px; } - &.vertical > trough > slider { border-width: 4px 6px; } + &.horizontal > trough > slider { border-width: $_fine-tune_slider_border 4px; } + &.vertical > trough > slider { border-width: 4px $_fine-tune_slider_border; } } &.overlay-indicator { @@ -3587,6 +3583,7 @@ stacksidebar { } row { padding: 10px 4px; + @include focus-ring(); > label { padding-left: 6px; @@ -3605,11 +3602,6 @@ stacksidebar { &:selected:hover:dir(ltr), &:selected:hover:dir(rtl) { background-color: darken($menu_selected_color,5%); } - &:focus:focus-visible { - outline-width: 0; - background-color: $selected_bg_color; - color: $selected_fg_color; - } &.activatable:active, &.activatable:selected:active { box-shadow: none; // #3413 } @@ -3637,9 +3629,8 @@ separator.sidebar { padding: 0 8px; border-radius: $menu-margin; margin: 0 $menu-margin 2px; - - &:hover, - &:focus-visible:focus-within { + @include focus-ring($focus-state: 'focus-visible:focus-within'); + &:hover { background-color: darken($menu_selected_color, 5%); } @@ -3651,12 +3642,6 @@ separator.sidebar { background-color: darken($menu_selected_color,5%); } - &:focus-visible:focus-within { - outline-width: 0; - color: $selected_fg_color; - background-color: $selected_bg_color; - &:hover { background-color: darken($selected_bg_color,10%); } - } } &:disabled { color: $insensitive_fg_color; } @@ -4052,8 +4037,8 @@ window { // this needs to be transparent // see bug #722563 - $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1)); - $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1)); + $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25)); + $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize(black, 0.25)); &.csd { box-shadow: 0 3px 9px 1px transparentize(black, 0.5), @@ -4082,25 +4067,33 @@ window { box-shadow: 0 1px 2px transparentize(black, 0.8), 0 0 0 1px transparentize($_wm_border, 0.1); } + } - &.solid-csd { - margin: 0; - padding: 0; - border: solid 1px $borders_color; - border-radius: 0; - box-shadow: inset 0 0 0 3px $headerbar_bg_color, inset 0 1px $top_hilight; + &.solid-csd { + margin: 0; + padding: 4px; + border: solid 1px $borders_color; + border-radius: 0; + box-shadow: inset 0 0 0 4px $borders_color, 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; } - } + &:backdrop { box-shadow: inset 0 0 0 4px $borders_color, inset 0 0 0 3px $backdrop_bg_color, inset 0 1px $top_hilight; } } &.maximized, - &.fullscreen, + &.fullscreen { border-radius: 0; box-shadow: none; } + &.tiled, &.tiled-top, &.tiled-left, &.tiled-right, - &.tiled-bottom { border-radius: 0; } + &.tiled-bottom { + border-radius: 0; + box-shadow: 0 0 0 1px $_wm_border_backdrop, + 0 0 0 20px transparent; //transparent control workaround -- #3670 + } + &:backdrop { box-shadow: 0 0 0 1px $_wm_border_backdrop, + 0 0 0 20px transparent; // #3670 + } &.popup { box-shadow: none; } diff --git a/src/themes/Kali/sass/gtk4/upstream/_drawing.scss b/src/themes/Kali/sass/gtk4/upstream/_drawing.scss index b9c8ca2a..d8bc88df 100644 --- a/src/themes/Kali/sass/gtk4/upstream/_drawing.scss +++ b/src/themes/Kali/sass/gtk4/upstream/_drawing.scss @@ -10,6 +10,9 @@ // If $within is true, use focus-within instead of focus:focus-visible // @mixin focus-ring($target: null, $width: 2px, $offset: -$width, $outer: false, $focus-state: 'focus:focus-visible', $fc: $focus_border_color) { + transition-property: outline, outline-width, outline-offset, outline-color; + transition-duration: 300ms; + animation-timing-function: ease-in-out; & #{$target} { outline: 0 solid transparent; outline-offset: if($outer, $offset + 4px, $offset + $width + 4px); diff --git a/src/themes/Kali/sass/gtk4/upstream/_drawing.scss.patch b/src/themes/Kali/sass/gtk4/upstream/_drawing.scss.patch index 69a0561f..3cf99140 100644 --- a/src/themes/Kali/sass/gtk4/upstream/_drawing.scss.patch +++ b/src/themes/Kali/sass/gtk4/upstream/_drawing.scss.patch @@ -1,10 +1,10 @@ -125c125,127 +128c128,130 < $_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03); --- > $_button_shadow: inset 0 1px transparentize(white, .95), > inset 0 -1px 0px transparentize(if($c != $bg_color, _border_color($c), $borders_color), .25), > 0 1px 2px transparentize($shadow_color, 0.03); -134,135c136 +137,138c139 < background-image: if($variant == 'light', linear-gradient(to top, darken($c, 2%) 2px, $c), < linear-gradient(to top, darken($c,1%) 2px, $c)); --- diff --git a/src/themes/Kali/sass/gtk4/upstream/sync.sh b/src/themes/Kali/sass/gtk4/upstream/sync.sh index f5007c0a..687356ee 100755 --- a/src/themes/Kali/sass/gtk4/upstream/sync.sh +++ b/src/themes/Kali/sass/gtk4/upstream/sync.sh @@ -4,7 +4,7 @@ GREEN='\033[0;32m' YELLOW='\033[0;33m' RESET='\033[0m' -VERSION=4.1.0 +VERSION=4.2.1 echo printf " $YELLOW[ i ]$RESET Upstream version $VERSION\n"