From ef29ababb315057f19a26fad574f40a10792f514 Mon Sep 17 00:00:00 2001 From: Vince Date: Tue, 21 Dec 2021 23:03:02 +0800 Subject: [PATCH] update --- src/sass/gtk/_common-3.0.scss | 16 +++--- src/sass/gtk/_common-4.0.scss | 24 ++++---- src/sass/gtk/_drawing.scss | 103 ++++++++++++++++++++++++++-------- 3 files changed, 100 insertions(+), 43 deletions(-) diff --git a/src/sass/gtk/_common-3.0.scss b/src/sass/gtk/_common-3.0.scss index aba5f0b..7dbe10d 100644 --- a/src/sass/gtk/_common-3.0.scss +++ b/src/sass/gtk/_common-3.0.scss @@ -3359,14 +3359,14 @@ scrolledwindow { } // Overflow indication, works similarly to the overshoot, the size if fixed tho. - undershoot { - &.top { @include undershoot(top); } - &.bottom { @include undershoot(bottom); } - &.left { @include undershoot(left); } - &.right { @include undershoot(right); } - - padding: $wm_radius/2; - } + // undershoot { + // &.top { @include undershoot(top); } + // &.bottom { @include undershoot(bottom); } + // &.left { @include undershoot(left); } + // &.right { @include undershoot(right); } + // + // padding: $wm_radius / 2; + // } @at-root junction { // the small square between two scrollbars border-style: solid none none solid; diff --git a/src/sass/gtk/_common-4.0.scss b/src/sass/gtk/_common-4.0.scss index c5d0636..a49fa23 100644 --- a/src/sass/gtk/_common-4.0.scss +++ b/src/sass/gtk/_common-4.0.scss @@ -3368,21 +3368,21 @@ scrolledwindow { // This is used by GtkScrolledWindow, when content is touch-dragged past boundaries. // This draws a box on top of the content, the size changes programmatically. > overshoot { - &.top { @include overshoot(top); } - &.bottom { @include overshoot(bottom); } - &.left { @include overshoot(left); } - &.right { @include overshoot(right); } + &.top { @include overshoot_alt(top); } + &.bottom { @include overshoot_alt(bottom); } + &.left { @include overshoot_alt(left); } + &.right { @include overshoot_alt(right); } } // Overflow indication, works similarly to the overshoot, the size if fixed tho. - > undershoot { - &.top { @include undershoot(top); } - &.bottom { @include undershoot(bottom); } - &.left { @include undershoot(left); } - &.right { @include undershoot(right); } - - padding: $wm_radius/2; - } + // > undershoot { + // &.top { @include undershoot(top); } + // &.bottom { @include undershoot(bottom); } + // &.left { @include undershoot(left); } + // &.right { @include undershoot(right); } + // + // padding: $wm_radius / 2; + // } > junction { // the small square between two scrollbars border-style: solid none none solid; diff --git a/src/sass/gtk/_drawing.scss b/src/sass/gtk/_drawing.scss index f02388e..3eb6802 100644 --- a/src/sass/gtk/_drawing.scss +++ b/src/sass/gtk/_drawing.scss @@ -388,6 +388,80 @@ // // possible $t values: // normal, backdrop +// + + $_small_gradient_length: 5%; + $_big_gradient_length: 100%; + + $_position: center top; + $_small_gradient_size: 100% $_small_gradient_length; + $_big_gradient_size: 100% $_big_gradient_length; + + @if $p==bottom { + $_position: center bottom; + $_linear_gradient_direction: to top; + } + + @else if $p==right { + $_position: right center; + $_small_gradient_size: $_small_gradient_length 100%; + $_big_gradient_size: $_big_gradient_length 100%; + } + + @else if $p==left { + $_position: left center; + $_small_gradient_size: $_small_gradient_length 100%; + $_big_gradient_size: $_big_gradient_length 100%; + } + + $_small_gradient_color: $c; + $_big_gradient_color: $c; + + @if $c==$fg_color { + $_small_gradient_color: $borders_color; + $_big_gradient_color: $text_color; + + @if $t==backdrop { $_small_gradient_color: $fill_color; } + } + + $_small_gradient: -gtk-gradient(radial, + $_position, 0, + $_position, 0.5, + to($_small_gradient_color), + to(rgba($_small_gradient_color, 0))); + + $_big_gradient: -gtk-gradient(radial, + $_position, 0, + $_position, 0.6, + from(rgba($_big_gradient_color, 0.07)), + to(rgba($_big_gradient_color, 0))); + + @if $t==normal { + background-image: $_small_gradient, $_big_gradient; + background-size: $_small_gradient_size, $_big_gradient_size; + } + + @else if $t==backdrop { + background-image: $_small_gradient; + background-size: $_small_gradient_size; + } + + background-repeat: no-repeat; + background-position: $_position; + + background-color: transparent; // reset some properties to be sure to not inherit them somehow + border: none; // + box-shadow: none; // +} + +@mixin overshoot_alt($p) { +// +// overshoot +// +// $p: position +// +// possible $p values: +// top, bottom, right, left // $_small_gradient_length: 3%; @@ -401,33 +475,16 @@ $_big_gradient_size: $_big_gradient_length 100%; } - $_small_gradient_color: $c; - $_big_gradient_color: transparentize($c, 0.93); - - @if $c==$fg_color { - $_small_gradient_color: darken($borders_color, 10%); - $_big_gradient_color: transparentize($fg_color, 0.93); - - @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; } - } - $_small_gradient: radial-gradient(farthest-side at $p, - $_small_gradient_color 85%, - transparentize($_small_gradient_color, 1)); + gtkalpha(currentColor, 0.12) 85%, + gtkalpha(currentColor, 0)); $_big_gradient: radial-gradient(farthest-side at $p, - $_big_gradient_color, - transparentize($_big_gradient_color, 1)); + gtkalpha(currentColor, 0.05), + gtkalpha(currentColor, 0)); - @if $t==normal { - background-image: $_small_gradient, $_big_gradient; - background-size: $_small_gradient_size, $_big_gradient_size; - } - - @else if $t==backdrop { - background-image: $_small_gradient; - background-size: $_small_gradient_size; - } + background-image: $_small_gradient, $_big_gradient; + background-size: $_small_gradient_size, $_big_gradient_size; background-repeat: no-repeat; background-position: $p;